Well, it can be a huge task to cope with whole WCAG2.1 at once, let’s divide and conquer it with a simple to begin checklist:
- Color and color contrast rules – Contrast 4.5:1 for standard text and 3:1 for large text (18px or more) to comply with the AA conformance level. To get to AAA, you’d need a 7:1 contrast ratio for standard text and 4.5:1 for large text. UI components need at least ratio of 3:1 against adjacent colors (level AA). More information about active user interface components and their contrast (open in new window). At the same time – do not rely on color alone. For example red warning text should also include some kind of warning – as icon with warning as alt text or aria-label / title including “warning” text. Just using red color won’t do it!
- Semantics – from headings to landmarks, obey the HTML rules and consider how important is the title. And yes – there should be only one H1 and it should be the same as page title. Use HTML5 semantic elements for headers, navigation, main, footers, asides etc. And yes – it should validate too.
- Typography and reflow – while WCAG does not define minimal font size a good rule of thumb is 16px. Line heights must be at least 1.5 factor of font size, paragraphs must be separated with at least factor 2 of font size, letters must be spaced at least 0.12 factor of font size and words at least factor 0.16 of font size. Scrolling should only be needed in single direction, and page should be usable from 320px of width and over (with only vertical scrolling) and 256px of height (with horizontal scrolling). More information about reflow success criterion from WCAG2.1 (opens in new window).
- Every visual element with some meaning must have an text alternative – for example alt tag on an image, aria-describedby on infographic, closed captions for videos (and transcripts too), podcasts with transcripts, and so on. Everything that has important information must be provided as raw text as well! More information about non-text content (opens in new window).
- Interactive elements must be obvious – link is a link, and button is a button, consistently through pages, also navigation and forms must be obvious, and do not forget – every interactive element must have focus style and ideally hover too. And do not forget – minimum 44px size of elements (not needed for inline text though). More information about target size (opens in new window).
- Forms need special care, and a lot of testing. Keyboard accessible, programmatically identifiable adjacent labels for all input fields, radio buttons and check boxes need to be grouped together, and maybe even more important: error handling and validation – inline and summary, using aria-live for dynamic (AJAX) validations and a summary when appropriate! WAI tutorial for form validation (opens in new window).
- Test early, test often – test with automatic tools and use linting when you code, but never forget to test with keyboard and screen-reader. Only with practice and manual testing you will be more proficient and effective. And remember – automatic tools can help a lot but they can not understand the context, so always test manually!
