A presentation at TfS Product Offsite by Dan Matthew
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?
for free. You
can too.