Evoluted's a11y Advent Recapped!

Tip #2: Colour contrast

Good colour contrast is essential - it helps people with low vision perceive your content.

Tip #3: Colour for context

Don't rely on colour to provide context. People with colour blindness will struggle to understand the meaning. 'Red-green' colour vision deficiency affects around 1 in 12 men and 1 in 200 women.

Tip #4: Content layout

Avoid multicolumn content layouts. This helps people with a low field of vision because it means they don't have to horizontally scroll and risk losing their place in the content.

Tip #5: Video content

Make sure you provide captions and/or a transcript for videos - 1 in 6 UK adults are affected by hearing loss, making it the country's second-most common disability.

There are also many other reasons why users may not be able to play your videos with sound - for example, if they're watching in public without headphones.

Tip #6: Headings in content

Make sure you use a good heading structure and don't skip heading levels. Your headings should establish the content hierarchy and follow a sequential order.

Tip #7: Formatting numbers

Formatting numbers properly makes them easier to read for people with conditions like dyscalculia. Break up large numbers with commas and for credit cards, use spaces after every fourth digit.

Tip #8: Alt text for non-decorative images

Provide alt text for all non-decorative images so that people using screen-readers can perceive the image's meaning.

Tip #9: Alt text for decorative images

For purely decorative images, provide a null alt text, i.e. alt="".

This prevents screen-readers from attempting to read out the image's filename.

This tip led to an interesting debate on Twitter about whether to still add alt text for images there - the consensus was that this is a good idea, as Twitter otherwise applies "image" as the default alt text which is unhelpful to users with screen-readers.

Tip #10: Form inputs

Ensure all form inputs have an associated label - never use the placeholder attribute as the label (or for anything important to completing the form).

Labels help people with dexterity issues, cognitive disabilities and screen-readers.

Tip #11: Font choice

Your font choice affects your content's readability for people with disabilities like dyslexia and reduced vision - so use accessible fonts. The Readability Group's "Guide to Understanding What Makes a Typeface Accessible" may be a useful resource here.

Tip #12: Link text

Avoid ambiguous link text like 'Click here' or 'Read more' - and don't use the same link text for links pointing at different pages.

Some assistive technologies let people browse links in isolation from content, so the link text needs to provide context.

Tip #13: ARIA attributes

Only use ARIA (Accessible Rich Internet Applications) attributes when there's no native HTML option available.

ARIA supplements HTML, but no ARIA is better than bad ARIA. If you can use a native HTML element/attribute that does what you need, do so.

Tip #14: Mobile zoom

Don't disable zoom on mobile - for people with low vision it's important to have the ability to zoom into content to read it more easily.

Tip #15: Focusable elements

Make sure you set a visible and consistent :focus style to focusable elements like links and buttons. This ensures content can be easily navigated without a mouse.

Tip #16: Sentence structure

Use simple English and avoid jargon to ensure your content is accessible to those with cognitive disabilities.

This also helps people without recognised disabilities - 1 in 6 UK adults has the reading level of an 11-year-old.

Tip #17: Divs and buttons

A div is not a button. Don't reinvent the wheel - if we already have the semantic element for something, use that and style it, rather than trying to mould another element into what you need.

Tip #18: Screen-readers

Don't be tempted to 'correct' pronunciation of words read out by a screen-reader. It will cause confusion for people who use other assistive technologies like a Braille reader.

Tip #19: Accessibility overlays

Do not use an accessibility overlay. It won't fix your site's accessibility problems and reinforces discrimination of those with disabilities.

For more information, see Should I Use An Accessibility Overlay?

Tip #20: Skip links

Provide skip links to allow people to skip to the main content or skip past a long list of items. This really helps those using a keyboard to navigate the page.

Tip #21: HTML validation

Validate your HTML markup. Browsers can be very forgiving of errors, but some assistive technologies may be less so. The W3C provides a free HTML markup validator.

Tip #22: CSS breakpoints

When working with CSS breakpoints, remember the user is not necessarily using a mobile phone. They could be using a screen-reader or be zoomed in on the page due to having low vision.

Tip #23: Text layout

Avoid centred multi-line text. This can cause readability issues, particularly for people with dyslexia. Justified text is also problematic.

Tip #24: a11y

'a11y' is a commonly used numeronym for 'accessibility' and the source of our series' name. The 11 represents the count of letters between 'a' and 'y' in 'accessibility'.

If you need expert support with your web design and UX, see our Create services or our UX and Accessibility Audits offering.