Three things to look out for:
- Code should be well organised and use the appropriate html elements
- Ensure test alternatives exist for visual content
- Provide keyboard navigation
For screen readers and keyboard navigation, you must group content appropriately
- Only one
<h1>element per page, this is the main subject of your content - Headings with equal (or higher) rank start new sections, headings with lower rank start subsections.
- Use hierarchically. For example, going from
<h2>to<h4>will confuse screen readers. Go from<h2>to<h3>if you need to drop a size.
- The
<main>element is used to point to the main content in your page. - There should only be one per page
- has an embedded landmark feature for assistive technology
- The
<header>element is used to wrap introductory information or navigation links for its parent tag - shares the embedded landmark feature with
<main>, allowing assistive technologies to quickly navigate to that content
- The
<nav>tag is meant to wrap around the main navigation links in your page - Has embedded landmark feature for easy screen reader navigation
- If there are repeated site links at the bottom of the page, use
<footer>
- The
<footer>tag is meant to wrap around content and links at the bottom of a page - Also as embedded landmark feature for easy screen reader navigation
<div>- groups content<section>- groups related content<article>- groups independent, self-contained content
<img> elements should always use an alt attribute. If the image has text in the describing it, use an empty string: alt=""
- element gives semantic meaning when it wraps a sound or an audio stream
- Needs a text alternative to be accessible to people who are deaf. This can be done with nearby text on the page or a link to a transcript
- Also available is the
controlsattribute, the browser default control buttons, which supports keyboard functionality
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
</audio>
- The
<figure>element along with the related<figcaption>can be used to wrap a visual element on the page (like an image, diagram, or chart) <figure>semantically groups content related to the visual element<figcaption>provides a text alternative that explains the figure
<figure>
<!-- Chart goes here -->
<figcaption>Information about the chart</figcaption>
</figure>
- The
<label>tag wraps the text for a specific form control item, usually the name of the form field or the label for a choice - The
forattribute on a label tag explicitly ties the label with the form control and is used by screen readers - This is done by mapping to the
idattribute of the form control (see below) - Using
formakes the label clickable in radiobuttons
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
- Radio buttons often come in a group where the user has to make a single choice. Group them semantically by wrapping them in a
<fieldset>element - Use the
<legend>tag to provide a description for the choices - These tags are not necessary when the choice is simple (e.g. male / female)
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
<label for="dateinput">Enter a date:</label>
<input type="date" id="dateinput" name="datepicker">
N.B. when writing dates you should use the <time> element, along with the datetime attribute provided with a date format, so that screen readers can access the value:
<time datetime="2018-09-15">Thursday, September 15<sup>th</sup></time>
You can makean element only visible to a screen reader by using custom CSS - make it small and absolutely position it off screen. Here's an example of the CSS rules that accomplish this:
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
Notes:
display: none;orvisibility: hidden;hides content for everyone, including screen readers- Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it
- Use high contrast between text and background colour
- Avoid colour combinations and contrasts that will be a problem for those with colour blindness
- Give links meaning by using brief but descriptive text within the a tags to provide more meaning
- Avoid using things like
Click Here, be more descriptive about the location - Use the
accesskeyattribute to specify a shortcut key to open the link for keyboard users - This works with links, buttons, and form controls, e.g.
<button accesskey="b">Important Button</button>
- If you want to be able to focus on an element using the keyboard, use the
tabindexattribute - Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup.
- This same functionality can be given to other elements by placing a
tabindex="0"attribute on them e.g.
<div tabindex="0">I need keyboard focus!</div>
- A negative tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated)
- Setting a
tabindex="1"will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default andtabindex="0"items, e.g.
<div tabindex="1">I get keyboard focus, and I get it first!</div>
<div tabindex="2">I get keyboard focus, and I get it second!</div>
Consider the following table with ambiguous data:
| Last Name | First Name | City |
|---|---|---|
| Phoenix | Paul | York |
| Jackson | John | Cork |
In this example, the data (Last Name, First Name, and City) can’t be distinguished from one another without knowing which header each corresponds to. The scope attribute with the value col defines the direction of the header cells and associates them with the corresponding data cells. The scope attribute is also needed for larger tables with one header row or column.
Here is how it is marked up:
<table>
<caption>Teddy bear collectors:</caption>
<tr>
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">City</th>
</tr>
<tr>
<td>Phoenix</td>
<td>Paul</td>
<td>York</td>
</tr>
<tr>
<td>Jackson</td>
<td>John</td>
<td>Cork</td>
</tr>
</table>
- A
<caption>element works like a heading for a table. This help users to find a table, understand what it’s about and decide if they want to read it - A summary conveys information about the organization of the data in a table and helps users navigate it. For example, if a table has an unusual structure (as in the examples below), information about what content can be found in which row or column can be provided to the user. A summary is usually only needed for complex tables
There are two ways to mark up a summary:
- Nest the summary inside the element
<caption>This is the Caption<br>
<span>This is the summary</span>
</caption>
Wrapping the summary in a span element allows us to select the text for alternative styling to the caption, but this is not necessary
- Using
aria-describedby
In this approach, an element with an id attribute is associated with a summary by using the aria-describedby attribute of the table. Any element with a unique id can be used as a summary for a table in this way.
<p id="tblDesc">This is also a summary</p>
<table aria-describedby="tblDesc">
<!-- table data -->
</table>