# data[].attributes.blurb.html
Learn how the markup we write impacts not just the Document Object Model (DOM), but, indirectly, also the Accessibility Object Model (AOM), and how this impacts end users.

# data[].attributes.slidedeck.data[].slides[].desc.html
It’s the markup Hidde de Vries / CodeLand 2021 that matters

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

# data[].attributes.slidedeck.data[].slides[].desc.html
security performance Quality of websites accessibility @hdv @hdv usability

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessible to People with permanent disabilities @hdv @hdv People with temporary disabilities People in certain situations

# data[].attributes.slidedeck.data[].slides[].desc.html
Responsibility of Content designers Web developers UI designers CMS integrators User researchers @hdv @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Responsibility of Content designers Web developers UI designers CMS integrators @hdv @hdv User researchers

# data[].attributes.slidedeck.data[].slides[].desc.html
Code Assistive Technologies (AT) text-to-speec screen magni er alternate pointing devices s fi h @hdv

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

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

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

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

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

# 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
Role What kind of thing is it? Name/Description How should we refer to it? State/properties What else should we know? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessible code points machines at what stuff is @hdv @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessible code points machines at what stuff is called @hdv @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessible code points machines in what state stuff is @hdv @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility tree Platform APIs AT Your markup DOM tree Microsoft Active Accessibility Microsoft User Interface Automation MSAA Mac OS X Accessibility Protocol text-to-speech Linux/Unix Accessibility Toolkit IAccessible2 fi @hdv screen magni ers alternate pointing devices

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

# data[].attributes.slidedeck.data[].slides[].desc.html
It’s the markup that matters @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
What’s this page? @hdv

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

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

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

# data[].attributes.slidedeck.data[].slides[].desc.html
fi “Navigate by heading” is a very common way for AT users to gure out what’s on a page Heading structures are tables of contents ・ https://hiddedevries.nl/en/blog/2018-09-01-heading-structures-are-tables-of-contents

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

# data[].attributes.slidedeck.data[].slides[].desc.html
What’s on this page? Landmarks @hdv

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

# 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
“ Built-in beats bolt-on. — Bruce Lawson Bruce Lawson: AOM-NOM-NOM・ https://noti.st/brucelawson/wLB2lE/aom-nom-nom#sgf2LTe

# data[].attributes.slidedeck.data[].slides[].desc.html
HTML5 <header> <footer> <nav> <aside> <main> @hdv

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

# data[].attributes.slidedeck.data[].slides[].desc.html
“ “59% of form inputs were not properly labeled.”. — WebAIM The WebAIM Million ・ https://webaim.org/projects/million/

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

# data[].attributes.slidedeck.data[].slides[].desc.html
First Name
<div class=”form-item”> First Name <input type=”text” /> </div> @hdv 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
First Name
<div class=”form-item”> <label for=”fn”>First Name</label> <input id=”fn” type=”text” /> </div> @hdv Role: ‘textbox’ / ‘entry’ Name: ‘First Name’

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

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

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

# data[].attributes.slidedeck.data[].slides[].desc.html
The lang attribute lets you specify which language content is in @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Specify languages with lang <div> <p lang=”de”>Wilkommen</p> <p lang=”fr”>Bienvenue</p> <p lang=”en”>Welcome</p> </div> @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
If buttons are just icons @hdv

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

# data[].attributes.slidedeck.data[].slides[].desc.html
Role: ” Name: ”

# 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”> <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
<button type=”button”> // hide icon from a11y tree <svg class=”icon” role=”presentation” “Accessibility node not exposed” aria-hidden=”true” focusable=”false”> <use xlink:href=”#emoji”></use> </svg> <span class=”visually-hidden”>

# data[].attributes.slidedeck.data[].slides[].desc.html
“ It would appear that either aria-hidden=”true” or role=”presentation” should be able to help out here. — John Foliot HTML5 Accessibility: aria-hidden and role=”presentation” ・ http://john.foliot.ca/aria-hidden/

# data[].attributes.slidedeck.data[].slides[].desc.html
<button type=”button”> <svg class=”icon” role=”presentation” aria-hidden=”true” focusable=”false”> Avoids weird focus bugs in IE11 <use xlink:href=”#emoji”></use> </svg> <span class=”visually-hidden”> Add reaction

# data[].attributes.slidedeck.data[].slides[].desc.html
No meaningful mark-up for your component? ARIA can poly ll! fi @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
ARIA can provide names, roles, property and states through attributes. Accessible Rich Internet Applications (WAI-ARIA) 1.1 ・ https://www.w3.org/TR/wai-aria/

# data[].attributes.slidedeck.data[].slides[].desc.html
There usually is existing HTML for your problem, combining existing elements FTW! Web Components as compositions of native elements ・ https://hiddedevries.nl/en/blog/2017-10-19-web-components-as-compositions-of-native-elements

# data[].attributes.slidedeck.data[].slides[].desc.html
Not all ARIA has good support or provides good usability for AT users. @hdv

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

# data[].attributes.slidedeck.data[].slides[].desc.html
Tooltip <button Enter your IBAN number ? type=”button” aria-controls=”tooltip” An IBAN-number is a 34 characters string, please double check with your bank if you’re not sure what yours is.

What’s IBAN? </button>

<div id=”tooltip”> An IBAN-number is a 34 ch… @hdv </div>

# data[].attributes.slidedeck.data[].slides[].desc.html
Tooltip <button Enter your IBAN number ? type=”button” aria-controls=”tooltip” An IBAN-number is a 34 characters string, please double check with your bank if you’re not sure what yours is. aria-expanded=”true” > What’s IBAN? </button>
<div id=”tooltip”> @hdv An IBAN-number is a 34 ch…

# data[].attributes.slidedeck.data[].slides[].desc.html
Tooltip <button Enter your IBAN number ? type=”button” aria-controls=”tooltip” aria-expanded=”false” > What’s IBAN? </button>
<div id=”tooltip” hidden> @hdv An IBAN-number is a 34 ch…

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

# data[].attributes.slidedeck.data[].slides[].desc.html
Your changes were saved successfully! @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
// We’ve just used fetch() to POST form // data on the submit event of a form. // Let’s say we’re handling like: const el = document.querySelector(“div”); el.textContent(“Your changes were saved successfully”); @hdv Your changes were saved successfully!

# data[].attributes.slidedeck.data[].slides[].desc.html
Meaning without mark-up: the Accessibility Object Model @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ “This effort aims to 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
AOM doesn’t bring new semantics or states, it introduces new ways to specify them The Accessibility Object Model (AOM) ・ https://github.com/WICG/aom

# data[].attributes.slidedeck.data[].slides[].desc.html
<my-custom-element role=”button” aria-disabled=”false” … /> No more “sprouting” @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
const el = document.querySelector(“el”); el.role = “button”; el.ariaDisabled = false; Set ARIA with IDL attributes instead of markup @hdv

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

# data[].attributes.slidedeck.data[].slides[].desc.html
aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage @hdv aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-setsize

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

# data[].attributes.slidedeck.data[].slides[].desc.html
// Implementing a canvas-based // spreadsheet’s semantics canvas.attachAccessibleRoot(); let table = canvas.accessibleRoot .appendChild(new AccessibleNode()); table.role = “table”; table.colCount = 10; table.rowcount = 100; Non-DOM nodes in the Accessibility Tree let headerRow = table.appendChild( appendChild(new AccessibleNode()) ); headerRow.role = “row”; headerRow.rowindex = 0; Example from: AOM explainer ・ https://wicg.github.io/aom/explainer.html#the-accessibility-object-model

# data[].attributes.slidedeck.data[].slides[].desc.html
Reading accessibility tree through JavaScript @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
TLDR

# data[].attributes.slidedeck.data[].slides[].desc.html
Our apps need to be accessible Good mark-up makes a difference, it gives us lots of accessibility for free Always consider which names, roles and states your markup conveys @hdv

# 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