# data[].attributes.blurb.html
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?

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv html

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv html enables

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Multi device web html enables

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv fi This NeXT machine was used to develop and run the rst WWW server, multimedia browser and web editor

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Multi device web html enables

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Multi device web Default stylesheets html enables

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Multi device web Default stylesheets ‘Browse by heading’ html enables

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Multi device web Default stylesheets ‘Browse by heading’ html enables Default behaviour

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Default stylesheets Multi device web ‘Browse by heading’ html enables Reader mode Default behaviour

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Default stylesheets ‘Browse by heading’ Multi device web html enables Reader mode Default behaviour

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv@front-end.social It’s the markup that matters Hidde de Vries, Modern Frontends Live, London, 18 November 2022

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Hi, I’m Hidde developer relations + accessibility specialist sanity.io hidde.blog @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
sanity.io platform for structured content / deeply customisable CMS / content as data @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Let’s talk accessbility

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Web accessibility to ensure people with disabilities can use your site/app

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Web accessibility to ensure people with disabilities can buy your product

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Web accessibility to ensure people with disabilities can use your service

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv A lot of people Use high contrast modes

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv A lot of people Zoom in on web pages

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv A lot of people Prefer reduced motion

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv A lot of people Do not use a mouse

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv What our markup does

# data[].attributes.slidedeck.data[].slides[].desc.html
Photo: brianna.lehman on Flickr

# data[].attributes.slidedeck.data[].slides[].desc.html
Photo: Stephen Fulljames on Flickr

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv f Accessible code provides semantics: it points machines at what stu f is

# data[].attributes.slidedeck.data[].slides[].desc.html
document object model

# data[].attributes.slidedeck.data[].slides[].desc.html
Example of an Accessibility Tree・ https://github.com/WICG/aom/blob/gh-pages/images/a11y-node.png

# data[].attributes.slidedeck.data[].slides[].desc.html
accessibility tree Role What kind of thing is it? Name/Description How should we refer to it? State/properties What else should we know?

# data[].attributes.slidedeck.data[].slides[].desc.html
role: link name: “World”

# data[].attributes.slidedeck.data[].slides[].desc.html
role: link name: “US politics”

# data[].attributes.slidedeck.data[].slides[].desc.html
role: link name: “Business”

# data[].attributes.slidedeck.data[].slides[].desc.html
role: button name: “Edition”

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Firefox < < Chromium

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv it’s the markup that matters, in practice

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv (The following examples work with all of your favourite tools)

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Where am I?

# data[].attributes.slidedeck.data[].slides[].desc.html
It’s the markup that matters Presentations - My site
…

# data[].attributes.slidedeck.data[].slides[].desc.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.

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv What is on this page? Headings

# data[].attributes.slidedeck.data[].slides[].desc.html
Whenever you use <h1>, <h2>, <h3>, … people can: - navigate by heading - see headings in reader mode

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Every detail counts fi Speci cations

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Which areas are on this page?

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Landmarks let you specify which sections a page has, so that people can navigate to them

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv HTML5 ARIA roles
<header> <footer> <nav> <aside> <main> role=”banner” role=”contentinfo” role=”navigation” role=”complementary” role=”main”

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.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

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Form controls

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv “46.1% of form inputs were not properly labeled.” — WebAIM WebAIM: the WebAIM Million (2022 data)・ https://webaim.org/projects/million/

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv fi Label input elds, radio buttons, checkboxes, selects, textareas, etc… so that they have a name

# data[].attributes.slidedeck.data[].slides[].desc.html
City
<div class=”form-item”> City <input type=”text” /> </div> Role: ‘textbox’ / ‘entry’ Name: null / ”

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessible Name and Description Computation 1.1 ・ https://www.w3.org/TR/accname-1.1/

# data[].attributes.slidedeck.data[].slides[].desc.html
City
<div class=”form-item”> <label for=”city”>City</label> <input id=“city” type=”text” /> </div> Role: ‘textbox’ / ‘entry’ Name: ‘City’

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Table semantics

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Tables make tabular data easier to navigate

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Buttons

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
The “Add Reaction” button

# data[].attributes.slidedeck.data[].slides[].desc.html
// use the button element <button type=”button”> <svg class=”icon”> <use xlink:href=”#emoji”></use> </svg> </button> Role: ‘button’ Name: ”

# data[].attributes.slidedeck.data[].slides[].desc.html
<button type=”button” aria-label=”Add reaction”> <svg class=”icon”> <use xlink:href=”#emoji”></use> </svg> </button> Role: ‘button’ Name: ‘Add reaction’

# data[].attributes.slidedeck.data[].slides[].desc.html
<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’

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv HTMHell collects examples of how not to use HTML HTMHell・ https://htmhell.dev

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv accessibility object model

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.html
const el = document.querySelector(“el”); el.role = “button”; el.ariaDisabled = false; Setting a11y info with idl properties fi (user-visible, user -modi able)

# data[].attributes.slidedeck.data[].slides[].desc.html
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;

# data[].attributes.slidedeck.data[].slides[].desc.html
Relationships without IDREFs

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
“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

# data[].attributes.slidedeck.data[].slides[].desc.html
Events from Assistive Technologies

# data[].attributes.slidedeck.data[].slides[].desc.html
Events from Assistive Technologies synthesised Dom events

# data[].attributes.slidedeck.data[].slides[].desc.html
reading accessibility tree from javascript (w/ outdated syntax)

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv future elements

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv the power of the web platform HTML comes with accessibility built in

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv But there isn’t HTML for everything!

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv “We hope to make it unnecessary to reinvent built-in UI controls” — OpenUI homepage

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Standardised controls can be a huge opportunity for accessibility

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Standardised controls can be a huge opportunity for accessibility (if accessibility considerations are met)

# data[].attributes.slidedeck.data[].slides[].desc.html
EX PE R IM EN TA L @hdv <selectmenu>

# data[].attributes.slidedeck.data[].slides[].desc.html
@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/

# data[].attributes.slidedeck.data[].slides[].desc.html
// regular select <select> <option>Tabs</option> <option>Spaces</option> Firefox
<option>A mix of both</option> </select> Edge

# data[].attributes.slidedeck.data[].slides[].desc.html
<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>

# data[].attributes.slidedeck.data[].slides[].desc.html
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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
L TA EN IM R PE EX <selectmenu> browser support Experimental, behind lags, known accessibility issues about: lags, “Experimental Web Features” f f @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
EX PE R IM EN TA L @hdv popover attribute (formerly known as “popup”)

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv popover would be an attribute for HTML to make popuplike behaviors easier to build

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.html
@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

# data[].attributes.slidedeck.data[].slides[].desc.html
Replace image
Upload Browse …
L TA EN IM R PE EX // create a popover

# data[].attributes.slidedeck.data[].slides[].desc.html
Replace image
Upload Browse …
L TA EN IM R PE EX // give this popup behavior

# data[].attributes.slidedeck.data[].slides[].desc.html
Replace image
Upload Browse …
L TA EN IM R PE EX // add a unique ID

# data[].attributes.slidedeck.data[].slides[].desc.html
<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

# data[].attributes.slidedeck.data[].slides[].desc.html
L TA EN IM R PE EX // make an async popup

# data[].attributes.slidedeck.data[].slides[].desc.html
const statusMessage = document.querySelector(“#options”); L TA EN IM R PE EX // make an async popup

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
L TA EN IM R PE EX popover browser support Experimental, behind lags, known accessibility issues about: lags, “Experimental Web Features” f f @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv We want your thoughts! @OpenUICG on Twitter Discord / weekly meetings f https://hidde.blog/dialog-modal-popover-di ferences/

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv We want your thoughts! @OpenUICG on Twitter Discord / weekly meetings

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv Wrapping up

# data[].attributes.slidedeck.data[].slides[].desc.html
markup affects accessibility trees

# data[].attributes.slidedeck.data[].slides[].desc.html
markup affects accessibility trees some of this is coming to JavaScript land

# data[].attributes.slidedeck.data[].slides[].desc.html
markup affects accessibility trees some of this is coming to JavaScript land some of this may be built into new html elements

# data[].attributes.slidedeck.data[].slides[].desc.html
@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)

# data[].attributes.resources.data[].title
 Dialogs, modality and popovers seem similar. How are they different?

# data[].attributes.resources.data[].title
Smashing TV: Léonie Watson on why semantic HTML document landmarks assist her using a screenreader (YouTube)

# data[].attributes.resources.data[].desc.html
Léonie shows how titles, landmark regions and headings make it easier for her to browse the web

# data[].attributes.resources.data[].title
whatwg/html: Add element reflection counterparts to id-reference counterparts

# data[].attributes.resources.data[].desc.html
Issue for creating relationships without IDREFs in HTML Spec

# data[].attributes.resources.data[].title
Web Components and Model Driven Views by Alex Russell - Fronteers

# data[].attributes.resources.data[].desc.html
Alex Russell’s introduction to the idea of Web Components at Fronteers 2011.

# data[].attributes.resources.data[].desc.html
WebAIM’s research that showed 59% of websites they checked had unlabeled form elements

# data[].attributes.resources.data[].desc.html
My notes on linking to translations

# data[].attributes.resources.data[].desc.html
“a JavaScript API to allow developers to modify (and eventually explore) the accessibility tree for an HTML page”

# data[].attributes.resources.data[].title
What’s new in web accessibility (Google I/O, 2018)

# data[].attributes.resources.data[].desc.html
Video in which Rob Dodson and Domenic Mizzoni show what’s new in web accessibility.

# data[].attributes.resources.data[].title
Accessible Name and Description Computation 1.1

# data[].attributes.resources.data[].desc.html
The spec that defines how accessible names are computed

# data[].attributes.resources.data[].desc.html
The Headings component in Tenon UI’s accessible pattern library lets you automatically have the right heading hierarchy.

# data[].attributes.resources.data[].desc.html
Which includes stats on browser support

# data[].attributes.resources.data[].desc.html
In which Brian Kardell takes a look at HTTPArchive data, specifically ‘dasherised’ elements. One of his findings: most custom elements are advertising related.

# data[].attributes.resources.data[].title
Heading structures are tables of contents

# data[].attributes.resources.data[].desc.html
More on why heading structures could be seen as tables of contents

# data[].attributes.resources.data[].desc.html
Bruce Lawson’s presentation on the AOM, from which I took this excellent advice: “built-in beats bolt-on”

# data[].attributes.resources.data[].title
Web Components as compositions of native elements

# data[].attributes.resources.data[].desc.html
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.

# data[].attributes.resources.data[].title
Meaning without markup: the Accessibility Object Model

# data[].attributes.resources.data[].desc.html
An explanation of the Accessibility Object Model on my blog

# data[].attributes.resources.data[].desc.html
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.

# data[].attributes.resources.data[].title
W3C/WAI, How People with Disabilities Use the Web

# data[].attributes.resources.data[].title
Could browsers fix more accessibility problems automatically?

# data[].attributes.resources.data[].desc.html
HTMHell collects examples of how not to use HTML

# data[].attributes.resources.data[].title
Cross-root ARIA Delegation API explainer