It’s the markup that matters

A presentation at CodeLand 2021 by Hidde de Vries

It’s the markup Hidde de Vries / CodeLand 2021 that matters

hidde.blog @hdv @hdv

security performance Quality of websites accessibility @hdv @hdv usability

Accessible to People with permanent disabilities @hdv @hdv People with temporary disabilities People in certain situations

Responsibility of Content designers Web developers UI designers CMS integrators User researchers @hdv @hdv

Responsibility of Content designers Web developers UI designers CMS integrators @hdv @hdv User researchers

Code Assistive Technologies (AT) text-to-speec screen magni er alternate pointing devices s fi h @hdv

@hdv @hdv

@hdv @hdv

@hdv @hdv

@hdv @hdv

@hdv @hdv

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

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

Accessible code points machines at what stuff is @hdv @hdv

Accessible code points machines at what stuff is called @hdv @hdv

Accessible code points machines in what state stuff is @hdv @hdv

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

@hdv

It’s the markup that matters @hdv

What’s this page? @hdv

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

— 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.

What’s on this page? Headings @hdv

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

@hdv

What’s on this page? Landmarks @hdv

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

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

“ Built-in beats bolt-on. — Bruce Lawson Bruce Lawson: AOM-NOM-NOM・ https://noti.st/brucelawson/wLB2lE/aom-nom-nom#sgf2LTe

HTML5 <header> <footer> <nav> <aside> <main> @hdv

Form controls @hdv

“ “59% of form inputs were not properly labeled.”. — WebAIM The WebAIM Million ・ https://webaim.org/projects/million/

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

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

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

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’

Table semantics @hdv

Tables make tabular data easier to navigate @hdv

<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> @hdv </table>

<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> @hdv </table>

Language @hdv

The lang attribute lets you specify which language content is in @hdv

Specify languages with lang <div> <p lang=”de”>Wilkommen</p> <p lang=”fr”>Bienvenue</p> <p lang=”en”>Welcome</p> </div> @hdv

If buttons are just icons @hdv

The “Add Reaction” button

<div class=”icon” onclick=”emoji()”> <svg class=”icon”> <use xlink:href=”#emoji”></use> </svg> </div> Role: ” Name: ”

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

<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’

<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”>

“ 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/

<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

No meaningful mark-up for your component? ARIA can poly ll! fi @hdv

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/

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

Not all ARIA has good support or provides good usability for AT users. @hdv

Expandables @hdv

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>

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…

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…

Announcements @hdv

Your changes were saved successfully! @hdv

<div role=”alert”> </div> // 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!

Meaning without mark-up: the Accessibility Object Model @hdv

“ “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

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

<my-custom-element role=”button” aria-disabled=”false” … /> No more “sprouting” @hdv

const el = document.querySelector(“el”); el.role = “button”; el.ariaDisabled = false; Set ARIA with IDL attributes instead of markup @hdv

Relationships without IDREFs @hdv

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

Events from Assistive Technologies @hdv

// 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

Reading accessibility tree through JavaScript @hdv

TLDR

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

Hidde de Vries
@hdv

1 / 76

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.

Video

Resources

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

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