Accessibility

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?

Forms

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:

css-form-design-alternative-style-02

Images

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

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%">
    <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:

NameAgeBirthday
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.

ARIA

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.

Colour

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.

Links

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