Browsers parse HTML into the DOM for visual display and simultaneously create an accessibility tree to convey semantic information to assistive technologies.
Semantic HTML elements can be categorized as good (meaningful and accessible), bad (non-semantic like divs), or ugly (semantic but with accessibility caveats).
A section element is ignored by the accessibility tree unless it is given an accessible name via an `aria-label` or `aria-labelledby`, which promotes it to a landmark region.
The header and footer elements are only exposed as landmarks to assistive technologies when they are direct children of the body element.
Anchor tags should be used for navigation to a new page or location, while buttons should be used to perform an on-page action to meet user expectations.
Semantic tags for emphasis or importance like `<em>`, `<strong>`, `<b>`, and `<i>` are not audibly announced by screen readers, requiring alternative methods to convey meaning.
The `<del>` and `<ins>` elements, often used for pricing, have improving but still unreliable support across screen readers and browsers, which can lead to confusion.
Elements like `<hr>`, `<br>`, and `<abbr>` can create disruptive experiences or have unreliable support, demonstrating that browser compatibility does not equal screen reader compatibility.
The key takeaway is to use HTML elements for their intended semantic purpose, such as using buttons for actions instead of making divs clickable.
24:30Emma Dawson
31:38Anuradha Kumari
27:16Tanja Ulianova
29:59Konstantin Tieber
1:10:08Emma Dawson
30:07Julia Undeutsch
55:32Hidde de Vries
35:39Chris Heilmann & Daniel Cranney
Jobs that call for the skills explored in this talk.
Speech Processing Solutions
Vienna, Austria
Bite Client
Atlanta, United States of America
infomax websolutions GmbH
Grassau, Germany
JO Media Software Solutions GmBh
Brunn am Gebirge, Austria
tarent solutions GmbH
tarent solutions GmbH