Accessibility: What you need to know as a designer
Stéphanie Krus
Lizzie Cass-Maran
Neil Scott
Agenda
Break at 7pm for 10 min
What is Accessibility?
In the UK, 1 in 5 people are disabled
vision hearing speech physical cognitive
Or a mix of them … and it’s not always visible to others
What is accessibility?
Accessibility means that
you don’t put barriers for them
to access the same things as the others
Permanent, temporary, situational disability
Accessibility is not just for disabled people:� �Permanent – Temporary - Situational
From the Microsoft Inclusive Design toolkit
For example
It can and it will affect everyone at some point in life
Terminology can be confusing
Quite often, you have more than one disability.
And other things like your gender, LGBTQ+ status and poverty will also have an impact on your digital experience.
Disabled people might lack the money to buy new devices, or not have the energy or ability to focus on your digital service or product.
Disability intersectionality
Any user maybe need support:
Assisted digital support
If your online service is not accessible, you might have to offer some assisted digital support
Digital inclusion in Scotland
Inclusion is wider than accessibility
Common inclusion issues are:
Inclusion is wider than accessibility
Not accessible = not inclusive of disabled people
Accessible but no alternative for people who need digital support = not inclusive either�
Assistive technologies
Not everyone uses a mouse…
People might use websites in a way you did not expect…
They would hear the text which you can’t see unless you select it.
They would not know there is a problem…
…unless they are using a screen reader but they can see and would wonder where the text is coming from.
This slide is accessible only for screen readers users
This happens in dark footer sometimes:
White text against white background
Resources on assistive technologies
What happen when you can’t use a mouse?
Try yourself!
Can you still navigate and use the website?
Don’t use your mouse and instead:
When you need to zoom to see
Try yourself!
Can you still navigate and use the website?
To zoom in:
use the ctrl and + keys,
To zoom out:
ctrl and -
Zoom in up to 400%
The best way to understand it,
is not to try yourself for 10 min, but to speak with someone who experience this every day
If you create websites
always do at least these 2 tests:
Colours
There are plenty of tools to do this
This is hard to read
Think text, button, links, icons, navigation items
and don’t forget hover states and visited links
Make sure your contrast are good
Don’t rely on colour only
Don’t rely on colour only
Some people change your colours
Some browsers let you do that.
People do it for various reasons and we should not interfere with this.
Some need higher contrast others need lower ones.
Some prefer dark modes, others don’t like them.
Some people change your colours
“User needs varying widely across people who have low vision, and one user’s needs may conflict with another user’s needs.”
– Accessibility Requirements for People with Low Vision, W3C�https://www.w3.org/TR/low-vision-needs/#user-needs
No perfect solution
Light cream background and dark blue text is better for some dyslexic people.
But high contrast can be better for some people with low vision.
Dyslexia vs high contrast
A lot of people are using dark mode for their browser or mobile,
Make sure your images still work with this
About dark mode
Resources on colours
Images and other media
Alt text = alternative text
alt = “2 cute kittens in a paper bag”
Make sure people can understand your video, even if they can’t hear.
If there is no sound, say it,
so people who can’t hear
don’t think they are missing out.
Add captions
Resources on images and media
Social media
All pictures should have an Alt text
So people with screen readers don’t miss any information
If you can’t add a proper alt text,
just describe it within your post in [square brackets]
Describe your images
#thisishardtoread
#ThisIsEasierToRead
#ThisIsHowToFormatAnAccessibleHashtag
#a11y
Capitalise hashtags
Avoid too many emojis and ‘cute text’
= Smiley face emoji
General recommendations
There is no perfect solution which works for everyone
Always plan alternatives and ask people what they need, do not assume
Find an ally / allies
UX Designer
Content
Designer
Content
Designer
Developer
Tester
User Researcher
Find an ally / allies
UX Designer
but you’re also:
UR / CD / Dev / tester
Accessible content
By Lizzie Cass-Maran
Mostly focuses on
cognitive load issues.
What is Content Accessibility?
Cognitive disability is the largest group of disabled people.
But the WCAG is vague on it.
What is Content Accessibility?
Cognitive disability is the largest group of disabled people.
But the WCAG is vague on it.
What is Content Accessibility?
What does this photo mean?
Image content
Photo: Ellie Morag
Image content
Intersectional accessibility
“I bet that "diversity" for blind people is more related with organisers that care about alt texts than about gender or race. And if you're not blind, you'll see it anyway.”
Intersectional accessibility
“I bet that "diversity" for blind people is more related with organisers that care about alt texts than about gender or race. And if you're not blind, you'll see it anyway.”
Intersectional accessibility
Someone might be all these things!
Let’s be clear
Let’s be clear
Crossover needs, for example:
It’s just a link, right?
Crossover needs, for example:
It’s just a link, right?
Crossover needs, for example:
It’s just a link, right?
Crossover needs, for example:
It’s just a link, right?
So how does Content Accessibility fit in?
So how does Content Accessibility fit in?
The way we write words
Use sentence case.
The way we write words
Avoid not doing this.
The way we write words
Keep clear of jargon, needless acronyms, etc
The way we write words
A11y
A11y
When you have to use jargon
When you have to use jargon
The way we write words
This isn’t in the WCAG.
The language we use
This isn’t in the WCAG.
Is that at all you care about?
The language we use
Use of metaphor
Remember this stupid person?
Don’t perpetuate ableist stereotypes
“Stupid”
“Nuts”
“Blind spot”
“Fall on deaf ears”
“Wheelchair bound”
“a bit OCD”
Don’t perpetuate ableist stereotypes
Hang on...
Hang on...
| Isn't this just good Content Design? |
| |
Hang on...
| Isn't this just good Content Design? |
| No. It’s very good Content Design. |
Overlays: cheating badly at accessibility
Resources on accessible content
Wow factor
The problem with motion... and more
For example
Some people have vestibular issues:
It’s distracting and might be problematic for people with cognitive impairments
Why motion is a problem
Resources on Motion
Testing and fixing your sites
Neil Scott
Test with real people … if you can
Empathetic Mindset
Teaching people to fish
Auditing Tools
Tools for Testing
Resources on testing
Where to learn more
You have a lot of options
More resources
Thank you!
Any questions?