It’s the markup that matters

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

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>

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’

“ 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