SlideShare a Scribd company logo
1 of 115
The Great
Accessibility
Bake Off
@cordeliadillon
Tech Lead, Web Accessibility
Design Systems at Dropbox
This morning,
we’re talking about
accessibility!
Making products, services, and
spaces that everyone can use
and enjoy in all contexts,
regardless of their abilities
Visual
Visual Motor
Visual Motor Auditory
Visual Motor Auditory Cognitive
Creating flexible systems that
consider all users’ experiences
from the very start, not just via
tacked-on accommodations
Baking accessibility in
Set Timer
Set Timer
<div
class=“button--primary”
onClick=“setTimer()”>
Set Timer
</div>
Set Timer
<div
class=“button--primary”
onClick=“setTimer()”
tabindex=“0”>
Set Timer
</div>
Set Timer
<div
class=“button--primary”
onClick=“setTimer()”
tabindex=“0”
onKeyDown=“setTimer(e)”>
Set Timer
</div>
Set Timer
<div
class=“button--primary”
onClick=“setTimer”
tabindex=“0”
onKeyDown=“setTimer(e)”
role=“button”>
Set Timer
</div>
Set Timer
<button
onClick=“setTimer()”>
Set Timer
</button>
Set Timer
<button
class=“button--primary”
onClick=“setTimer()”>
Set Timer
</button>
Image sources: http://ind.pn/2qIL6Qp and http://bit.ly/2pCoqDD
Image sources: http://ind.pn/2qIL6Qp and http://bit.ly/2pCoqDD
Image source: https://www.yahoo.com/style/anglophiles-and-baking-enthusiasts-received-a-106546370621.html
Image source: http://ind.pn/2qINXsS
You don’t have to be an
accessibility expert to make
great, accessible UIs.
Image source: https://www.yahoo.com/style/anglophiles-and-baking-enthusiasts-received-a-106546370621.html
Image source: http://ind.pn/2qINXsS
Main Ingredients
You will need...
❏ Semantic HTML
❏ A dash of ARIA
❏ Alt attributes for images
❏ Names for all interactive items
❏ Sufficient text contrast
❏ Mouse-keyboard parity
Web Content Accessibility Guidelines: https://www.w3.org/TR/WCAG20/
Semantic HTML is the
core ingredient for
accessible web UIs.
<button>
<article>
<input>
<table>
<main> <ul>
<nav> <li>
<a href>
<h1> <h2>
<section> <div> <span> <a>
...but as we move from
websites to web apps,
sometimes we need to spice
up our HTML with ARIA.
Accessible Rich Internet Applications
https://www.w3.org/TR/wai-aria-1.1/
Accessible Rich Internet Applications
ARIA can communicate elements’
role, state, and properties to
assistive technology when
semantic HTML won’t suffice.
ARIA can communicate elements’
role, state, and properties to
assistive technology when
semantic HTML won’t suffice.
Use alternative text to
make sure images’
meaning comes through.
Informational: Short, descriptive alt text
<img alt=“Cupcake” src=“icon-final-FINAL.png”/>
Informational: Short, descriptive alt text
<img alt=“Cupcake with cherry on top” src=“cupcake1.png”/>
<img alt=“Cupcake with sprinkles” src=“cupcake2.png”/>
Redundant or decorative: Empty alt text
<img alt=“” src=“icon-final-final.png”/>
<span class=“uppercase”>Cupcakes</span>
CUPCAKES
<svg aria-hidden=“true”>...</svg>
<span class=“uppercase”>Cupcakes</span>
Use good text contrast.
WCAG 2.0 AA Guidelines:
4.5:1 for regular text
3:1 for large text
http://leaverou.github.io/contrast-ratio/
http://wave.webaim.org
Good morning, Respond Conf!
I’m happy to be in Melbourne.
Talking with y’all about baking.
What’s your favorite cake?
Do you say “frosting” or “icing”?
Is quiche a pastry?
Do you like chocolate?
Can you still see me?
Shout “CUPCAKES!” if you can read this.
Good morning, Respond Conf!
I’m happy to be in Melbourne.
Talking with y’all about baking.
What’s your favorite cake?
Do you say “frosting” or “icing”?
Is quiche a pastry?
Do you like chocolate?
Can you still see me?
Shout “CUPCAKES!” if you can read this.
21:1
9.89:1
5.74:1
2.85:1
2.01:1
1.61:1
1.41:1
1.15:1
1.14:1
Judging Criteria
Does it look amazing?
Does it taste amazing?
Is it well-baked?
Does it look amazing?
Does it taste amazing?
Is it well-baked?
Does it look amazing?
Does it function as expected?
Did you over/under-engineer it?
Test everything you make with...
❏ a mouse
❏ a keyboard
❏ a screen reader
❏ multiple screen readers
❏ NVDA + Firefox
❏ JAWS + IE 11
❏ VoiceOver + Safari
❏ grayscale mode
❏ real users!
Signature
Challenge
Subscribe
<input type=“text”/>
<input type=“email” required />
<input type=“checkbox” />
<input type=“submit” value=“Subscribe” />
1. The fields themselves
Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required />
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
2. Associated, visible labels
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
Subscribe
<label for=“name”>Name</label>
<input placeholder=“Name” type=“text”/>
<label for=“email”>Email</label>
<input placeholder=“Email” type=“email”
required />
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
No placeholders as labels
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
Name
Email*
Subscribe
<label for=“name”>Name</label>
<input placeholder=“Name” type=“text”/>
<label for=“email”>Email</label>
<input placeholder=“Email” type=“email”
required />
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
No placeholders as labels
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
Email*
Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required />
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
2. Associated, visible labels
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
3. Visible focus indicators
Subscribe
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
:focus {
outline: none;
}
Don’t just remove default
3. Visible focus indicators
Subscribe
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(103, 78, 167);
}
:focus {
outline: none;
}
Don’t just remove default
Replace it with something!
Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required
aria-describedby=“email-error” />
<span class=“error” id=“email-error”>
Your email…
</span>
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
4. Associated errors
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
Email address must include @ sign.
Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required
aria-describedby=“email-error” />
<span class=“error” id=“email-error”>
Your email…
</span>
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
5. No color reliance
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
Email address must include @ sign.
Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required
aria-describedby=“email-error” />
<span class=“error” id=“email-error”>
Your email…
</span>
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
5. No color reliance
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
Email address must include @ sign.
Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required
aria-describedby=“email-error” />
<span class=“error” id=“email-error”>
Your email…
</span>
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
5. No color reliance
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
Email address must include @ sign.
https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/
Technical
Challenge
Our tried-and-true
semantic HTML isn’t
sufficient in this case.
Let’s follow the given
ARIA recipe.
https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
What do you do if it’s not working?
1. Double check the spec
2. Double check your code
3. Google it
4. Check for known bugs in browsers and screen readers
http://whoseline.a11yideas.com/bugs.html
5. Ask around!
http://web-a11y.herokuapp.com/
http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
Showstopper
Challenge
Think less about the
method and more
about the outcome.
Think less about the
method and more
about the outcome.
Drag-and-drop Move something
Put into buckets
Put into buckets Rearrange lists
Put into buckets Rearrange lists Move on canvas
Put into buckets Rearrange lists Move on canvas
Salesforce’s Opportunity Kanban board
Salesforce’s Opportunity Kanban board
Salesforce’s Opportunity Kanban board
Putting things in buckets
1. Press Space on an item to open a menu of buckets.
2. Press Arrow keys to select a bucket in that list.
3. Press Enter to move item into that bucket.
Inform user of interaction pattern:
“Press space bar to select and move.”
Wait, what about ARIA?
● ARIA 1.0
○ drag-and-drop authoring suggestions
○ aria-grabbed attribute
○ aria-dropeffect attribute
● ARIA 1.1
○ no authoring suggestions
○ aria-grabbed and aria-dropeffect are deprecated
○ (but don’t worry too much!)
https://www.sitepoint.com/accessible-drag-drop/
Putting things in buckets, using ARIA spec
1. Press Space on an item to select it.
2. Optionally Ctrl+Space on other items to multi-select.
3. Press Tab key to select a bucket.
4. Press Enter or Ctrl+M to move item into that bucket.
More specifics:
● ARIA Authoring Practices
● SitePoint’s Drag-and-Drop Tutorial
● WhatSock Training
Dropbox file browsing
Dropbox file browsing
Even more ways to move!
● Delete key for moving things into Trash bins
● Cut, Copy, and Paste support
Positioning on a canvas
x: 100 px 42 pxy:
● Arrow keys
● Input fields
Give users choice
and flexibility.
They’ll decide which methods
are best for them.
Thanks!
@cordeliadillon

More Related Content

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 

Recently uploaded (20)

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 

Featured

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

The Great Accessibility Bake Off (Respond '17)