What is AA WCAG 2.2 Accessibility Standard?

Why is Accessibility for Websites Important?

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

What is the AA WCAG Accessibility Standard?

Developed by the World Wide Web Consortium (W3C), the WCAG offers guidelines to enhance web content accessibility for disabled individuals. The most recent version of these guidelines is WCAG 2.1, but WCAG 2.2 is about to be released and has been published in draft.

These guidelines are tiered into three levels: A, AA, and AAA. Going for the AA level strikes a balance between comprehensive accessibility and practical implementation and therefore is a frequent choice for most large website projects.

The AA standard encompasses criteria such as:

• Text Alternatives: Non-text content should have 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.

Three Principles of WCAG

At the core of the WCAG are three guiding principles that frame the guidelines:

1. 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.
2. 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.
3. 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 should be at the core. The government provide guidance on how your site should meet the required AA WCAG standard here. 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

As with all our projects, for SOAS University of London, we designed their site to meet and exceed the AA WCAG accessibility standard.

Our design for the SOAS site 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 built in the ability for the site to drastically reduce the amount of animation on the site if the user has the browser setting ‘prefers reduced motion’ setting active in their browser, which some users who struggle with lots of motion use.

The site makes use of a range of accessibility techniques. The website is accessible with keyboard only, and the focus indicator helps to make it more navigable for those using a keyboard. 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 for the same reason. We also make sure we don’t rely on colour alone to portray state / meaning.

We use semantic HTML throughout, which helps users using screen readers, and we add nav tags to help users using screen readers navigate around the site more easily. Aria attributes indicate to screen readers the state of elements that are interactive, to let users with screen readers know if aspects like dropdowns are open or closed. We also use ‘jumplinks’ that move the active element down with the jump link, rather than moving the focus without updating the position of the active element as would otherwise occur. This prevents navigational issues for users navigating with their keyboards. We’ve also added ‘skip’ links, which allow users to keep to various parts of the page for quicker and easier navigation.

Any modals employ ‘focus trapping’ to simplify navigation when the modal is in use. This helps users navigating with a keyboard to fill in forms, as if a modal does not do this they may be tabbing around the website behind the modal and be unable to interact with the form.

What’s new in WCAG 2.2?

WCAG 2.2 has not been officially released yet but drafted updates for the 2.2 version have already been released. With WCAG 2.2 imminent it makes sense to spec your new website projects with WCAG 2.2 in mind.

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 current 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 in 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 size 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 the path through authentication which does not require a cognitive function test, which includes memorizing passwords, and therefore the password field should be allowed 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 AA WCAG not just a guideline that has 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 AA WCAG standards, get in touch with us to discuss how we can help.