Accessibility 101 dm@talis.com 17/02/2023

Agenda 1. Introduction to accessibility 2. Understanding accessibility 3. Designing for accessibility 4. Accessibility in development 5. Accessibility in product 6. Conclusion 7. Q&A

Introduction to accessibility

Models of disability

Medical

Social

Charity

A few definitions…

“It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives.” World Health Organisation

“Disability happens at the points of interaction between a person and society” Microsoft’s Inclusive Toolkit

“Disability is a mismatch between capability & barrier” Ian Hamilton

“Accessibility is avoiding an unnecessary mismatch between capability & barrier” Ian Hamilton

“A11y”

The numbers

20% fi One in ve have a disability of some kind

70% The majority of disabilities are hidden

2,200,000,000 Have a vision impairment

43,000,000 Registered blind, worldwide

507,000,000 Require correction with glasses or contact lenses, worldwide

The regulations

The regulations • UK: Public Sector Bodies (Websites and Mobile Applications)(No. 2) Accessibility Regulations 2018… AKA PSBAR • EU: EN 301 549 • Australia: Disability Discrimination Act • New Zealand: Web Accessibility Standard • USA: Section 508 (Amendment to Rehabilitation Act of 1973) / Americans with Disabilities Act (ADA)

The regulations • Web Content Accessibility Guidelines (WCAG) 2.1 AA • Perceivable • Operable • Understandable • Robust • ISO 30071-1 digital accessibility

Understanding accessibility

Types of disability

Disabilities can be… Permanent

Disabilities can be… Temporary

Disabilities can be… Situational

Hearing • Hearing impairment • Hearing loss • Deafness • Central Auditory Processing Disorder (ADP)

Hearing • Lip reading • Sign language • Captions • Transcripts

Vision • Blindness • Low vision • Colour blindness • Deafblind

Vision • Screen reader • Braile devices • Screen magni ers • High contrast fi • Screen tints

Mobility and dexterity • Missing limbs • Multiple sclerosis • Cerebral palsy • Stroke • Arthritis

Mobility and dexterity • Voice control/dictation • Alternate input devices

Cognition • For example… • Limited comprehension • Cognitive overload • Problem-solving skills • Short-term memory • Attention-de cit • Dyslexia fi • Autism

Cognition • Screen tints • Plain language • Simple and consistent layouts • Underlining/line focus • Personalisation options

Assistive technologies

Exercise https://talis.github.io/bootstrap-theme/example

Designing for accessibility

Techniques Universal design principles • Equitable use • Flexibility in use • Simple and intuitive use • Perceptible information • Tolerance for error • Low physical e ort ff • Size and space for approach and use

Techniques Colour • Text with a contrast ratio of 4.5:1 • Don’t rely on colour to communicate information

Techniques Operation • Anything that can be done with a mouse should be keyboard accessible • Focus states • Tab order • Target size • Think about ways to skip lengthy sections • Don’t remove link underlines

Techniques Misc. • Elements should be identi ed the same on all pages • Where should alternative content formats live? • Simple page design for easy skimming fi • Include diverse group of users in user research and testing

Tools Stark • Plugin for design tools (Sketch, Figma) • Browser extensions • Desktop application

Tools Colour Contrast Analyser • Desktop application • Ensures same algorithm is in use

Techniques Personas

Accessibility in development

Techniques HTML • Use the platform • Form elements • Buttons • Links • Elements introduced in HTML5 – header/nav/section/footer

Techniques Accessible Rich Internet Applications (ARIA) • O ers attributes to help express connections and states between HTML elements • Roles help describe the structure of the page • Allows creation of complex UI widgets ff • Needs to be used carefully

Techniques Automated testing • Unit tests • Browser tests

Techniques Semi-automated testing • Browser extensions • Lighthouse • WAVE • ARC • Axe

Techniques Manual testing • Con rming tab order fi • Using screenreader

Exercise(s) https://000498073.codepen.website/problems/

Accessibility in product

Techniques • Make time to do accessibility right • Familiarise with guidelines and best practice • Should be part of the ‘De nition of Done’ • Can’t always be xed with third-party products fi fi • Create a “System Accessibility Log”

Conclusion

Accessibility is a… Responsibility

Accessibility is an… Opportunity

Questions?