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, use: lang=”en”
- for Welsh, use: lang=”cy”
Custom components
Discuss any new components with the Digital and Content 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
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
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?