Ever wondered how to quickly find out if your website is accessible to all the users including visual impaired people?
As part of our job is to comply to the public sector Web Standards, we need to assess Websites and web apps against the Web Content Accessibility Guidelines 2.1 (Level AA). Sometimes, we need to act quickly to evaluate the amount of effort needed to make this magic happens.
4 principles that has 12 Guidelines for hundreds of pages is a tedious process to go through. Therefore, we suggest 10 quick tests to give your team an idea of what you’ll be diving in:
- Images
- If they’re not decorative, do they have alternative text?
- Do the icons convey a meaning? If yes, are they shown to the user?
- Keyboard
- Can you navigate the page only with the keyboard?
- Any keyboard trap?
- Do we have a skip to content mechanism at the top of the page?
- Zoom-in
- Zoom your page to 200% and make sure everything is still readable
- Links
- Are they descriptive?
- The title attribute should not be relied on as the only way to provide additional info
- Make sure long text uses screen reader visible text (CSS class)
- Make sure they have different active, hover and visited states
- Make sure they have an href attribute otherwise they should be a button or have a button role
- Forms
- Are all the controls associated to a label?
- Are all the controls focusable?
- Do you have an error mechanism that guides the user?
- Color contrast
- Using a color contrast tool, scan the foreground and background of every elements to make sure they are at least 4.5:1
- Test the pages in color blind views
- Headings
- Make sure your page follow the proper semantic and ordered headings (h1, h2, h3, h4, h5, h6)
- Page title
- Make sure your page has a proper page title (meta title and h1)
- Page language
- Make sure your page has the lang attribute defined for the html element
- Make sure that if you have a different language text in your page to use the lang attribute to specify which one
- Videos
- Make sure they have captions