Digital Performance Analyst

As a Digital Performance Analyst, most of your considerations will be around presenting statistical data so that they don’t exclude anybody that might not be able to perceive complex charts or tables of data.

Things to consider as a Digital Performance Analyst

Do not merge table cells

When using HTML tables and spreadsheets, it can be tempting to merge cells together to make the table appear less cluttered.

However, when navigating tables using assistive technology it can be disorientating when there is suddenly less columns than you previously expected.

For people who are visually impaired and using a screen reader, it can be disorientating when you try to skip to rows or columns which you expect to exist and they don’t. For example, if there are 4 columns in rows 1 and 2, you’d expect there to be 4 columns in row 3. But if they had been merged and there was now only 1 column, it would be very confusing to understand why if you can’t see the table visually.

Do not rely on sensory characteristics

Using sensory characteristics means you have structured your content in a way that means people are entirely reliant on a particular part of their body functioning correctly in order to perceive it. This is not ok.

For example, if you say ‘use the menu on the right’, you are assuming the user will always be looking at the page to be able to understand left from right.

When we look at a page and see it visually, we usually have access to 2 dimensions. X and Y. It means we can understand relative positions such as Left, right, up and down. But, if you’re blind and using a screen reader, the page is 1 dimensional. It’s linear. The content is just ordered first to last, so you have no way of being able to perceive left or right from your current position.

Always consider whether the content you are creating is reliant upon on shape, colour, size, visual location, orientation or sound. There should always be several ways to perceive the same information.

Examples of relying on sensory characteristics:

  • Figure 14 shows us that…
  • the triangles on the chart represent…
  • as you can see from the red line on the graph…
  • if you compare the horizontal bars to the vertical ones…
  • the largest segment of the pie chart shows…
  • if you look at the chart on the left you will see…
  • when you hear the alarm it means new data is available…
  • the clock icon represents time elapsed…

Logical reading order

The reading order of the document should be top to bottom. It should be linear. There shouldn’t be any need to have to navigate forwards or backwards to understand the section you’re currently reading.

For statistical data, this usually means keeping all of the content together when discussing particular parts of the data set. Often, analysis will refer back to a particular graph or chart such as ‘Figure 4’, this means you need to keep skipping back and forwards through the document. For any user this can be tricky, but if you’re using assistive technology it can very quickly become disorientating.

You should always summarise charts and graphs, and if you need to refer back to them then it is more accessible just to provide the summary again. For example:

...if we refer back to the example in section 2 which shows that 45% of people over State Pension age have a disability...

Summarise charts and graphs

Charts and graphs can be difficult for everybody, especially if they’re unusual or complex. They are a particular challenge for people with visual or cognitive impairments.

If you are displaying a chart or a graph, then you must provide a high level summary so that if people can’t read it they can still understand what it shows.

You should put summaries in the body of the page. Often people assume that putting the summary in the alt attribute of the chart is a good approach. Although this would provide an overview for screen reader users, it isn’t just people with visual impairments who will benefit from the summary. So it should be on the page and available to all users.

Along with a summary, you should also link to the source or the data which was used to generate the chart. This is good for transparency, but it also means that for people who can’t perceive or understand the chart they still have access to the raw data.

Use appropriate table headings

If a row or a column needs to be identified for the data to make sense, then you must use appropriate headings.

For example, the following table is to show the number of different beverages several people consume each day, so it needs both column and row headings.

Daily beverage consumption
Person Cold drink Hot drink
Chris 5 cups 0 cups
Paul 2 cups 4 cups
Sarah 0 cups 5 cups

The HTML structure for the table is as follows:

<table>
  <caption>Daily beverage consumption</caption>
  <thead>
    <tr>
      <th>Person</th>
      <th>Cold drink</th>
      <th>Hot drink</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Chris</th>
      <td>5 cups</td>
      <td>0 cups</td>
    </tr>
    <tr>
      <th>Paul</th>
      <td>2 cups</td>
      <td>4 cups</td>
    </tr>
    <tr>
      <th>Sarah</th>
      <td>0 cups</td>
      <td>5 cups</td>
    </tr>
  </tbody>
</table>

Use HTML wherever possible

Statistical documents have historically been in downloadable formats such as PDF. You shouldn’t publish PDFs as they are rarely accessible.

Statistical documents should be produced using HTML. This will make them much more accessible for users who rely on assistive technology.

If your document does not meet the standards, you could be breaking the law. Always follow the GOV.UK guidance for Publishing Accessible Documents.

Use sufficient colour contrast

When using colour, for non-text elements a contrast ratio of 3:1 must be maintained between each element and any adjacent colours. This might just mean the bar on a chart needs to have sufficient contrast from the background colour. But for something like a pie chart, it would mean each segment would also have to have sufficient contrast from any adjacent slices.

This can get particularly tricky with complex charts so you might need to use more than just colour to be able to tell things apart. One way to do this is to use textures or patterns. Another way might be to use thick black borders to create a high contrast boundary between segments.

For text, the contrast ratio is higher unless the text is considered to be large. A ratio of 4.5:1 is required for normal sized text and 3:1 for large text.

Large text is defined as anything over 18pt, or bold text which is larger than 14pt. Normal text is defined as anything under 18pt and is not bold.

You can use the WebAim Colour Contrast Checker to make sure your colour choices are accessible.