Things to keep in mind
- Has the HTML been validated to help catch simple errors?
- Has each page been tested with a keyboard and screen reader?
- Has an accessibility checker been used to provide an overview of the pages accessibility?
- Has the site been tested by users who use assistive technologies?
- Is the content still viewable if the user has increased the font size?
- When a video or audio file is used, are subtitles/CC/a transcript made readily available?
- How does the site load on a limited bandwidth connection?
- Is colour used to portray a message? If so, is there a backup?
Make sure the <label> element is used to show links between key text and input areas
<form> <label for="name">Name:</label> <input type="text" id="name"> </form>
Use the <fieldset> and <legend> elements to group together input fields that are related
<form> <fieldset> <legend>Personal info:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
For bonus points, use the design to help users unserstand what information is grouped together. For example:
Simple, informative images
All image must have an alt attribute, if they are relevant in aiding the user understand the content on the page.
If the image is of a graph or useful data, the image requires an introductory title, an “alt” attribute and also a “longdesc” attribute. The “longdesc” will contain an ID of a container with a full description of the image, or a link to a page with a full description of the image.
<img src="img/a-great-big-graph.png" alt="a dataset represented as a pie chart and Venn diagram" longdesc="#BigGraphDescription"/>
If the image is purely decorative and does not help the user gain context for the information on a page, the “alt” attribute will need to be left blank to minimise the risk of confusing the user.
<img src="img/a-pretty-image.png" alt=""/>
Tables should not be used to add structure to a page. Tables should only be used to display tabular data. A good use example of this would be the need to display data from an excel spreadsheet. A bad example of this would be using tables to structure a form, or to add a sidebar to the main content on a page.
The two things that need to be used in tables are:
- the <th> element
- the “scope” attribute with the value of “row” or “column“
The <th> will signify, to a screen reader or assistive technology, that this is in fact describing the data in a row. The “scope” attribute will help assistive technologies understand which way to read the data, so context is not lost.
<table style="width:100%"> <tr> <th scope="col">Firstname</th> <th scope="col">Lastname</th> <th scope="col">Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
These can also be used together to help users understand that the table is in fact a reference grid, not just a simple table:
<table> <tbody> <tr> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Birthday</th> </tr> <tr> <th scope="row">Jackie</th> <td>5</td> <td>April 5</td> </tr> <tr> <th scope="row">Beth</th> <td>8</td> <td>January 14</td> </tr> </tbody> </table>
The above code will render this reference grid:
There are a plethora of users that will not be using a mouse, but instead one of many assistive technologies. With this in mind, it is important to make sure that the user can effectively navigate the page, without the use of a mouse.
The key things to remember here are the CSS pseudo classes. Each link must have a highly contrasting “:focus“, “:hover” and “:active” (for IE9 users) pseudo class. This will help the user to clearly see what link they are currently on.
There are 8 ARIA landmarks roles, that the keyboard can quick-jump to:
- role=”banner” (the prime heading or internal title of a page)
- role=”navigation” (e.g., a menu)
- role=”main” (the main content of the page)
- role=”complementary” (e.g., a sidebar)
- role=”contentinfo” (meta data about the page, e.g., a copyright statement)
- role=”search” (the Search tool of a doc)
- role=”application” (a web application with its own keyboard interface)
If an assistive technology is being used, these act as quicklinks on a page and can help the user navigate, at times, much more effectively than a user using just a screen and a mouse.
Note: If an ARIA role is used more than once on a page, the ‘aria-label’ attribute should be used to define it further.
Avoid using colour to communicate a message as colours are perceived differently to a wide variety of people. for example, making a link a different colour will not be useful to a colour blind user, so make sure there is an additional visual prompt (underlining links for example). To aid users further, make sure the colour contrast is at least a WCAG AA standard.
Use strong heading to provide users with a clear outline of a page. Users with assistive tecnologies often have shortcuts to jump between the heading on a page to help gain context quicker and also find the right content. For example, a lot of screen readers use the ‘H’ key to jump between heading.
All links need to have a meaningful “title” attribute that gives the user a good idea of where it will be going, rather than reading out the link in full