Making your products accessible to everyone

Anand Chowdhary Oswald Labs Making your products accessible to everyone

2008 Published my first website to the web Using a
.co.nr free domain name 2016 Founded Oswald Labs Started doing R&D in accessibility technology 2018 Forbes 30 Under 30 Also featured in 30 articles and interviews

Government of National Capital Territory of Delhi

Standards Customization Cloud & APIs 1 2 3

Standards 1 W3C WAI WCAG

W3C WAI WCAG World Wide Web Consortium Web Accessibility Initiative
Web Content Accessibility Guidelines

329M Population of the  United States (2019 1 3 700M
Lower estimate of number of dyslexics Upper estimate is as high as 1.4 billion 2 DY S L E X I A

1B Estimated number of people with disabilities 4 OT H
E R   D I SA B I L I T I E S 3 700M Lower estimate of number of dyslexics Upper estimate is as high as 1.4 billion 2 DY S L E X I A

Don’t make any assumptions  about your users.

My setup at home 13” MacBook Air My setup at
work 15” MacBook Pro with a monitor, keyboard, mouse

INPUT Mouse Keyboard Dictation Optical tracking Sip-and-puff OUTPUT Screen Screen
reader Braille Voice UI

Semantics Content & labels Color contrast 1 2 3

<!doctype html>  <html lang="en">  <head>  <meta charset="utf-8">  !</head>  <body>  <header>
<h1>H1!</h1> !</header>  <main>!</main>  <footer>!</footer>  !</body>  !</html> HTML Semantics 1 Just using the right markup makes your website accessible on its own.

<!doctype html>  <html >  <head>  <meta charset="utf-8">  !</head>  <body>  <header>
<h1>H1!</h1> !</header>  <main>!</main>  <footer>!</footer>  !</body>  !</html> HTML lang="en" Tell screen readers which language (and accent) to read in, and help SEO with localization.

<!doctype html>  <html lang="en">  <head>  <meta >  !</head>  <body>  <header>
<h1>H1!</h1> !</header>  <main>!</main>  <footer>!</footer>  !</body>  !</html> HTML charset="utf-8" Tell the rendering engine which character encoding to use (when in doubt, use UTF8

<!doctype html>  <html lang="en">  <head>  <meta charset="utf-8">  !</head>  <body>  <h1>H1!</h1>
!</header>  <main>!</main>  <footer>!</footer>  !</body>  !</html> HTML <header> The header element provides semantic information: this is the masthead.

H1!</h1> !</header>  <main>!</main>  <footer>!</footer>  !</body>  !</html> HTML <h1> Heading elements are powerful landmarks which help screen readers navigate.

<h1>H1!</h1> !</header>  !</main>  <footer>!</footer>  !</body>  !</html> HTML <main> Finally, this is the main content of your website. Users should be able to skip to this content.

List of landmarks on a webpage 7

Content & labels 2 Reading level: 80 word paragraphs in
high-school level Internationalization: Multi-lingual content availability Alternate text: Add alternate text to visual elements Captioning: Use [CC for media elements

Demo: We can find labels using the Accessibility Tree

<button alt="Alternate text" title="Title text" aria-label="ARIA label" aria-labelledby="#ref" > <span
id="ref">A span with an ID!</span> <span>Inner text!</span> !</button> HTML Sandbox link: https://codesandbox.io/s/ xenodochial-greider-gg8nq What’s the label for this button? etc.ch/mtCP

Use both labels and icons Not everyone will understand the
metaphor Labels help people with visual impairments Icons help unlettered people (Shravan example) Use empty alternate text for icon images

Color contrast 3 4.51 Level AA 71 Level AAA 21
Links & text A A A

Manually testing accessibility Automated web testing tools

Manually testing accessibility SCREEN READERS VoiceOver JAWS NVDA SCREEN READERS
ChromeVox TalkBack Microsoft Narrator

Automated testing tools EXTENSIONS Lighthouse WAVE a11y.css CLI UTILITIES A11y
Pa11y Axe

Demo: We can find issues on the WWCode Cloud site
using Lighthouse

[aria-hidden], .sr-only, display: none Remove a node from the Accessibility
tree with aria- hidden, but show it to sighted users Hide a node from sighted users, but keep it in the Accessibility tree with .sr-only display: none is a combination, but stays in DOM

1B Estimated number of people with disabilities 4 P E
O P L E W I T H   D I SA B I L I T I E S 7.7B Estimated number of people on Earth 6 WO R L D   P O P U L AT I O N

Customization 2 Dark theme Reduced motion Even more

@media (prefers-color- scheme: dark) {  .dark-mode-screen {  width: 100vw;  height:
100vh; position: fixed;  top: 0;  left: 0;  background: white;  mix-blend-mode: difference;  }  } CSS Simple dark theme example Source link: https://dev.to/wgao19/night-mode- with-mix-blend-mode-difference-23lm

@media (prefers-reduced- motion: reduce) {  * {  transition: none !
important;  animation: none ! important;  } } CSS Simple reduced motion example https://github.com/AnandChowdhary/prefers- reduced-motion tells you the same in JS.

Cloud & APIs 3 USE CASES Read aloud AutoALT Translation
CLOUD APIS AWS Polly, GCP Azure Vision Oswald Labs Platform

async captionIt() {  const images =   document.  querySelectorAll(  "img:not([alt])" 
); images.forEach(img !=> {  img.setAttribute(  "src",  await caption(img);  );  });  } JAVASCRIPT Simple AutoALT using Cloud API Oswald Labs Platform APIs make it easy to generate image captions using deep learning.

async caption(img) {  const f = await fetch(  `${BASE_URL}?url=${ img.getAttribute( 
"src"  );  }`  );  return  (await f.json())  .caption;  } JAVASCRIPT Simple AutoALT using Cloud API Oswald Labs Platform APIs make it easy to generate image captions using deep learning.

Demo: Instagram and Facebook use deep learning to generate captions

Standards Customization Cloud & APIs 1 2 3

Anand Chowdhary Oswald Labs anandchowdhary.com AnandChowdhary

References 1.The population of the United States is 329,679,329 on
September 20, 2019, according to the U.S. Census Bureau’s population clock available at https://www.census.gov/popclock/. 2.The lower limit for the number of people with dyslexia is 10% of the world population according to the sentence “Researchers estimate that dyslexia affects at least one in 10 people” on https://www.sreb.org/blog-post/dont- be-afraid-say-dyslexia. 3.The upper estimate for the number of people with dyslexia is 20% of the world population, as stated in the sentence “According to a Yale study 1 out of 5 people suffer from dyslexia” on https://www.edubloxtutor.com/ facts-about-dyslexia/. 4.According to the World Bank, “One billion people, or 15% of the world’s population, experience some form of disability” https://www.worldbank.org/en/topic/disability 5.The A, AA, and link color contrast ratio requirements, along with the WCAG, are available at https://www.w3.org. 6.The world population as of September 28, 2019, is 7.733 billion according to https://worldmeters.info. 7.Image for list of landmarks on a webpage: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.120171214/ examples/landmarks/images/landmarks-vo.png.

Making your products accessible to everyone

Making your products accessible to everyone

More Decks by Anand Chowdhary

Other Decks in Technology

Featured

Transcript