Quick Wins for WCAG 2.2 Level AA Compliance. 7 ways to improve your website

You spend thousands of dollars to have a business website. It would not give a higher ROI if it is not simple and easy for everyone to use. Many of your potential customers with disabilities visit websites every day. They might leave and never come back if your website is hard to access. That is why you should consider Web Content Accessibility Guidelines WCAG. This is an accessibility framework to ensure that your websites are user-friendly.

WCAG standards have three levels of accessibility:

• Level A – The most basic requirements that make a website minimally accessible.
• Level AA – The recommended standard for most websites that ensures usability for people with disabilities.
• Level AAA – The highest level with the best accessibility but often difficult to achieve for all content.

Most websites aim for Level AA to balance accessibility and practicality. But you don’t have to be a web expert to confirm the accessibility of your digital presence. We give you seven simple fixes to quickly improve your website.

1. Make text easy to read with good color contrast

Hard to read text is the biggest problem on websites. It is no less than a nightmare for a visually impaired user to read light grey text on a white background. Similarly, yellow text on a light blue background can make reading difficult users who have low vision.

You can fix it by making the text high contrast against its background. A contrast ratio of 4.5:1 is good for normal text. You can go with 3:1 for large text.  

❌ What is bad for WCAG Level AA- Light grey text on a white background is hard to read.

✅ What is good for WCAG Level AA- Dark blue text on a white background is easy to read.

Making text easy to read helps everyone including users with disabilities. It also improves mobile usability in bright outdoor lighting.

2. Make sure people can use a keyboard to navigate

Some people can’t use a mouse so they use a keyboard instead. If your website feels dead when someone uses Tab key to move between links, buttons, and forms then it is a big problem.

Your website will have accessibility issues if a button can only be clicked with a mouse. To make it Level AA compliant, you can have buttons that can be activated with Enter or Spacebar on a keyboard.

Fix it with a simple keyboard functionality test. Secondly, ensure all important elements like menus, buttons forms can be selected and used with a keyboard.

A keyboard-friendly site is easy to use for people with motor disabilities. It even power users who prefer keyboard shortcuts.

3. Make text bigger when zoomed without breaking the layout

Does your website display text that gets cut off when zoomed. Well, you should understand that many users zoom in on websites to read better. If your site breaks or hides content when zoomed in, it becomes hard to use. Make it WCAG compliant by displaying text that scales smoothly without breaking the layout.

You can achieve it by allowing text to resize up to 200% without breaking the design. You should use relative units like em or rem instead of px for font sizes. And, avoid fixed widths that prevent content from adjusting properly.

This fix is helpful for seniors, visually impaired users and mobile users who need bigger text.

4. Add a Skip to Content link for WCAG Accessibility

Imagine the frustration of a user who relies on screen readers or keyboard navigation. They have to go through an entire menu just to get to the main content.

Fix this issue with a “Skip to Content” link at the top of the page. This link should be visible when focused and allow users to jump straight to the main content.

Everyone likes to have shortcuts. When there is no way to skip the navigation bar, the bounce rate on your website may rise. Give a clear “Skip to Content” button for fast access. This small fix makes things easy for screen reader users and keyboard-only users.

5. Make buttons and links big enough to tap

Have you ever tried clicking a tiny button on your phone? Ask about the struggle of users who have motor disabilities or larger fingers. A quick Level AA compliance fix would be to make the touch targets at least 24x24 pixels. You can also add padding to small links and buttons to make them easier to tap.

Get rid of the tiny hard to tap checkboxes on your website. A good WCAG website would have A checkbox with enough space around it. Bigger touch targets help mobile users. It is even helpful for people with shaky hands.

6. Avoid auto-playing videos and animations

Who wants to startle their target audience with videos and flashing animations that cannot be stopped? The situation can be absolutely annoying and overwhelming for people with cognitive disabilities or motion sensitivities.

Fix it and achieve level AA compliance by giving the option to pause, stop or hide the auto playing content.  Use prefers reduced motion to respect user preferences for reduced animations.

Get rid of the auto playing videos and give your users a pause button. This WCAG fix is to ensure accessibility for users with epilepsy, ADHD and motion sensitivities.

7. Make form error messages clear and helpful

Forms can be confusing if error messages are unclear. A bad example is a website message that shows just “Error” in red. If a user fills out a form and gets such confusing error messages they might leave the website out of frustration. Alternatively, you can make your website accessible with a clear error message like “Please enter a valid email address”.

Clear and specific error messages with suggestions on how to fix the error can ensure WCAG compliance.

Closing thoughts

Improving Level AA accessibility has some pretty simple fixes. You can make your website easier to use with the above listed suggestion. If you feel that your website may have more accessibility pitfalls then you can get a free consultation at ADACP.  

Our accessibility specialists have in-depth industry experience. We can help you with audits and remediation according to the WCAG Guidelines and the European Accessibility Act.