It’s the markup that matters

A presentation at Modern Frontends Live! in November 2022 in London, UK by Hidde de Vries

@hdv html

@hdv html enables

@hdv Multi device web html enables

@hdv fi This NeXT machine was used to develop and run the rst WWW server, multimedia browser and web editor

@hdv Multi device web html enables

@hdv Multi device web Default stylesheets html enables

@hdv Multi device web Default stylesheets ‘Browse by heading’ html enables

@hdv Multi device web Default stylesheets ‘Browse by heading’ html enables Default behaviour

@hdv Default stylesheets Multi device web ‘Browse by heading’ html enables Reader mode Default behaviour

@hdv

@hdv Default stylesheets ‘Browse by heading’ Multi device web html enables Reader mode Default behaviour

@hdv@front-end.social It’s the markup that matters Hidde de Vries, Modern Frontends Live, London, 18 November 2022

@hdv Hi, I’m Hidde developer relations + accessibility specialist sanity.io hidde.blog @hdv

sanity.io platform for structured content / deeply customisable CMS / content as data @hdv

@hdv Let’s talk accessbility

@hdv Web accessibility to ensure people with disabilities can use your site/app

@hdv Web accessibility to ensure people with disabilities can buy your product

@hdv Web accessibility to ensure people with disabilities can use your service

@hdv 1-2% 4% blind/visually impaired colour blind ` OOGVERENIGING (1 IN 12 MEN, 1 IN 250 WOMEN) neurological conditions This concerns a lot of people 9% motor impairments 15% deaf/heard of hearing low numerate / low literate HOORWIJZER ALGEMENE REKENKAMER

@hdv A lot of people Use high contrast modes

@hdv A lot of people Zoom in on web pages

@hdv A lot of people Prefer reduced motion

@hdv A lot of people Do not use a mouse

@hdv A lot of people - zoom in web pages use high contrast modes use assistive technologies need audio/video transcribed do not use a mouse use voice recognition prefer reduced motion W3C/WAI, How People with Disabilities Use the Web https://www.w3.org/WAI/people-use-web/tools-techniques

@hdv A lot of people - zoom in web pages use high contrast modes use assistive technologies need audio/video transcribed do not use a mouse use voice recognition prefer reduced motion W3C/WAI, How People with Disabilities Use the Web https://www.w3.org/WAI/people-use-web/tools-techniques

@hdv A lot of people - zoom in web pages use high contrast modes use assistive technologies need audio/video transcribed do not use a mouse use voice recognition prefer reduced motion Image credits: Apple, Wikipedia

@hdv What our markup does

Photo: brianna.lehman on Flickr

Photo: Stephen Fulljames on Flickr

@hdv f Accessible code provides semantics: it points machines at what stu f is

document object model

Example of an Accessibility Tree・ https://github.com/WICG/aom/blob/gh-pages/images/a11y-node.png

accessibility tree Role What kind of thing is it? Name/Description How should we refer to it? State/properties What else should we know?

role: link name: “World”

role: link name: “US politics”

role: link name: “Business”

role: button name: “Edition”

Accessibility tree Platform APIs AT Your markup Microsoft Active Accessibility Microsoft User Interface Automation MSAA DOM tree Mac OS X Accessibility Protocol text-to-speech fi Linux/Unix Accessibility Toolkit IAccessible2 screen magni ers alternate pointing devices

Firefox < < Chromium

@hdv it’s the markup that matters, in practice

@hdv (The following examples work with all of your favourite tools)

@hdv Where am I?

<html lang=”en”> <head> <title>It’s the markup that matters Presentations - My site</title> </head> <body> … </body> </html>

@hdv [The <title>] is still the rst guarantee or rst con rmation that you’ve ended up on the page that you intended to reach. — Léonie Watson, accessibility expert and screenreader user fi fi fi Smashing TV with Léonie Watson・ https://www.youtube.com/watch?v=iUCYPM6up9M.

@hdv What is on this page? Headings

Whenever you use <h1>, <h2>, <h3>, … people can: - navigate by heading - see headings in reader mode

@hdv Every detail counts fi Speci cations

@hdv Which areas are on this page?

@hdv Landmarks let you specify which sections a page has, so that people can navigate to them

@hdv HTML5 ARIA roles
<header> <footer> <nav> <aside> <main> role=”banner” role=”contentinfo” role=”navigation” role=”complementary” role=”main”

@hdv The more landmarks one has in a document, especially landmarks of the same type, the less meaningful they become — Scott O’Hara, accessibility specialist Scott O’Hara: Accessible landmarks・ https://www.scottohara.me/blog/2018/03/03/landmarks.html

@hdv I would still love this as a browser feature fi Hidde de Vries: Could browsers x more accessibility problems automatically?・ https://talks.hiddedevries.nl/Lh9wu2

@hdv Form controls

@hdv “46.1% of form inputs were not properly labeled.” — WebAIM WebAIM: the WebAIM Million (2022 data)・ https://webaim.org/projects/million/

@hdv fi Label input elds, radio buttons, checkboxes, selects, textareas, etc… so that they have a name

City
<div class=”form-item”> City <input type=”text” /> </div> Role: ‘textbox’ / ‘entry’ Name: null / ”

Accessible Name and Description Computation 1.1 ・ https://www.w3.org/TR/accname-1.1/

City
<div class=”form-item”> <label for=”city”>City</label> <input id=“city” type=”text” /> </div> Role: ‘textbox’ / ‘entry’ Name: ‘City’

@hdv Table semantics

@hdv Tables make tabular data easier to navigate

<table> <caption>Net results 2018</caption> <thead> <tr> <th scope=”col”>Assets</th> Use table semantics <th scope=”col”>Capital</th> … </tr> </thead> <tbody> … </tbody> </table>

@hdv Buttons

fi Whenever you use <button> people can: - nd it in TAB order - press it with just a keyboard - submit the form, even if JS fails

The “Add Reaction” button

// use the button element <button type=”button”> <svg class=”icon”> <use xlink:href=”#emoji”></use> </svg> </button> Role: ‘button’ Name: ”

<button type=”button” aria-label=”Add reaction”> <svg class=”icon”> <use xlink:href=”#emoji”></use> </svg> </button> Role: ‘button’ Name: ‘Add reaction’

<button type=”button”> <svg class=”icon”> <use xlink:href=”#emoji”></use> </svg> // add accessible name <span class=”visually-hidden”> Add reaction </span> </button> Role: ‘button’ Name: ‘Add reaction’

@hdv The HTML spec is the place to nd out how to use HTML developers.whatwg.org fi HTML: The Living Standard・ https://developers.whatwg.org

@hdv HTMHell collects examples of how not to use HTML HTMHell・ https://htmhell.dev

@hdv accessibility object model

@hdv “develop additions to the web platform to allow developers to provide information to assistive technology APIs, and to understand what information browsers provide to those APIs” — The AOM explainer document The Accessibility Object Model (AOM) ・ https://github.com/WICG/aom

const el = document.querySelector(“el”); el.role = “button”; el.ariaDisabled = false; Setting a11y info with idl properties fi (user-visible, user -modi able)

const el = document.querySelector(“el”); Setting a11y info with idl properties internally fi (not user-visible, not user-modi able; avoids sprouting) el._internals.role = “button”; el._internals.ariaDisabled = false;

Relationships without IDREFs

IDREFs don’t work across Shadow boundaries Cross-root ARIA Delegation API explainer・ github.com/leobalter/cross-root-aria-delegation/blob/main/cross-root-aria-delegation.md

“an API to forward ARIA attributes and properties set on a Web Component to elements inside of its shadowroot” — Cross-root ARIA Delegation API explainer Cross-root ARIA Delegation API explainer・ github.com/leobalter/cross-root-aria-delegation/blob/main/cross-root-aria-delegation.md

Events from Assistive Technologies

Events from Assistive Technologies synthesised Dom events

reading accessibility tree from javascript (w/ outdated syntax)

@hdv future elements

@hdv the power of the web platform HTML comes with accessibility built in

@hdv But there isn’t HTML for everything!

@hdv

@hdv “We hope to make it unnecessary to reinvent built-in UI controls” — OpenUI homepage

@hdv Standardised controls can be a huge opportunity for accessibility

@hdv

@hdv Standardised controls can be a huge opportunity for accessibility (if accessibility considerations are met)

EX PE R IM EN TA L @hdv <selectmenu>

@hdv developers on <select> Hard to build “search in list” UI Can’t customise popup window — 27.43% of respondents — 11.36% of respondents (desktop) Can’t style <option> Need to insert arbitrary HTML Can’t style default state — 17.85% of respondents — 7.82% of respondents — 14.01% of respondents Greg Whitworth, Can we please style the <select> control?!・ https://www.gwhitworth.com/posts/2019/can-we-please-style-select/

// regular select <select> <option>Tabs</option> <option>Spaces</option> Firefox
<option>A mix of both</option> </select> Edge

<selectmenu> <option>Tabs</option> <option>Spaces</option> <option>A mix of both</option> </select> Example from FAST UI・ https://explore.fast.design/components/fast-select L TA EN IM R PE EX // introducing… <selectmenu>

Example from FAST UI・ https://explore.fast.design/components/fast-select L TA EN IM R PE EX selectmenu::part(button) { background-color: #f00; border-radius: 5px; }

selectmenu::part(listbox) { padding: 10px; margin-top: 5px; } Example from FAST UI・ https://explore.fast.design/components/fast-select L TA EN IM R PE EX selectmenu::part(button) { background-color: #f00; border-radius: 5px; }

selectmenu::part(listbox) { padding: 10px; margin-top: 5px; } selectmenu::part(selected-value) { padding: 10px; margin-top: 5px; } Example from FAST UI・ https://explore.fast.design/components/fast-select L TA EN IM R PE EX selectmenu::part(button) { background-color: #f00; border-radius: 5px; }

L TA EN IM R PE EX <selectmenu> browser support Experimental, behind lags, known accessibility issues about: lags, “Experimental Web Features” f f @hdv

EX PE R IM EN TA L @hdv popover attribute (formerly known as “popup”)

@hdv popover would be an attribute for HTML to make popuplike behaviors easier to build

@hdv popover examples action menus teaching UI form element suggestions content pickers <select>’s listbox Chrome Platform Status: The Popup API・ https://chromestatus.com/feature/5463833265045504

@hdv common popover behaviours on top of other page content only open when it needs to be usually one at the time Popup API (Explainer)・ https://open-ui.org/components/popup.research.explainer

<div> <h3>Replace image</h3> <button>Upload</button> <button>Browse</button> … </div> L TA EN IM R PE EX // create a popover

<div popover> <h3>Replace image</h3> <button>Upload</button> <button>Browse</button> … </div> L TA EN IM R PE EX // give this popup behavior

<div popover id=”options”> <h3>Replace image</h3> <button>Upload</button> <button>Browse</button> … </div> L TA EN IM R PE EX // add a unique ID

<button togglepopover=”options”> Image options </button> // give this popup behavior <div popover id=”options”> <h3>Replace image</h3> <button>Upload</button> <button>Browse</button> … </div> L TA EN IM R PE EX // add a toggle button

<div popover=”async” id=”statusMessage”> </div> L TA EN IM R PE EX // make an async popup

<div popover=”async” id=”statusMessage”> </div> const statusMessage = document.querySelector(“#options”); L TA EN IM R PE EX // make an async popup

<div popover=”async” id=”statusMessage”> </div> const statusMessage = document.querySelector(“#options”); // do publishing magic, then: statusMessage.textContent = “This document was published”; statusMessage.showPopover(); L TA EN IM R PE EX // make an async popup

L TA EN IM R PE EX popover browser support Experimental, behind lags, known accessibility issues about: lags, “Experimental Web Features” f f @hdv

@hdv We want your thoughts! @OpenUICG on Twitter Discord / weekly meetings f https://hidde.blog/dialog-modal-popover-di ferences/

@hdv We want your thoughts! @OpenUICG on Twitter Discord / weekly meetings

@hdv Wrapping up

markup affects accessibility trees

markup affects accessibility trees some of this is coming to JavaScript land

markup affects accessibility trees some of this is coming to JavaScript land some of this may be built into new html elements

@hdv thankS for listening! Contact/resources talks.hiddedevries.nl @hdv@front-end.social or hidde@sanity.io Special thanks for clari cations, input, feedback Mason Freed, Scott O’Hara, Julia Silver, Eric Eggert, all at Open UI CG fi Typefaces Bungee by David Jonathan Ross (DJR) Rasa by Anna Giedryś, David Březina (Rosetta)

Hidde de Vries
@hdv

1 / 117

As web developers, a large part of what we can do to improve the accessibility of our sites and apps, is in markup. In this talk, you’ll learn how the markup we write impacts the Document Object Model (DOM) and Accessibility APIs. We’ll look at specific examples and how to optimise them for end users. Lastly, we’ll peak into upcoming changes: how will the Accessibility Object Model (AOM) help us in the future?

Resources

The following resources were mentioned during the presentation or are useful additional information.

Dialogs, modality and popovers seem similar. How are they different?
Smashing TV: Léonie Watson on why semantic HTML document landmarks assist her using a screenreader (YouTube)

Léonie shows how titles, landmark regions and headings make it easier for her to browse the web
whatwg/html: Add element reflection counterparts to id-reference counterparts

Issue for creating relationships without IDREFs in HTML Spec
Web Components and Model Driven Views by Alex Russell - Fronteers

Alex Russell’s introduction to the idea of Web Components at Fronteers 2011.
The WebAIM Million

WebAIM’s research that showed 59% of websites they checked had unlabeled form elements
Linking to translations

My notes on linking to translations
The Accessibility Object Model (WICG)

“a JavaScript API to allow developers to modify (and eventually explore) the accessibility tree for an HTML page”
What’s new in web accessibility (Google I/O, 2018)

Video in which Rob Dodson and Domenic Mizzoni show what’s new in web accessibility.
Accessible Name and Description Computation 1.1

The spec that defines how accessible names are computed
Tenon UI

The Headings component in Tenon UI’s accessible pattern library lets you automatically have the right heading hierarchy.
Web Components

Which includes stats on browser support
Interesting Custom Element Data Begins

In which Brian Kardell takes a look at HTTPArchive data, specifically ‘dasherised’ elements. One of his findings: most custom elements are advertising related.
Heading structures are tables of contents

More on why heading structures could be seen as tables of contents
Bruce Lawson on noti.st: AOM-NOM-NOM

Bruce Lawson’s presentation on the AOM, from which I took this excellent advice: “built-in beats bolt-on”
Web Components as compositions of native elements

It’s very cool that Web Components let us create our own custom things, but often we can actually reuse existing elements, so that we can benefit from existing semantics.
Meaning without markup: the Accessibility Object Model

An explanation of the Accessibility Object Model on my blog
Sanity

At Sanity we want to make content easier to work with for content creators, developers and, ultimately businesses… so that they can have more remarkable experiences.
W3C/WAI, How People with Disabilities Use the Web
Could browsers fix more accessibility problems automatically?
HTMHell
Popup API (Explainer)
HTMHell

HTMHell collects examples of how not to use HTML
Cross-root ARIA Delegation API explainer
Chrome Platform Status: The Popup API

Buzz and feedback

Here’s what was said about this presentation on social media.

Shout out to the excellent work done by the @openuicg group on popover and selectmenu, coming soon in a browser near you (behind experimental features flag in chromium already), by @hdv today at #ModernFrontensLive. pic.twitter.com/DC4NzYOlFV
— Patrick @patrickbrosset@mas.to (@patrickbrosset) November 18, 2022
@hdv talking about “It's the markup that matters”

📍 Room Hedy Lamarr
📌 https://t.co/V7pxrMm5Rp pic.twitter.com/tkClcHNi7u
— Modern Frontends Live! November 17-18 - London (@ModernFrontends) November 18, 2022