More to give than just the div: semantics and how to get them right

More to give than just the div: semantics and how to get them right Hidde de Vries, Access All Areas, 2021 @hdv

semantics @hdv

Correspondence theories of meaning @hdv

Wittgenstein: “the meaning of a word is its use in the language” Ludwig Wittgenstein, Philosophical Investigations (1953) @hdv

Wittgenstein: no such thing as a private language, there can only be meaning if it’s shared Ludwig Wittgenstein, Philosophical Investigations (1953) @hdv

Your design system is a shared language. @hdv

Your API is a shared language. @hdv

Your Vue/Svelte/<customelement> component names are a shared language. @hdv

Classi cation depends on place and culture fi @hdv

Classi cation is hard and AI aren’t great at it fi @hdv

Semantics on the web @hdv

For the web, you could have a lot semantics… @hdv https://html.spec.whatwg.org/dev/dom.html#semantics-2

? ” 0 . 1 ” = n o i s r e v <?xml > ” 0 2 0 1 9 9 9 1 ” = e t a D r e d r o r e d r O <purchase > ” S U ” = y r t n u o c <shipTo > e m a n / < h t i m S < n a m e> A l i c e > t e e r t s / < t e e r t S e l p a M 3 2 1 > t e e r <st > y t i c / < y e l l a V < c i t y> M i l l > e t a t s / < A C > e <stat > p i z / < 2 5 9 0 9 > <zip < / s h i p T o> > ” S U ” = y r t n u o <billTo c > e m a n / < h t i m S < n a m e> R o b e r t > t e e r t s / < e u n e v < s t r e e t> 8 O a k A > y t i c / < n w o T d l < c i t y> O > e t a t s / < A P > e t a t <s > p i z / < 9 1 8 5 9 > p i z < @hdv t n < / b i l l T o> e m m o c / ! < d l i w g n i o g s i n w a l y m , y r r u H > t n <comme < i t e m s> > ” A A 2 7 8 ” = m u N t r <item pa > e m a N t c u d o r p / < r e w o m n w a L > e m a N <product > y t i t n a u q / < 1 > y t <quanti > e c i r P S U / < 5 9 . 8 4 < U S P r i c e> 1 > t n e m m o c / < c i r t c e l e s i s i h t m r i f n o C > t n e m m o c < https://www.w3.org/TR/xmlschema-0/

<xsd:element nam e= ” p u r c h a s e O r d e r ” t y p e= ” P u r c h aseOrd <xsd:element nam e= ” c o m m e n t ” t y p e =”xsd:string”/ <xsd:complexType xsd:sequence n a m e= ” P u r c h a s e O r erType”

derType”> <xsd:element nam e= ” s h i p T o ” t y p e= ” U S A d d r e s s “/ > <xsd:element nam e= ” b i l l T o ” t y p e= ” U S A d d r e s s “/ > <xsd:element ref =”comment” minOc c u r s= ” 0 ” / > <xsd:element nam e= ” i t e m s ” t y p e= ” I t e m s “/ > </xsd:sequence> <xsd:attribute n a m e= ” o r d e r D a t e ” t y p e = ” x s d : d a t e “/ </xsd:complexTyp > e> <xsd:complexType xsd:sequence @hdv n a m e= ” U S A d d r e s s ” <xsd:element nam e= ” n a m e ” <xsd:element nam e= ” s t r e e t ” <xsd:element nam e= ” c i t y ” <xsd:element nam e= ” s t a t e ” <xsd:element nam e= ” z i p ” </xsd:sequence>

t y p e= ” x s d : s t r i n g “/> t y p e= ” x s d : s t r i n g “/> t y p e= ” x s d : s t r i n g “/> t y p e= ” x s d : s t r i n g “/> type=”xsdhttps://www.w3.org/TR/xmlschema-0/ :decimal”/>

…but for accessibility, we need one, agreed-upon set @hdv https://html.spec.whatwg.org/dev/dom.html#semantics-2

HTML is a standard way for your website to declare its semantics @hdv https://html.spec.whatwg.org/dev/dom.html#semantics-2

It’s not a way to declare what stuff looks like on a page @hdv https://html.spec.whatwg.org/dev/dom.html#semantics-2

Multi device web @hdv HTML enables… Photo: Jeremy Keith; from: https://commons.wikimedia.org/wiki/File:Cuddling_with_multiple_devices.jpg

This NeXT machine was used to develop and run the rst WWW server, multimedia browser and web editor @hdv fi Copyright: CERN (http://cds.cern.ch/record/42413)

Multi device web @hdv HTML enables… Photo: Jeremy Keith; from: https://commons.wikimedia.org/wiki/File:Cuddling_with_multiple_devices.jpg

Default stylesheets Multi device web @hdv HTML enables…

Default stylesheets Multi device web @hdv HTML enables… ‘Browse by heading’ “Heading structures are tables of contents” - https://hiddedevries.nl/en/blog/2018-09-01-heading-structures-are-tables-of-contents

Default stylesheets Multi device web HTML enables… ‘Browse by heading’ Default behaviour @hdv

Default stylesheets Multi device web HTML enables… Reader mode @hdv ‘Browse by heading’ Default behaviour

@hdv

Default stylesheets Multi device web HTML enables… Reader mode @hdv ‘Browse by heading’ Default behaviour

Hire for HTML expertise @hdv

In practice @hdv

Semantics in HTML is in <elements> @hdv https://html.spec.whatwg.org/dev/dom.html#semantics-2

Semantics in HTML is in <elements attributes> @hdv https://html.spec.whatwg.org/dev/dom.html#semantics-2

Semantics in HTML is in <elements attributes=”value”> @hdv https://html.spec.whatwg.org/dev/dom.html#semantics-2

Multiple ways to get to one semantic <button> Semantic HTML element @hdv

Multiple ways to get to one semantic <button> Semantic HTML element

Speaking of buttons… @hdv https://www.abeautifulsite.net/posts/on-buttons-and-links/

@hdv Products Add to cart Products Add to cart

the right semantics: the right HTML element* in the DOM *or: the right role @hdv

Key questions for your design system Can it output the right semantics? Does it encourage the right semantics in docs? @hdv

meaning = use @hdv

“ (…) semantic HTML, a posh term for choosing the right HTML element for the content. This isn’t a philosophical exercise; it has directly observable practical bene ts. Bruce Lawson, “The practical value of semantic HTML” @hdv fi https://brucelawson.co.uk/2018/the-practical-value-of-semantic-html/

If you use <h1>, <h2>, <h3>…, people can: • see headings in • @hdv reader mode navigate by heading “Heading structures are tables of contents - https://hiddedevries.nl/en/blog/2018-09-01-heading-structures-are-tables-of-contents

@hdv “Heading structures are tables of contents - https://hiddedevries.nl/en/blog/2018-09-01-heading-structures-are-tables-of-contents

fi If you use <button>, people can: • nd it in the TAB order • press it with just a keyboard • submit the form, even if your JavaScript failed @hdv

If you use <ol>, <ul> or <dl>, people can: • Hear it’s a list and with how many items • Still see it’s a list in reader mode @hdv

If you use autocomplete on inputs, users can: • Tell their browser to ll in data for them • Assistive tech can announce input purpose • Use plugins for personalisation, e.g. with icons fi @hdv

If you use table with a caption, ths for headers and scope attributes for direction: • Assistive tech can provide useful affordances to end users @hdv

The HTML spec is the place to nd out how to use HTML developers.whatwg.org fi @hdv

HTMHell collects examples of how not to use HTML @hdv

Intentions vs reality @hdv

Sometimes, semantics are undone if you use speci c CSS fi @hdv

display overrides semantics display: block; display: inline; display: grid; display: ex; display: contents; display: none; @hdv fl “a11yTO Conf: CSS Display Properties versus HTML Semantics” - https://adrianroselli.com/2020/10/a11yto-conf-css-display-properties-versus-html-semantics.html

@hdv “a11yTO Conf: CSS Display Properties versus HTML Semantics” - https://adrianroselli.com/2020/10/a11yto-conf-css-display-properties-versus-html-semantics.html

Lists can lose list semantics when you set list-style-type: none (in Safari) @hdv “”Fixing” Lists ” by Scott O’Hara - https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

• courgette • feta • basil • garlic @hdv “”Fixing” Lists ” by Scott O’Hara - https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

@hdv “”Fixing” Lists ” by Scott O’Hara - https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

@hdv Apple’s James Craig on Twitter - https://twitter.com/cookiecrook/status/1084138985763426304

@hdv Apple’s James Craig on Twitter - https://twitter.com/cookiecrook/status/1084138985763426304

Sometimes, semantics are undone when you nest unexpectedly @hdv

Semantics in summary <details> <summary>Ingredients</summary> <ul> <li>courgette</li> <li>peas</li> <li>basil</li> <li>feta</li> </ul> </details> @hdv

Semantics in summary <details> <summary> <h2>Ingredients</h2> </summary> <ul> <li>courgette</li> <li>peas</li> <li>basil</li> <li>feta</li> </ul> </details> @hdv Content model: Phrasing content, optionally intermixed with heading content . Thanks to Daniel Montalvo | See also: https://html.spec.whatwg.org/dev/interactive-elements.html#commands

Heuristics in the platform and assistive technologies @hdv

When you set text-transform: uppercase, some assistive technologies will read it like an abbreviation “CSS Can In uence Screenreaders” - https://blog.benmyers.dev/css-can-in uence-screenreaders/ fl fl @hdv

“CSS Can In uence Screenreaders” - https://blog.benmyers.dev/css-can-in uence-screenreaders/ fl fl @hdv

::before / ::after is included in accessible name calculation “CSS Can In uence Screenreaders” - https://blog.benmyers.dev/css-can-in uence-screenreaders/ | Spec section: https://www.w3.org/TR/accname-1.1/#step2F.ii fl fl @hdv

::before / ::after is included in accessible name calculation <button>Buy product</button> Buy product “CSS Can In uence Screenreaders” - https://blog.benmyers.dev/css-can-in uence-screenreaders/ | Spec section: https://www.w3.org/TR/accname-1.1/#step2F.ii fl fl @hdv

::before / ::after is included in accessible name calculation <button>Buy product</button> button::before { content: “💸”; } “CSS Can In uence Screenreaders” - https://blog.benmyers.dev/css-can-in uence-screenreaders/ | Spec section: https://www.w3.org/TR/accname-1.1/#step2F.ii fl fl @hdv 💸 Buy product

::before / ::after is included in accessible name calculation “CSS Can In uence Screenreaders” - https://blog.benmyers.dev/css-can-in uence-screenreaders/ | Spec section: https://www.w3.org/TR/accname-1.1/#step2F.ii fl fl @hdv

The future @hdv

Our design systems commonly contain things that are not built into HTML @hdv

Sometimes, our design systems contain things that do exist, but not with our desired level of style-ability @hdv

“ We hope to make it unnecessary to reinvent built-in UI controls @hdv Open UI Homepage, https://open-ui.org https://open-ui.org

Goals of OpenUI Document component names as they exist today @hdv A common language for describing UIs and design systems Browser standards for web app components Open UI Charter, https://open-ui.org/charter

Goals of OpenUI Document component names as they exist today @hdv Open UI Charter, https://open-ui.org/charter

Semantic HTML has many bene ts, some unexpected fi Beware of how CSS, ARIA and AT can impact semantics

Thanks for listening! hidde@hiddedevries.nl hidde.blog Links on talks.hiddedevries.nl @hdv