HyperText Markup Language (HTML) semantics
If you're developing a website using HyperText Markup Language (HTML) you should use HTML semantics, or accessibility semantics, to help those using assistive technologies. This is the term used to describe the accessibility information about an element's role, name and state in the HTML code.
Semantic code is used to convey structure and meaning to people who use assistive technologies such as screen readers and speech recognition.
A screen reader is a software application that announces what is on the screen to people who cannot see or understand visual content. Speech recognition software listens to human speech, transcribes it into text and executes spoken commands that operate your computer or device.
Role
An element's role describes its purpose. The roles, names and states of elements are discoverable using the platform accessibility API (link). They're used by assistive technologies such as screen readers and speech recognition software.
Roles are announced by screen readers and are used to indicate the type of element something is. Many HTML elements have a default role, also known as the implicit role.
For example, the implicit role of the <a> element is 'link'. A screen reader will announce '…link', and a speech recognition user can say 'Click… link' to interact with it.
Example code for a link in HTML that uses the <a> element:
<a href='https://www.gov.scot/'>Scottish Government</a>
The implicit role of the <button> element is 'button'. A screen reader will announce '…button', and a speech recognition user can say 'Click… button' to interact with it.
Example code for a button role in HTML that uses the <button> element:
<button>Submit</button>
Name
An element's name, or accessible name, is how it's identified. An element's name is announced by screen readers and used by speech recognition software to indicate exactly which element to target with a voice command.
All interactive elements and components must have an accessible name. For instance, the accessible name for a link comes from the content inside the anchor element. In the following example, a screen reader will announce 'Scottish Government link' and a speech recognition user can say 'Click Scottish Government link'.
Example code for a link in HTML using the text 'Scottish Government':
<a href='https://www.gov.scot/'>Scottish Government</a>
The accessible name for a button comes from the content inside the <button> element. In the following example, a screen reader will announce 'Submit button', and a speech recognition user can say 'Click submit button'.
Example code for a button role in HTML using the label 'Submit':
<button>Submit</button>
State
An element's state is its current condition, which is announced by screen readers. Users therefore know if, for example, a checkbox is selected or unselected, a button is pressed or not pressed, or a menu is open or closed.
In this example, a screen reader will announce 'I accept the terms and conditions, checkbox checked':
<label='checkboxLabel'>
<input type='checkbox' id='checkboxLabel' checked>
I accept the terms and conditions</label>
Structure
You can use HTML to give content structure. This is done by defining things like paragraphs, lists, data tables and headings. Writing semantic code means choosing the most appropriate element to define the required structure.
For example, HTML headings are defined with the <h1> to <h6> elements. A screen reader will announce 'heading level one' for an <h1> and 'heading level two' for <h2>.
Example code of page content that uses the <h1> and <h2> elements:
<h1>Scottish Government</h1>
<p> The Scottish Government is the devolved government for Scotland and has a range of responsibilities that include:</p>
<ul>
<li>the economy</li>
<li>education</li>
<li>health</li>
</ul>
<h2>About us</h2>
…
Information about a list will come from the <ul> (unordered list) or <ol> (ordered list) elements and <li> (list item). A screen reader will announce 'List of 3 items' (or similar) for a list with 3 items. It will also announce where in the list the item is, for example '1 of 3'.
Example code for an unordered list in HTML using the <ul> and <li> elements:
<h1>Scottish Government</h1>
<p> The Scottish Government is the devolved government for Scotland and has a range of responsibilities that include:</p>
<ul>
<li>the economy</li>
<li>education</li>
<li>health</li>
</ul>
<h2>About us</h2>
…
Tips
Follow these tips to improve user experience:
- use HTML elements in the way they're natively intended
- always use semantic HTML over Accessible Rich Internet Applications (ARIA) when it's available
There is a problem
Thanks for your feedback