top of page

WCAG 2.1 Accessibility Rating AA

A WCAG 2.1 summary checklist broken into the three ratings. To achieve a AA rating you must meet all of rating A's criteria first. To meet AAA rating you must meet all of rating A's and AA's criteria, plus the AAA's criteria.

Byte_Learning_Website_Graphics_01_Accessibility_WCAG21.png

Criteria

Summary

Explanation

Live videos have captions

This is a bit of a challenge to meet but some players now have closed captions automatically, like YouTube. There are some software you could look into that can help you with closed captions. Simply search for 'Caption Maker' to find a whole range of them. You could also look at hiring someone to quickly type whatever the person is saying. 

Users have access to audio description for video content

Give learners text and/or audio descriptions of videos as alternative content to access. 

Courses work in both landscape and portrait modes

Ensure you give learners the ability to view courses on tablets and mobile phones in both landscape and portrait view.

Programmatic input-field identification or auto-filling forms

Ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that accessibility tools some learners may use can explain this purpose to the learner a different way.

Contrast ratio between text and background is at least 4.5:1

Use a contrast ratio of 4.5:1 or higher for on-screen text so learners with low vision can read it. This may mean if you're working with brand colours, they may need to be re-arranged or re-coloured a little.

Text can be resized to 200% without loss of content or function

Ideally you'd have a function built within your course to double the text size and for it to not lose content or quality. If this is not possible, ensure the learner can zoom into your content and mobile devices can use pinch-to-zoom gestures.

Don’t use images of text

This is an easy one - simply don't include images like word clouds in your accessible courses. Accessibility tools simply can't read them. 

Don't need to scroll for content in two dimensions

This is a horrible user experience anyway but usually happens when embedding content into a platform, course or web page. Ensure your users don't need to scroll up and down AND left and right for the same content. 

Contrast ratio of 3:1 or higher for background elements

Use a contrast ratio of 3:1 or higher for images, buttons, icons and other background elements or colours so learners with low vision can see them.

If users override default text spacing it won't affect the content in a way that impedes their reading experience

In courses that are slide-based presentations, generally, text spacing won't affect slide content but may affect system menus. In web page based courses, you'll need to be sure that when users override the default text that it doesn't affect their reading experience.

All hover or focus content must be visible to all users when receiving and removing focus

When content receives focus and then focus is removed, you need to ensure the content is dismissable and users don't get stuck. You need to ensure it's hoverable in the first place and content remains visible as long as that content receives focus.

More than one way to access and locate content 

Course authors usually create next and back buttons, but it's also a good idea to create a menu and if possible, include a search field so users can search the contents of your course.

Use clear headings and labels

When building your course, ensure you use the heading styles and body font styles to help the system know what content is a heading and what is body. You also want to ensure that the focus order is in the correct sequence. 

Ensure keyboard focus is visible and clear

A rectangle usually highlights the object that currently has focus when learners use keyboard navigation. Ensure this is always visible.

Tell users when the language on a page changes

If using multiple languages in a course, ensure assistive technologies can determine which language so they can present content according to the presentation and pronunciation rules for that language.

Use menus consistently

When you build your navigation elements, create them in the same order and location on each slide.

Use icons and buttons consistently

When you use an object, content or interaction more than once in your course, identify it the same way each time.

Suggest fixes when users make errors

If an input error is detected and suggestions for correction are known, then the suggestions are provided to the user. For example, if learners answer questions incorrectly, give them feedback or further instructions so they know what's expected of them.

Reduce the risk of input errors for sensitive data

Ask learners to confirm their responses before submitting them. For example, when learners are required to enter text or make a selection from a list of options, have a pop up window to confirm that they've entered all information accurately.

Provide status messages where appropriate

When considering how assistive technologies and other users will use the course, ensure you make users aware of important changes in content that are not given focus, and to do so in a way that doesn't unnecessarily interrupt their work.

Subscribe to Byte Learning!

We will only ever send you something that's worth sending, like meaningful templates and resources. Not more junk mail.

 

Thanks for joining! You won't hear from us too often, but when you do, it'll be worth it.

  • linkedin social media link
  • youtube social media link
  • email link

© Byte Learning All Rights Reserved 

ABN: 48 803 013 607

Go Green, There Is No Planet B

bottom of page