Web Accessibility

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

    <label for="name">Name:</label>
    <input type="text" id="name">

Use the <fieldset> and <legend> elements to group together input fields that are related

        <legend>Personal info:</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">

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.


Complex images

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"/>


Decorative images

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:

  1. the <th> element
  2. 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%">
        <th scope="col">Firstname</th>
        <th scope="col">Lastname</th>
        <th scope="col">Age</th>

These can also be used together to help users understand that the table is in fact a reference grid, not just a simple table:

            <th scope="col">Name</th>
            <th scope="col">Age</th>
      <th scope="col">Birthday</th>
      <th scope="row">Jackie</th>
      <td>April 5</td>
      <th scope="row">Beth</th>
      <td>January 14</td>

The above code will render this reference grid:

Jackie5April 5
Beth8January 14

Non-mouse users

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=”form
  • 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.

HTML headings

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