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 screenreader, 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 screenreader, 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:
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 screenreader 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.
|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. But, PDFs can be unpredictable depending on how they’ve been tagged for accessibility.
Wherever possible, statistical documents should be produced using HTML. This will make them much more accessible for users who rely on assistive technology.
If HTML is absolutely not possible, make sure the additional work is done to make sure the alternative documents are tagged correctly or available in a range of different formats.
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.