Slide 1

Slide 1 text

Anand Chowdhary Oswald Labs Making your products accessible to everyone

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Government of National Capital Territory of Delhi

Slide 4

Slide 4 text

Standards Customization Cloud & APIs 1 2 3

Slide 5

Slide 5 text

Standards 1 W3C WAI WCAG

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Don’t make any assumptions  about your users.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Semantics Content & labels Color contrast 1 2 3

Slide 13

Slide 13 text

H1!

!  !  !  !  ! HTML Semantics 1 Just using the right markup makes your website accessible on its own.

Slide 14

Slide 14 text

H1!

!  !  !  !  ! HTML lang="en" Tell screen readers which language (and accent) to read in, and help SEO with localization.

Slide 15

Slide 15 text

H1!

!  !  !  !  ! HTML charset="utf-8" Tell the rendering engine which character encoding to use (when in doubt, use UTF8

Slide 16

Slide 16 text

H1!

!  !  !  !  ! HTML The header element provides semantic information: this is the masthead.

Slide 17

Slide 17 text

        !    H1! !  !  !  !  ! HTML

Heading elements are powerful landmarks which help screen readers navigate.

Slide 18

Slide 18 text

H1!

!  !  !  !  ! HTML Finally, this is the main content of your website. Users should be able to skip to this content.

Slide 19

Slide 19 text

List of landmarks on a webpage 7

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Demo: We can find labels using the Accessibility Tree

Slide 23

Slide 23 text

A span with an ID! Inner text! ! HTML Sandbox link: https://codesandbox.io/s/ xenodochial-greider-gg8nq What’s the label for this button? etc.ch/mtCP

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Manually testing accessibility Automated web testing tools

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

[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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Customization 2 Dark theme Reduced motion Even more

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

@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.

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

Demo: Instagram and Facebook use deep learning to generate captions

Slide 40

Slide 40 text

Standards Customization Cloud & APIs 1 2 3

Slide 41

Slide 41 text

Anand Chowdhary Oswald Labs anandchowdhary.com AnandChowdhary

Slide 42

Slide 42 text

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.