Accessibility
Mediahuis products and experiences are for everyone, because everyone is entitled to be up-to-date with the news. With Chameleon, we strive to create a system that is accessible to the widest audience possible. This includes designing features that are easy to understand and use, as well as accommodating consideration for individuals who use assistive technology. Inclusion is a key priority in all aspects of our design system, from component functionality to language and readibility.
Inclusive design not only helps users with disabilities; it provides a better user experience (UX) for everyone. An inclusive product should give all users the same quality of experience and adapt to users and situations.
At Mediahuis, we're aiming to meet the latest WCAG standards. Officially we're targetting WCAG 2.1, but where possible we even try to measure up to newer versions.
You can consult the official documentation or WCAG 2.1 guidelines. Below are some basic rules, these are the bare minimum you should take into account.
1. Contrast
Check the contrast ratio for text online with Colour Contrast.cc, or use the Caravage Figma plugin.
2. Typography
Ensure that fonts are not smaller than 12px. Smaller sizes may be illegible on some platforms. The main body text (like what you’re reading right now) should usually be 16px or larger. Additionally, it is officially stated within the WCAG that visitors must be able to resize all text on the page to at least 200% of its original size.
Appart from size, using an easy to read font is very important. Below are some pointers as to what makes a font easy to read.
Do have:
- Tall x-height: the height of the lower case letters like m, a, x, and r.
- The height difference between ascenders and capital letters, so that, for example, capital "i" and lower case "l" look different.
- Distinguishable characters, for example, L, l, and 1 should all look different from each other, as should o, e, c and a.
- Adequate letter spacing.
... but avoid:
- Thin weights on smaller font sizes.
- Narrow-width fonts.
- Block capitals.
- Similarly shaped letters and characters and short ascenders and descenders increase letter confusion and decrease legibility and readability for people with dyslexia.
3. ALT texts & Captions
ALT text refers to invisible description of images which are read aloud to blind users on a screen reader. Adding ALT text allows authors to include images, but still provide the content in an alternative text based format.
Captions (called “subtitles” in some areas) provide content to hearing-impaired people. Captions are a text version of the speech and non-speech audio information needed to understand the content. They are synchronized with the audio and usually shown in a media player when users turn them on.