Key aspects of WCAG 2.1
Colour, Contrast, and Text Size (letter spacing, line heights divisible by 4px)
Label in addition to colour indication for colour-blind people, yellow/orange make look the same to them
Focus states – clearly show the action
Labels – careful with minimalistic labels, avoid helper text labels inside the form field
Alt Tags for Images – if image does not load
Developed Correctly – markups, keyboard navigation, etc, working with the developer closely
Constant research and improvements on Accessibility, Designer assumes responsibility
Links to be impeded in the sentence rather than (click here)
Consistent navigation, components, layouts, and fonts – same order, function, helps locating them on the page
Descriptive and informative page, section, and label titles – avoid abbreviations
Multiple ways to find a page or even close a window (x) also Cancel button
Device independent design – design breakpoints and for different screen sizes,
Touch targets recommendations – min 9 mm high by 9mm wide
Tools to help meet WCAG 2.1 standards:
UserWay.org - add 1 line of code to make you site WCAG compliant
- Join as partner, 1 line of code to achieve WCAG 2.1, AI automated
- Carries out check, puts Alt tags to all images
- User can increase text size or contrast, i.e. helps readability, in Israel it is a mandatory add-on
- Can make the site black and white for better readability
Pablo's post about Accessibility is very helpful: https://uxdesign.cc/designing-for-acc...
Chrome extension: https://chrome.google.com/webstore/de...
MOS Contrast tool app: https://usecontrast.com/ - rating A, AA, AAA for WCAG compliance
Check out Accessible: https://accessibe.com
WebAIM.org - WCAG contrast checker
-
Other useful resources:
-
Here are some examples of amazing design systems — Shopify’s Polaris , Atlassian’s design library , BBC’s GEL .
You have contacted ConciseUX.co.uk. We will be in touch soon. Thank you!