Derek Featherstone is one of my favorite speakers when it comes to inclusive design and accessibility. As seen in the previous talks the discussion about accessible websites has been shifting from focusing only on the “accessibility” portion to focusing on the inclusive design techniques necessary to get us to accessible sites. In this talk, Derek covers the importance of inclusive design and the follows up with issues to look for so that you produce designs usable for everyone.
One thing that stood out in Derek’s talk as compared to Dan Moll’s is that Derek sees a lot of value in using up-front design techniques as conversation starters instead of using the code as the conversation starter. Personally, I agree with him – it’s easier for me to throw out a wireframe than a developer to throw out code.
Or maybe it’s just that if we’re in the stage where I’m making a lot of the decisions, I should also be the one remaking the artifacts as a result.
Always excited to hear @feather speak! Inclusive UX: Techniques for Everyone.
Starting with the Empire Strikes Back. Luke seeks Yoda the Jedi Master. He’s a little bit cocky. He’s underestimating Yoda. And he’s not afraid… but he will be. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
(This is a few seconds longer than the clip that Derek showed.)
There’s alternative storyboard sketches of this same scene. It’s an early prototype of what the finished production is going to be. Quickly done in pencil sketch, then draw the block around it. Direction for the camera man in arrows. Descriptions in the margins. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
There’s so much in the storyboard about how the scene should unfold, a language that’s being used to communicate the direction and filming #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
There’s a ton of Star Wars concept art out in the world. “Production paintings” – has a completely different purpose than the storyboards. More care in the visual aspect, helping us bring the characters to life for wardrobe, make-up, hair, sets, texture, color, surface#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Final produced version is for entertaining and educating. Storyboards are for blocking and instructions. Painting is direction for costuming and set design. They’ll all be used in different ways.
There’s a relationship between these 3 levels of fidelity and the web#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
If we think of the storyboard as the wireframe, which is a discussion and communication between different teams, the painting as the mock, and the final movie as the code, there’s a place for all of them.#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Going straight to code is great but there’s a place for having the conversations at the design stages.
We review wireframes because of their predictive and preventative value. Storyboards help surface disagreements earlier in the process#AEADC— Anne Gibson (@perpendicularme) August 1, 2018
This is not an assembly line. If it were, we’d all be replaced by robots. We’re knowledge workers and we have have the conversations to get to the end product. It’s better to know early that something is or isn’t possible, or there’s disagreement#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Foster disagreement as early as possible.
If we get disagreement at a sketch phase it’s much less costly than in code or in production. There’s a political cost to changing things late, not just a financial cost.Finding an accessibility issue late is costly#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Accessibility is an outcome. It’s a measure of how accessible a thing is. Inclusive design is a process. It’s one way to achieve accessibility. It’s proven, reliable, sustainable. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
“We have a system that someone can’t use, we need to accomodate them, so we create an accommodation”. It’s like a workaround… it’s like a combover. It doesn’t fix the actual problem #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
The oranges debate: one person said pre-peeled oranges shouldn’t be sold. Others spoke up and said “I can’t peel an orange, this is really good for me” #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Original poster: I mean accessibility is nice and all but you know that wasn’t the thinking behind this project. it wasn’t designed for disabled people.
That’s accidentally accessible#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
If you want to read more about the oranges, NPR covered it.
Inclusive UX design:
The intentional facilitation and crafting of the interactions within an ecosystem that incorporates inclusion as a core value.“Incorporating including as a *core value*” is the key. We don’t get to deprioritize it. No “we’ll do that later.” #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
If you have a JIRA from 2,000 days ago that’s marked as “Major” and the keyboard focus still isn’t visible, it’s clearly not a core value.
If you deprioritize accessibility, you’re not incorporating inclusion as a core value. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Techniques:
1. Wireframes are a tool for communication — when they’re annotated.“Code it in this order” is important to note. “Focus path notes” are important.
(@feather I love the fake text in your notes. “Hoodie photo booth” ?) #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
The core value of the wireframe is in the conversation, not in the boxes.
Techniques
2. Reverse-engineering
We can predict things that might happen.
If we had seen a horrible menu at the wireframe stage we’d‘be said “NOPE”.
How can we plan for this better next time?#AEADC— Anne Gibson (@perpendicularme) August 1, 2018
“Push back on all carousels, because we have to.”
(https://t.co/vnrgylRUag is one of my favorite tools.) #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
If we look at something reverse-engineered as a wireframe, we’d see that we need to plan for transcripts and movie navigation and things #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Super tiny carousel dots are bad for everyone, but especially for someone with dexterity issues. They need to be much bigger. We can see this stuff at the wireframe stage – small touch targets, stuff like that#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
As the question, “How could we plan for this earlier?” A lot of it is reverse-engineering to wireframes#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
3. Interaction tables
State, event, interaction, focus change, aria statesA carousel example @feather is showing has 6 rows to describe all of the interactions.
Bill Scott: https://t.co/4X6YrK18t6 Interesting moments in an interaction#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Interaction tables or information about interesting moments: There’s value in the reference and value in creating it together.
4. Practice inclusive design
Gender, race, age, disability, etc. #AEADC— Anne Gibson (@perpendicularme) August 1, 2018
The practice of inclusive design puts you ahead of the curve for the best practices for accessibility that will become a future standard X months from now.
Usability testing results for people with disabilities: fix it now so you don’t have to fix it when WCAG updates#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
What is seen as a “nice to have” now is tomorrow’s standard. WCAG 2.1 has 17 new things that all come from usability testing with people who have disabilities.
1.4.11 – Non-text contrast, for example
2008-2018 last two iterations in the WCAG. More update coming!#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Don’t think of WCAG as a fixed thing. it’s going to continue to evolve.
Color contrast used to apply to only text content. 1.4.11 means your radio buttons (and other elements) have to have enough contrast on the border that you can see them. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
“But it doesn’t say we have to do that in the list” — if you’re using this excuse, you’re messing with your users. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
2.1.4 Character Key Shortcuts
If you build in J/K for navigation, C for Compose, etc. they might interfere with someone’s assistive technology. You need to provide a mechanism to turn them off or reassign them. You can remap Gmail’s shortcuts completely. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
2.5.3 Label in name –
Example – 4 cards that have cars on them. They all have the call to action to flip. If we have those 4 cards and we build the link, we’d have 4 links that say “Flip”.The customer made all 4 links say “Details for [car name]”. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
In this scenario, the “flip” call to action didn’t work for voice recognition controls because the link didn’t say “flip” – change was “flip to see details for [car]”
The visible label for the thing has to be part of the accessible label on the controls#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Design with people with disabilities, not FOR people with disabilities. Usability testing is one of the most important ways to do this. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
color palettes:
“Here’s all our colors”
Great – but what we really need to do is show colors in combination. “Here’s this color and here’s this color and here’s the contrast ratio between them.” #AEADC— Anne Gibson (@perpendicularme) August 1, 2018
building a card that shows good combinations, large-text-only combinations, and combinations to avoid. People need to know why something is bad. #AEADC pic.twitter.com/uO5pbE2ih1
— Anne Gibson (@perpendicularme) August 1, 2018
Be very intentional in describing you design decisions.
“Slide to confirm” interface for a bank.
– feedback
– Needs to be actionable on a screen reader on a mobile device (changed to a double-tap)
– Work with a switch device
– Some tolerance for gross motor #AEADC— Anne Gibson (@perpendicularme) August 1, 2018
They intentionally deigned this to confirm intent, and not to be an action they take all the time. But the double-tap to active on a screenreader is a thing that happens all the time. So it didn’t match the intent. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
3. Interface transformation:
A carousel vs a list or a grid?
On mobile we use carousels and then swipe through them. But someone with low hand strength or fine motor control issues might not find that easy to do. Lists are easier to navigate. Allow the user to switch#AEADC— Anne Gibson (@perpendicularme) August 1, 2018
Offer a grid or a list instead of a carousel. Offer both a list and a grid. Transform interfaces. Toggle switches for different displays help everyone.
Here’s a graph, here’s a toggle switch to just show the data in the graph, here’s a switch for both#AEADC— Anne Gibson (@perpendicularme) August 1, 2018
.current / .active == aria-current
.expanded / .collapsed == aria-expanded
.error == aria-errormessage
.hidden == aria-hidden—@feather #aeadc pic.twitter.com/K0iQv98tNU
— Aaron Gustafson (@AaronGustafson) August 1, 2018
CSS Class name review (for developers)
If you have
Class=“current” or class=“active” you might need the “Aria-current” attribute (new!)Class=“expanded” or “class=“collapsed”
Aria-expanded is your friendClass=“error”
Aria-errormessage = “ID” (coming)#AEADC— Anne Gibson (@perpendicularme) August 1, 2018
Class=“hidden”
Aria-hiddenInstead of embedding your meaning in CSS, embed it in HTML or ARIA. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Check your site against a high-contrast theme in Windows.
CSS background images disappear. Are your menu arrows disappearing in high contrast mode?
Custom radio buttons in example are background images – those are kind of important. In high contrast they’re gone. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Look for things that are meaningful in your visual design and represent them in your visual design. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Gestures: there was a table that if you swiped, it sorted. If you can’t swipe, you still need another mechanism – like the header being toggleable like a button. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Black holes – things that go on forever and ever.
In accessibility terms, saying “page 1 of 2” is a really good idea…. but what if you can’t see how many items are on the page? Tell people if they’re going into a black hole. #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
“Customers who bought this item also bought (16 items)” is a better header
Help answer the question “what happens if I go down this path?” #AEADC
— Anne Gibson (@perpendicularme) August 1, 2018
Don’t just think of how someone gets into something, also think about how they can get out of the thing. If you’re 12 items into a list of 300 items, how do you get out?#AEADC
— Anne Gibson (@perpendicularme) August 1, 2018