Using persona profiles for accessible websites
- 1. Using Persona Profiles for Accessible Websites Nadia Rasul
- 2. Hello! Sr. Front-end Developer & Accessibility Lead at Reason One Twitter: @nadiarasul +
- 3. Web accessibility is the practice of making websites usable by as many people as possible to give them equal access to information and functionality
- 4. Accessibility by the numbers Canadians over the age of 15 has at least one disability (StatsCan) 1 in 5 of the global population report challenges in dealing with basic daily tasks and interactions (WHO) 15% people live with a limiting long term illness, impairment or disability in the UK (GOV.UK) 11 million+
- 5. Types of disabilities Permanent ● Visual ● Auditory ● Motor ● Speech ● Cognitive Situational ● Bright sunlight ● Using the phone with one hand ● Loud room Temporary ● Concussion symptoms ● Broken arm ● Ear infection
- 6. User Personas ● Fictional profiles of users based on research to represent the different types of people who would use your website or app ● Helps understand your users’ needs, experiences, behaviours and goals ● Guides your design and development process to create a good user experience
- 7. Using Personas ● As we convert static designs into interactive websites, using personas ensures that we don't lose perspective of the people we're building for ● Test features thoroughly on different devices using appropriate assistive technology (keyboard, screen reader, magnification, contrast checker etc.) to see what a person with that profile might experience ● Reference personas to prioritize features and bug fixes based on the needs of your users
- 8. Creating Inclusive User Personas ● Ensure your UX team includes people with disabilities when creating persona profiles ● Make profiles based on target audience ● Survey your users to get real data ● Validate assumptions through actual user testing
- 9. Proceed with caution! The following profiles are just a few examples of the types of users you might have In reality, people may experience a combination of different disabilities in varying degrees Building and testing with user personas does not replace the need for testing with real people
- 10. Persona 1: Lee An online shopper with color blindness and partial vision
- 11. About Lee ● Partially sighted and uses a screen magnifier to increase the size of text and graphics on the page ● Lee has to scroll vertically and horizontally to read through all the content ● He has trouble interacting with functionality that gets cut off when zoomed ● Red and green color blindness - the most common visual disability that affects men ● Encounters problems shopping online when websites and apps do not have sufficient color contrast ● He has problem reading text when color contrast is insufficient and find its hard to fill forms when only color is used to determine required fields ● He has difficulty in making product choices when color swatches are not labelled.
- 12. Make things usable for Lee ● Use at least 3:1 color contrast ratio for content and UI components ● Color should not be the only means for communicating important information such as product color or errors on a form. Include text alternatives. ● Color should not be the only way to identify links ● Text can be resized up to 200% without loss of content or functionality ● Field labels, instructions and errors should be directly above or below the fields they relate to
- 13. Persona 2: Alex A reporter with repetitive stress injury
- 14. About Alex ● Repetitive stress injury which makes it painful to use a mouse and to type for extended periods of time for their research and writing ● They use an ergonomic keyboard and rely on keyboard shortcuts to navigate websites ● They use voice recognition software on computer and mobile ● Alex has trouble using websites where content and functionality cannot be used by keyboard alone ● Sometimes it is also difficult to skip content and navigate to sections on a webpage without using many keyboard commands, which is very tiring and limits the time they can spend working comfortably
- 15. Make things usable for Alex ● Provide visible focus states with sufficient contrast ● Include skip links ● Use semantic HTML and all custom components should be keyboard accessible ● Content should follow a logical order (visually and in the DOM) ● Manage focus and ensure there are no keyboard traps ● Buttons, links and other interactive components should be large enough to easily activate with touch ● Visual label should match accessible name of element
- 16. Persona 3: Mila Senior staff member who is blind
- 17. About Mila ● Mila works at a bank and relies on a screen reader on her computer to navigate websites, complete and submit forms, and access information in an effective manner. ● She abandons websites when the screen reader cannot read structural information on the page such as headings, columns and rows in a table, list items, link and form controls ● She is frustrated when she has to tab through a lot of content to get to the most useful information
- 18. Make things usable for Mila ● Include text alternatives for non-text content ● Content should appear and behave in predictable ways ● Create a logical heading structure ● Use of landmarks and semantic HTML elements such as headings, lists, links, buttons and tables etc. ● Programmatically associate labels and errors to form fields ● Provide useful updates when content is changed on the page dynamically, e.g. using aria-live region to inform when filtered listings update or error messages appear
- 19. ● Accessible Brand Colors ● NoCoffee (Chrome extension) ● MDN Accessibility ● WebAIM Contrast Checker ● aXe ● Search #a11y on Twitter ● Stories of Web Users ● Understanding disabilities and impairments: user profiles ● WebAIM WCAG Checklist ● Accessibility - Google Web Fundamentals ● Inclusive Design Principles ● “Web accessibility according to actual people with disabilities” Resources
- 20. Questions?
Editor's Notes
- #14: Talk about SR accessibility