appility / btb-omega-accessibility

Notes on accessibility

Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities.

There is also a strong business case for accessibility: studies show that accessible websites have better search results, they reach a bigger audience, they’re SEO friendly, have faster download times, they encourage good coding practices, and they always have better usability.

For more information on how Digital accessibility fits into BT wider Inclusion Policy, visit BT Including You

Designing a digital product from scratch that meets the requirements for accessibility shouldn’t add additional cost and effort. but fixing a site that is already inaccessible may require considerable effort.

Different members of the team will have specific areas these are outlined below with links to the relevant WCAG guidelines

Key points for UX

• Structure information so users are able to find what they want easily

• Use labels or instructions with form fields and inputs ( See WCAG 4.1.2 Name, Role, Value (A) )

• Use error messages that are clear and advise how the user can go about fixing them ( See WCAG 3.3.1 Error Identification (A) )

• Use link text which in meaningful on its own ( See WCAG 2.4.4 Link Purpose (In Context) (A) )

• Write useful alternative text for your images and other non-text content ( See WCAG 1.1.1 Non-text Content (A) )

Key points for Visual Design

• Add enough color contrast ( See WCAG 1.4.3 Minimum Contrast (AA) )

• Don’t use color alone to make critical information understandable

• Design usable focus states ( See WCAG 2.4.7 Focus Visible (AA) )

• Use labels or instructions with form fields and inputs, don't rely on input placeholders ( See WCAG 4.1.2 Name, Role, Value (A) )

Key points for developers

• Use correct markup on your content

• Make sure the page reflows nicely if the font size is bumped up ( 1.4.4 Resize Text (Zooming) (AA) )

• Support keyboard navigation

• If using make sure all errors are conveyed to screen readers ( aria roles )

Key points for product owners

Get an Accessibility Audit. Use an audit service to find out if your product works with assistive technologies and meets WCAG 2.0 level AA. Use the audit results to fix problems and do another test.

Currently BT use https://www.abilitynet.org.uk/accessibility-services/accreditation-and-iComply to achieve "AbilityNet Accredited Plus" site status

Useful tools

• WebAIM Color Contrast Checker: https://webaim.org/resources/contrastchecker/ Great contrast color checker that gives you results in real time for regular and large text.

• Inclusive Components:

A pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.

Color Oracle: A free colour blindness simulator for Windows, Mac, and Linux. It shows you in real time what people with common colour vision impairments see.

Vox Product Accessibility Guidelines: A comprehensive checklist for designers, engineers, and project managers.

AXE Google Chrome Extension: Test any site for accessibility violations using the Chrome inspector.

Contrast: A macOS app for quick access to WCAG colour contrast ratios.