WCAG 2.1 web accessibility guidelines

W3C has a set of rules for maintaining accessibility in websites. In this article, let’s look into the success criteria for the first two levels of WCAG 2.1 compliance, i.e., level A and level AA. These criteria can mainly be divided into 4 categories- perceivable, operable, understandable and robust. 

Perceivable

Making a website perceivable involves making the content available to the site visitor. Here are the factors that are included in this:

1. Non-text Content (Level A) - Content that does not have electronic text, such as diagrams, graphics, images, etc., must have an alt text.

2. Audio-only and video-only (pre-recorded) (level A) - Audio-only content like podcasts must have a transcript. Video-only content like slideshows and animations must have alt text or audio descriptions.

3. Captions (prerecorded) (level A) - Non-live broadcasts must have subtitles.

4. Audio Description or Media Alternative (prerecorded) (level A) - Prerecorded video content must have synchronized audio description.

5. Captions (Live) (level AA) - Recordings of live broadcasts must include closed captions.

6. Audio Description (prerecorded) (level AA) - Audio tracks must be accompanied with appropriate text descriptions.

7. Info and relationships (level A) - Semantic tags must be used properly so that screen readers navigate the page sequentially.

8. Meaningful sequence (level A) - The order of the elements on the web page must make sense even when CSS is disabled.

9. Sensory characteristics (level A) - Understanding the content should not rely entirely on sensory characteristics like shape, colour, sound, etc.

10. Orientation (level AA) - The display should not be restricted to a single orientation (portrait/landscape) unless required in special cases like piano application, bank cheque, etc.

11. Identify Input Purpose (level AA) - Input fields should be able to programmatically determine corresponding data from autocomplete information.

12. Use of colour (level A) - Colour perception should not be an essential part to convey information.

13. Audio control (level A) - If the website plays audio automatically and for more than 3 seconds, the user should be able to control the volume or turn off the audio easily.

14. Contrast (minimum) (level AA) - Text/text graphics should have a minimum contrast of 4.5:1 ratio with respect to the background. Large-scale texts should have a minimum contrast of 3:1.

15. Resize text (level AA) -The website should be resizeable and the content and functionalities should not be lost on resizing at upto 200%.

16. Images of text (level AA) - Text graphics can be replaced/accompanied by electronic text.

17. Reflow (level AA) - Websites should be responsive and content should not be lost while scrolling 320 pixels vertically or 256 pixels horizontally.

18. Non-text contrast (level AA) - Images/graphics should have a minimum of 3:1 contrast with colours of neighbouring elements.

19. Text spacing (level AA) - Text spacing should meet these criteria:

20. Content on hover or focus (level AA) - Interactive elements must show similar behaviour with keyboard and mouse. If there are texts on mouse hover, they should be accessible with the keyboard as well.

Operable

Navigation on the web pages and between interface components should be possible in multiple ways.

1. Keyboard (level A) - All the functionalities on the page should be operable with just a keyboard or keyboard emulators. Standardized actions should be assigned to standard buttons, like ‘Enter’ to open a link.

2. No keyboard trap (level A) - The user should be able to use the keyboard to undo actions as well. For example, closing popups or returning to a previous page.

3. Character key shortcuts (level A) - If a hotkey is implemented on a page, it should only be active after the action is focused on. Also, users should be able to disable hotkey actions.

4. Timing adjustable (level A) - Avoid assigning time limits to tasks. If it is necessary, then the user should be able to pause, stop or extend the timers.

5. Pause, stop, hide (level A) - If there are animated elements on the page that are activated automatically, users should be able to pause, stop or hide them easily.

6. Three flashes or below threshold (level A) - To cater to people with photosensitivity or epilepsy, a proper warning should be displayed before the media is played.

7. Bypass blocks (level A) - There should be enough links on the top of the page so that the user can bypass unnecessary content and navigate to exactly what they are looking for.

8. Page titled (level A) - Page titles should be unique and specific to the topic.

9. Focus Order (level A) - The order in which the focus shifts between elements should be logical.

10. Link purpose (in context) (level A) - The purpose of links, buttons, etc. Should be clear and understandable. If the link opens in a new window or tab, the user should be informed about it.

11. Multiple ways (level AA) - A website should provide multiple ways to navigate to different parts of the website. This is done by including links in the header, footer, sitemaps, table of contents, etc.

12. Headings and labels (level AA) - Heading and labels for input fields and navigable content should be well-defined.

13. Focus visible (level A) - When navigating with the keyboard, the element in focus should have a distinct indicator or highlight.

14. Pointer gestures (level A) - There should be well-programmed alternatives for pointer gestures like dragging, screen pinching, etc.

15. Pointer cancellation (level A) - For clickable elements that are activated on a single click, there should be mechanisms in place to undo the action during mid-click.

16. Label in name (level A) - The name of an element that a screen reader interprets should be consistent with the context of the element in the UI.

17. Motion actuation (level A) - It there are motion-activated actions (tilting the screen, shaking the phone, etc.), the user should be able to access those with buttons as well. The user should also be able to disable these actions without losing any website functionality.

Understandable

The content and functionalities on the UI should be understandable to the user.

1. Language of page (level A) - The language of a page should be easily detectable by assistive technologies.

2. Language of parts (level AA) - If there is more than one language displayed, the assistive technologies should be able to detect these changes, or there should be relevant text explaining them in the user’s main language.

3. On focus (level A) - While navigating using a keyboard, the focus on an element should not trigger any action with explicit prompts.

4. On input (level A) - Data input should not confirm data without the user’s approval. For example, even after a form is completely filled, it should be submitted only after the user confirms the submit action.

5. Consistent navigation (level AA) - The order of elements on the website should be consistent on all main pages and subpages to make navigation simpler.

6. Consistent identification (level AA) - Similar elements must have consistent labels. For example, eCommerce sites must have a standard label for the ‘Buy’ action across all pages.

7. Error identification (level A) - On user-input forms, fields with errors should be identified correctly and the issue should be conveyed to the user.

8. Labels or instructions (level A) - Input fields with fixed formats should have clear instructions. For example, add the required format for date fields as a short description.

9. Error suggestion (level AA) - On identifying errors, the website should also be able to suggest fixes. For example, a missing ‘@’ symbol in an e-mail address field.

10. Error prevention (Legal, Financial, Data) (level AA) - In pages that contain critical user information, there should be mechanisms that check, confirm, correct or withdraw the user actions.

Robust

The robustness of a site depends on the quality of coding. Having clean and understandable code improves adapting to the accessibility needs. The following factors matter for measuring the robustness of a website:

1. Parsing (level A) - HTML and CSS codes must be semantically correct.

2. Name, role, value (level A) - HTML elements should have meaningful names

3. Status Messages (level AA) - Notifications and status messages should have appropriate tags to indicate the type of message, i.e., error, success, etc.

This was a brief guide on the WCAG 2.1 guidelines. While there are many more success criteria, the ones mentioned here pertain to compliance levels A and AA.