It’s the markup that matters

@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 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)

It’s the markup that matters

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75