Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Using persona profiles for accessible websites

Some strategies on using inclusive persona profiles to build accessible websites.

  • Sé el primero en comentar

Using persona profiles for accessible websites

  1. 1. Using Persona Profiles for Accessible Websites Nadia Rasul
  2. 2. Hello! Sr. Front-end Developer & Accessibility Lead at Reason One Twitter: @nadiarasul +
  3. 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. 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. 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. 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. 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. 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. 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. 10. Persona 1: Lee An online shopper with color blindness and partial vision
  11. 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. 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. 13. Persona 2: Alex A reporter with repetitive stress injury
  14. 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. 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. 16. Persona 3: Mila Senior staff member who is blind
  17. 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. 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. 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. 20. Questions?
  21. 21. Thank you! @nadiarasul