HTML markup is not a direct conversion to a graphical user interface but rather a representation of virtual objects and their state.
The semantic nature of HTML allows a single element to
have multiple meanings for different applications.
attributes are most relevant to screen readers, while
are most relevant to digital assistants and search engines.
You could imagine your markup as a topology with multiple layers
How do people with disabilities use the internet? Most blind people don't use a mouse. Instead, they use a keyboard to operate a screen reader. People who are deaf-blind might use a screen reader with a refreshable Braille display. Still others, sometimes with mobility-related disabilities, use neither a mouse nor a keyboard and instead use their voice to issue commands to speech recognition software.
These alternative ways of navigating the web rely on properly marked up HTML code.
You will want learn how to turn off a screen reader before turning it on for the first time. It will enter a completely different mode than you are used to. On iPhone, you can assign a triple click of the side button (or home button) to trigger VoiceOver on and off.
After turning on the screen reader, you can swipe or use keyboard arrows to focus elements. The screen reader will announce the type of element, and also any relevant state properties, such as being disabled. Some of these state properties are defined by ARIA attributes, which can be added to and removed from elements in order to indicate state changes and relationships to other elements.
When using a screen reader, properly marked up elements can be acted upon in unique ways. For instance, marking up all headings using heading elements (h1-h6) will make them available when navigating the heading outline.
Accessibility features can be hidden gems for power users.
On my iPad Pro, when I connect my keyboard, I turn on the system's screen reader, VoiceOver, but set it to mute. This enables full keyboard access so I don't always have to use the large touch interface.
Additionally, most operating systems now offer dark mode, which can be detected by web pages. It is considered a UI preference, but it can also reduce eye strain for certain people in certain lighting conditions.
We should also consider the ability for external sites and services to gather information from the page for indexing and repurposing.
Audio-enabled digital assistants, for instance, often parse web pages' structured data and document outlines to find information. The relevant data is packaged into an experience that is native to that service's voice UI.
To account for the wide range of ways HTML code can be utilized, always adhere to the HTML specification.
Some kind of automation should typically be in place in order to keep code simple and bug-free.
Creating a library of reusable, spec-compliant web components is the best way to build an accessible, interoperable web site.
The markup for this page is generated by Nuxt. The repeated areas are templated into Vue components, with a simple system for handling events and logic.