Some strategies on using inclusive persona profiles to build 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?

21. Thank you!
@nadiarasul