Correcting accessibility issues in Sitekit

From January 2021 to June 2021 the NIHR is undertaking a review of the NIHR website to address issues flagged in an audit by the Shaw Trust.

The details of this audit are available in our Accessibility Statement.

Many of the issues are being addressed by the development team, but Coordinating Centre comms teams are asked to address the below content issues on their pages and documents.

Contents

WAVE Evaluation Tool

Headings

Links

Images

Tables

Video

Non-HTML Documents

Wave Evaluation Tool

The free WAVE Evaluation Tool Chrome extension will help identify some accessibility problems on the pages you have to check.

Benefits

WAVE identifies:

  • Errors with headings e.g. skipped levels, empty headings
  • Link errors
  • Some common non-descriptive links e.g. ‘Read more’, ‘Click here’, ‘Summary’ etc.
  • Duplicate adjacent links i.e. an image and link that point to the same destination
  • Missing image alt text
  • Tables with formatting problems
  • Contrast errors for text
  • Empty table header cells, but not rows
  • Videos on a page
  • Links to non-HTML documents e.g. PDF, Word, Excel

WAVE will NOT identify problems with:

  • Video missing closed captions
  • Some tables missing headers
  • Accessibility problems with non-HTML documents
  • Most non-descriptive links

Headings

To ensure that the page will make sense and be accessible to keyboard users and people using assistive technology, it is important to ensure that pages and documents have a clear and logical heading structure.

Skipped heading levels

  • The page title is always h1, so within the page or document itself, the first heading should always be h2.
  • If you move to using a further heading level, it should always move consecutively through h3 etc, and not skip to h4.

Here is an example of a skipped heading level:

 

How to correct skipped headings

  1. Run Wave to identify any accessibility issues on the page
  2. Wave will alert or warn you there’s a skipped header as shown in the image earlier
  3. Enter edit mode in SiteKit
  4. Select the text, and choose the correct heading level from the dropdown in Sitekit as shown below
  5. Save and publish your changes

 

 

The same page after correction:

 

 

What's a ‘Tabindex’ alert?

Don’t worry about this, it is an issue with the page type which our development team are fixing.

Missing headings or incorrect heading formatting

  • Ensure that all the content which should be headings use the heading tag, instead of formatting such as bold or underlined.
  • Remember that many keyboard and low vision users navigate a page using the headings, so if a section isn’t tagged correctly as a heading, it may not be visible to these users.

Example of incorrectly formatted headings:

 

How to correct incorrectly formatted headings

  1. Run Wave to identify any accessibility issues on the page.
  2. Wave will NOT alert or warn you a header is incorrectly formatted. You will have to use your judgement.
  3. Enter edit mode in SiteKit.
  4. Select the text, and choose the correct heading level from the dropdown in Sitekit. You should also make sure that bold, italics or underline formatting are not selected.
  5. You can also use the Clear formatting button
  6. Save and publish your changes
  7. After correction, the headings should be highlighted in WAVE as being heading text, and the underline alert should no longer show.

Links

Descriptive links

Links should describe their destination accurately and when read out of context.

Links that will not make sense to keyboard users and people using technology to tab through include:

  • Direction links e.g. ‘click here’.
  • Links that refer back to earlier text, e.g. ‘our guidance about this’.
  • ‘Read more’

Some of the common mistakes may be highlighted by WAVE, but others may not be, so you will need to read through carefully.

 

Others may not be highlighted by WAVE, but will still need to have words added to the link text to make it more descriptive, or to differentiate it from similar links on the same page.

 

  • Edit link text using the insert/edit link tool.

 

  • Ensure that the new link text makes sense in the sentence, particularly if changing wording

 

Broken or redundant links

WAVE may also highlight broken links or links very close to each other which go to the same url - you should fix these by removing links from the text or linking to the correct page.

 

Check link formatting

  • Look out for links that do not use the standard formatting of bright blue and underlined.
  • If links are not distinguishable using both colour and formatting, they may not be visible to low-vision users.
  • The standard formatting for links uses a colour contrast that is visible to a range of users.
  • Other colours may not have the right colour contrast to be visible.
  • Links in superscript text are not visible to keyboard users, so where you have footnotes using this formatting, work the footnote into the text

You can fix links like this using the clear formatting button.

 

  • If there is additional formatting used in links, it may well be the case that there is incorrect formatting applied to other text around it - in this example the font Arial is used instead of Lato.
  • You may well need to use the ‘clear formatting’ tool on the entire page or document.
  • Note that underlined text may look like a link, and text with colours applied to it may not meet the colour contrast requirements for low-vision users.
  • If using formatting for emphasis, underlining and text colour is to be avoided for these reasons. Use bold text instead.

Images

Do images need alt text?

Non-decorative images convey information in visual form that contributes to the content e.g.:

  • logos
  • profile images of people
  • charts
  • diagrams
  • infographics
  • maps
  • images containing text - not recommended
  • images used as links

How long should alt text be?

  • Alt text should be no longer than 125 characters long, including spaces.
  • Your alt text should not be the same as the image file name.

How do I add alt text in SiteKit?

 

  1. Find the image in the Assets tree
  2. Double click to open the image
  3. Click on the Properties tab
  4. Write/paste in your alt text in the the Caption (Alt) field
  5. Publish your image

Do decorative images (icons, banner (hero) etc.) have the " " null value?

Decorative images, like the ones shown above, serve no specific purpose other than decoration, which will be most of the images used on most websites, e.g.:

  • Any generic photographic images e.g. banner images
  • Icons
  • Background patterns

They should have the null value so screen readers can skip over them. In SiteKit, the Caption (Alt) field should be left blank:

 

Tables

Ideally a table should be:

  • Less than 6 columns wide
  • Less than 12 rows long

A table larger outside of those criteria is complex and will create a poor user experience (UX) for the reader/user. Users scan content online, so presenting it in a simpler format is best.

Complex tables

Complex tables have:

  • Are hard to navigate - a user shouldn't have to scroll several times to find information
  • Contain more text than numerical data
  • Non-standard formatting - different colours used for text, shaded backgrounds, merged cells etc.

If you come across a complex table with the criteria above, and are unable to simplify the table (e.g. creating multiple tables, combining data, creating a graph or chart etc.), contact netsweb@nihr.ac.uk to ask for an exception for your data to be uploaded as an accessible Excel document.

Best practices to avoid accessibility problems

  • Always create tables with one row of header cells - missing header cells, or multiple rows of header cells will cause accessibility problems.
  • Use tables to display data, not long blocks of text e.g. don’t include paragraphs of text in a cell. A name, email address, title are fine to include in a cell.
  • Do not use merged cells - these make a person using a keyboard to navigate the table more difficult, and a screen reader to navigate the table.
  • Don't create empty cells with no data or text
  • Cells with colours that clash with the default text - this will cause accessibility contrast issues. Stick to the default styling to avoid this, alternatively use bold or italics to emphasise styling instead.

Is the table needed?

  • Can the data be displayed as a list instead?
  • Should the data be displayed as a quote?
  • Can the table be split into several for clarity?

See also guidance on adding a table in Sitekit.

Does the table have an empty header?

 

  1. Run WAVE to identify any accessibility issues on the page
  2. WAVE will alert or warn you there’s an empty table header
  3. Enter edit mode in SiteKit
  4. Select the cells you want to to become a header
  5. Select the cells you want to become headers
  6. Right click the selected cells
  7. Select Cell
  8. Select Cell Properties
  9. Click in the Cell Type field
  10. Select Header cell
  11. Click Ok, Save and Publish the page
  12. Check the page with WAVE to confirm your change

Is the table being used correctly?

A table used instead of a quote

 

WAVE will identify colour contrast issues in tables, as shown above, but did not pick up there’s a missing table header.

In this case the table format has been used in place of the Quote styling in SiteKit.

Correction steps
  1. Enter Edit mode in SiteKit
  2. Copy the content (text) in the table a paste it into Notepad
  3. Right click and delete the table in SiteKit
  4. Select the block quote format
  5. Paste in your quote
  6. Save and Publish your change
  7. Confirm your change has taken effect:

A table that should be simplified

 

Problems with the table
  • Merged cells
  • Multiple table headers
  • The content in area A should not feature in the table - a heading tag and text would be better
  • The content in the last two row is better displayed in two columns and multiple rows
The solution

 

If you come across a similar table, you will need to create a new table, or edit the existing table as shown above.

Is the table missing a header row?

  • WAVE will identify a table exists, as shown above, but may not always alert you it's missing a header row.
  • Table headers are usually styled with a navy blue background as shown below:


How to add a header row in SiteKit

  1. Run Wave to identify any accessibility issues on the page
  2. Wave will alert or warn you there’s an empty table header
  3. Enter edit mode in SiteKit
  4. Select the cells you want to to become a header
  5. Right click the selected cells
  6. Select Cell
  7. Select Cell Properties
  8. Click in the Cell Type field
  9. Select Header cell
  10. Click Ok, Save and Publish
  11. Check the page with Wave to confirm your change

 

Video

Requirements for accessible videos

Any videos embedded in a web page should have:

  • Accurate closed captions included in the videos. These closed captions should be in sync with what the speaker(s) are saying, and
  • A text alternative (transcript or description) for all audio and visual content explaining what the video content is about e.g.:
  • Names and titles of speakers;
  • What a speaker or narrator is saying;
  • Content in a diagram, chart etc. shown in the video;
  • Descriptions of settings or text that is on screen but not spoken e.g. bullet points in a presentation.

Including both transcripts and closed captions is fine, as they help users with screen readers understand the content. Videos missing closed captions or transcripts are inaccessible.

What’s the difference between closed captions and subtitles?

According to the Web Accessibility Initiative, “subtitles provide text of only the dialogue and do not include important sounds”. Subtitles don’t include the description of what a speaker might be doing in a video, or the content of a presentation featured in a video.

How to check for the problems

Wave does not pick up accessibility problems with embedded videos. You will have to manually check for problems.

How to check if a video has closed captions

A video missing closed captions will not have caption shown below, which is shown when you hover over the embedded YouTube video:

 

If the video is missing closed captions, the icon will not display.

Fixing Inaccurate captions

  • Check for inaccurate captions by hovering over the video and clicking on the icon shown above
  • Watch the entire video and check:
  • The captions are accurate - look out for typos and strange words that don’t match the dialogue.
  • The closed captions are in sync with what the speaker is saying, and/or the

 

The image above is an example of inaccurate closed captions, the caption should say “...change she did say there’s a secondment coming...”


Missing closed captions

Common examples include:

  • An interview or other video with multiple people speaking
  • Animated slides/presentations with no narrator 
NIHR created videos that contain slides/presentations
  • All videos of this type require closed captions.
  • If the video has been created by NIHR uploaded to Youtube, you will need to create closed captions in YouTube Studio.
  • If you don’t have access to the NIHR YouTube channel, ask a colleague that manages social media, to help.

Resources

How screen readers work with different types of videos 

NIHR created videos
  • If the video has been created by NIHR uploaded to Youtube, you will need to create closed captions in YouTube Studio.
  • If you don’t have access to the NIHR YouTube channel, ask a colleague that manages social media, to help.
Other videos
  • Ask the creator of the video to update the video with closed captions, or
  • Transcribe the video description and place it under the video

Useful articles and blogs

Non-HTML documents 

Non-HTML documents (Excel, Word and pdf) are generally not recommended for uploading to accessible websites.

Common problems that make non-HTML documents inaccessible

  • Missing alt text for figures and images of text
  • The alt text used is the same as the image file name
  • Incorrect headings structure
  • Incorrect table headers aren’t clearly defined for a screen reader
  • Contrast in tables or diagrams doesn’t fulfil the Web Accessibility guidelines

Tips

  • Use the accessibility features in the software you’re creating in or third-party software to check the structure of the document, images etc.

How to check if Excel and Word documents are accessible

Excel and word both have an Accessibility Checker feature that helps check errors with:

  • Heading structure
  • Contrast
  • Alt text
  • Table structure

Finding the Accessibility Checker feature

  1. File
  2. Info
  3. Check for Issues
  4. Accessibility Checker

 

Useful videos

Exceptions

  1. If the document you find is too complex to create as an HTML document send an email to netsweb@nihr.ac.uk with a copy of the document that needs to be added the non-HTML documents log.
  2. Confirm your document has been added to the nihr.ac.uk Accessibility statement.