What is AA WCAG 2.2 Accessibility Standard?

UX & Design — 2 Aug, 2023

The Web Content Accessibility Guidelines (WCAG) aim to set out a common definition of what makes a website accessible. It lays out the elements required to make a website accessible, giving them a rating of A, AA, or AAA. Level A is the most basic level that sets out what developers must do in order for content to be accessible. Level AA lays out what developers should do to make content accessible, otherwise some users my struggle. The top tier AAA suggests what developers may do in order to make it easier for groups to access web content.

Why is website accessibility important?

Inclusivity: The principle of the internet is universal access. Excluding individuals due to disabilities is unfair and puts them at a disadvantage.
Legal compliance: Many nations, including the UK, have mandated web accessibility for public platforms. Non-compliance could lead to legal consequences.
Broader audience reach: Accessibility extends your user base. Intuitive navigation benefits all users.
Improved SEO: Accessible websites often rank better on search engines. Structured content with meaningful alternative texts gets favoured in search engine results.

What are the Web Content Accessibility Guidelines (WCAG)?

The Web Content Accessibility Guidelines (WCAG) aim to set out a common definition of what makes a website accessible. It lays out the required features, giving them a rating of A (basic), AA (recommended), or AAA (excellent).

It is a requirement in the UK that all websites operated by the public sector (government bodies or organisations funded by the government) meet the WCAG AA level, meaning it may be essential for your website project. The AA level strikes a balance between comprehensive accessibility and practical implementation. It requires elements of your website to meet detailed criteria, including:

Text alternatives: Visual media should have alternative text descriptions.
Adaptable content: Content should retain its essence regardless of its layout or presentation.
Distinguishable: Content must be easily seen or heard, differentiating it from the background.
Keyboard accessible: All functions should be operable via a keyboard.
Navigation: Tools and markers to aid navigation and location identification are necessary.
Readable text: Text should be legible, with customization options for a user’s comfort.
Predictable design: Consistency in navigation and operations is key.
Error suggestions: Corrective suggestions for user mistakes are beneficial.

More detail on the AA accessibility standard is provided by the government here.

Perceivable

Information and user interface components must be presented in ways all users can discern, irrespective of their disabilities. This covers guidelines like text alternatives, adaptable content, and distinguishable foreground and background.

Operable

All users, including those with disabilities, should be able to interact and navigate the interface. Key criteria include keyboard accessibility, ample time for tasks, and navigation aids.

Understandable

The information and operation of the user interface must be clear. This principle champions readable text, predictable design, and input assistance.

How to ensure your website meets the AA WCAG Standard

For Universities, non-profits, and museums, inclusivity is a top priority. But it’s one thing to know the rules, and another to successfully deliver a website that meets them.

Here at Numiko, we have ample experience in delivering websites at the AA WCAG standard for public sector bodies and institutions who wish to ensure their website is accessible.

We recommend following these steps when seeking to make your website accessible and in-line with the AA WCAG standard:

Design with accessibility in mind: In the design stage, ensure page layouts are compliant with WCAG guidelines, considering colour contrast, legibility, readability, and identifiable feedback, all without compromising aesthetics. Don’t treat it as an afterthought after the page has already been designed.
Use well-structured HTML with the correct semantic elements and add additional information by using the Accessible Rich Internet Applications (ARIA) specifications to enhance the user experience for visually impaired users and better communicate with assistive technologies, such as screen readers.
Comprehensive testing: Use automated testing tools like WAVE, SiteImprove, and tota11y, as well as assistive technologies like VoiceOver and JAWS, to check various elements, including colour contrast and heading structure. Manual testing alongside this ensures correct ARIA roles and web mark-up.
Collaborate for independent audits: Engaging with third-party specialists to conduct independent accessibility audits with users having accessibility needs offers in-depth insights on assistive technology interactions.

Accessibility case study: WCAG for SOAS

Our redesign of SOAS University of London’s website is an excellent example on meeting and exceeding the AA WCAG accessibility standard.

The website is accessible with keyboard only, and the focus indicator helps to make it more navigable for keyboard users. We ensured that all the colours are contrastable enough to assist users with visual impairments, and we ensured buttons have a sufficient degree of contrast from the background colour. We also made sure to never rely on only colour to convey meaning.

Our design was bold, unusual for a university website, and visually impressive. It utilised lots of animation, which can pose a challenge for meeting AA WCAG standards. We ensured users had the option to turn the animation off by turning on the browser setting ‘prefers reduced motion’.

For screen reader users, we used semantic HTML throughout, and we added navigation tags to make it easier to move around the site. ARIA attributes help users with interactivity on the site, such as identifying if dropdowns are open or closed. We also used anchor links that allow users to easily jump to different parts of the web page without scrolling and skip links that allow users to skip the top-level navigation links and jump to the main content on a page.

Any modals employed ‘focus trapping’ to simplify navigation when the modal is in use. This allows users to fill in a form just with the keyboard as they can specifically focus on the form elements, rather than interact with the wider site.

What’s new in WCAG 2.2?

WCAG 2.2 adds 8 new success criteria. These are:

Focus appearance – level AA: This specifies that the minimum size of a focus indicator must be at least 1-pixel thick border around the element. Focus indicators help users navigate a website via keyboard without a mouse, by showing which element they currently have selected.
Focus appearance – level AAA: This is similar to Focus appearance level AA, but makes it more visible by stipulating that the focus indicator must be at least 2 pixels thick around the element.
Fixed reference points – level A: This stipulates that digital and paper versions of publications should have matching page numbers, so that all users can be on the same page.
Dragging – level AA: In order to help users with difficulty with fine motor movements, this requires that interfaces that would usually be operating by dragging can be operated by tapping keyboard buttons, such as up/down/left/right.
Pointer target spacing- Level AA: This is to help users who struggle with fine motor movements select elements such as buttons. It requires buttons to be above a defined minimum size (44 x 44 CS pixels) or leaving spacing between targets that means there’s at least 44 pixels between the far side of one target and the nearest side of the closest target.
Findable help- level A: This requires that you have a way to access help such as contact details, a Q&A page or a built-in messaging option like live chat.
Hidden Controls- Level AA: This requires controls that are relevant to completing a process on the site (e.g. filling out and submitting a form) be consistently visible, and not only appear on hover.
Accessible authentication – Level A: This states that there must be a path through authentication which does not require a cognitive function test. This includes memorizing passwords, and therefore the password field should be able to be filled by a password manager extension.
Redundant entry- Level A: This means you should not require users to input the same information multiple times, such as a allowing a user to confirm that the billing and shipping address are the same rather than requiring them to enter it twice.

Get help with accessibility

We see WCAG AA not just as guidelines that have to be followed, but an essential part of designing a website. That’s why every project we deliver meets WCAG standards. With the increasing importance of digital platforms in today's world, ensuring accessibility isn't just a nice to have—it's a responsibility we all share. If you’re working on a website project that you want to meet WCAG AA standards get in touch with us to discuss how we can help.