Skip to main content

Your browser is out of date, and unable to use many of the features of this website

Please upgrade your browser.

Ignore

This website requires cookies. Your browser currently has cookies disabled.

Accessibility guidance

What you need to consider for accessibility when you create, design and develop various types of content.

Content

Content designers, writers and editors should consider whether:

  • the content easy to understand - see use plain English
  • the page titles unique and descriptive to help users find what they want and recognise that they are in the right place
  • the headings reflect the page structure - see headings
  • links or buttons make sense out of context
  • links or buttons clearly describe where they will take you
  • meaningful and informative images have ‘alt text’ to explain what’s in the image - see figures, charts and diagrams

Designers

What graphic and interaction designers need to do to make digital services accessible.

  • Define the page structure been defined (eg banner, navigation, search).
  • Add skip links to help keyboard users.
  • Add meaningful headings to help screen readers to navigate.
  • Ensure enough colour contrast to meet Level AA of the WCAG 2.1 guidelines.
  • Make the focus styles clearly visible.
  • Write descriptive links and form control names - see links.
  • Ensure all form fields have labels that tells the user what information they need to enter.
  • Ensure error messages clearly describe what went wrong and how to fix the problem.
  • Do not rely on colour or position alone to convey meaning. You may need to work things differently or include more than one visual clue (eg text and an icon as well as a colour).
  • Avoid text in images especially PNG, JPEG or GIF as they do not work well when users zoom in. Instead put text in HTML (styled with CSS) or use SVG (this does not apply to logos).
  • Ensure informative images have alternative text that explains what’s in the image.
  • Give decorative images a null text alternative in HTML <alt=””>
  • Ensure functional images, eg which trigger an action, have alternative text.
  • Ensure video and multimedia content is accessible - see video and multimedia.

Developers

What developers need to do to make digital services accessible.

Check keyboard accessibility

Keyboard accessibility is one of the most important parts of accessibility. Making sure HTML is used correctly for links, buttons and form controls is a good starting point.

How to test with a keyboard

Check that you can use:

  • tab to progress through links and controls
  • shift-tab to go back
  • enter to follow links
  • space to select form controls eg checkboxes
  • arrow keys for radio buttons or tabs

Set page titles

Good page titles help users find what they want and recognise that they are in the right place. It’s the link that shows in search results and the first thing a screen reader will read out when a user lands on a page.

Each page title must be unique and descriptive. Consider front loading the title with key words at the front.

Set language

Every page needs a small piece of markup to show what language the content (or part of the page) is in:

  • for English, in the html header include <html land=”en”>
  • for Welsh, in the html header include <html land=”cy”>

Custom components

Discuss any new components with the Online Services team as you will need to make sure that:

  • you have good evidence that this new component is the best way of meeting the user need
  • it will be accessible
  • you can test it from a technical and usability point of view
  • it can be maintained and updated

Text sizes and zoom function

Browsers can be set by some users to override the font-family and spacing for text and layout.

How to test sizing and zooming

  • Check what content/functionality you can see.
  • Size your browser window to 1280px wide.
  • Zoom into 400%.
  • Check you still see all the content and functionality
  • Check for missing and overlapping content, and that there is no horizontal scrolling.
  • Gradually zoom back to 100%, checking the text spacing at each stage.

Functional images

Some images are functional as they trigger an action.

Use alternative text for images like PNG or JPEG.

Video and multimedia

See video and multimedia

Forms

If you are creating a form, you should ask yourself:

  • does every form field have a label that tells the user what information they need to enter
  • do error messages clearly describe what went wrong and how to fix it
  • do the error messages show that they are clearly connected to each input field

See how to write good questions for forms

Product and delivery versions

Product and delivery managers should make sure that everyone in their team knows their responsibilities to make their services accessible.

Ask yourself:

  • how your project will affect people with access needs
  • how much work you will need to do to make it accessible
  • whether your team has the capacity and expertise to do it
  • how to factor in regular accessibility testing into your delivery schedule
  • whether an independent accessibility audit is required before you can deliver your project

Testing

What testers and quality assurers need to do to make digital services accessible.

Types of user testing

There are three types of accessibility testing:

  • testing with people
  • automated testing – used as part of your build process, this testing only checks some of what you need to test
  • manual testing with guidelines – more efficient for testing issues on individual pages or components

The type of testing needed will differ according to the product or service we provide.

The Online Services team will be able to advise you on the type of testing required.

Testing should be carried out to Level AA of the WCAG 2.1 guidelines.

Video and multimedia

If you are creating video and multimedia you should check whether:

  • the interface is accessible for keyboard and screen reader users (including play / pause buttons and the location slider)
  • the video and multimedia auto run - if so, it will need to be playable only when the user selects play 
  • captions have been added and can they be toggled on and off from the interface
  • the user can still understand it if they cannot see or hear it, eg is there a transcript available?