Presented by Scott Davis. His email address is scott@thirstyhead.com. His Twitter handle is @scottdavis99.

Scott Davis' Biography

Hi! My name is Scott Davis. I'm currently a Principle Engineer with ThoughtWorks. Before that, I ran a software consultancy out of Denver, Colorado called ThirstyHead.

I've been writing about web development for years -- articles for IBM, books for O'Reilly and the Pragmatic Bookshelf, and most recently videos for O'Reilly as well.

The definition of a11y

Web a11y web search

Why bother with a11y?

Universal Design Project

TimBL on Universality

HTML 5.2 Spec

The Paciello Group

 

Curb Cut

Curb Cut

Curb Cut Original

The Curb Cut Effect

Accessibility improves
everyone's experience,

not just those with a disability.

https://www.colorado.edu/
accessibility/universal-design

CU A11y Bad

https://www.colorado.edu/
accessibility/universal-design

CU A11y Better

King Sooper

ADA Winn Dixie

ada-website-lawsuits-2018

ADA Blick Art

A11y

 

Alan Perlis - Not Worth Knowing

HTML Spec - Semantics

Semantics

HTML Spec - TOC

Bread Recipe in basic HTML


    <h1>No Knead Bread</h1>
    <p>No kneading required, 4 simple ingredients, baked 
    in a Dutch Oven. The result is simple perfection, hands 
    down the best bread you'll ever eat!</p>

    <h2>Ingredients</h2>
    <ul>
      <li>3 cups all-purpose flour</li>
      <li>1 3/4 tsp salt</li>
      <li>1/2 tsp active dry yeast</li>
      <li>1 1/2 cups water room temperature</li>
    </ul>

Bread Recipe - Rendered

HTML Spec - H1

HTML Spec - H1

Styling vs Semantics

If I use CSS and a <style> element to make our <h2> elements appear larger than our <h1>, does it change the semantics as well?


<head>
  <style>
    h1{
      font-size: 1em;
    }

    h2{
      font-size: 2em;
    }
  </style>
</head>

<body>
  <h1>No Knead Bread</h1>
  [snip]

Bread CSS

HTML Spec - H1

Apple VoiceOver

my-captions.vtt

WEBVTT
Kind: captions
Language: en-US

00:00:05.000 --> 00:00:12.000
[Triple-click]

00:00:17.000 --> 00:00:25.000
[Two fingers - spin 'invisible' knob on screen]
index.html

<video src="video.mov" controls>
  <track kind="captions" 
         src="my-captions.vtt" 
         srclang="en" 
         label="English" >
</video>


<script>
  window.addEventListener('load', init);

  function init(){
    let b = document.querySelector('button');
    b.addEventListener('click', readIntro);
  }

  function readIntro(event){
    let paragraphs = document.querySelectorAll('p');
    for(let p of paragraphs){
      let msg = new SpeechSynthesisUtterance(p.innerText);
      window.speechSynthesis.speak(msg);
    }
  }
</script>
<button>Read</button>

Tensorflow Posenet

Tensorflow Posenet Alexa

 

Browser Market Share - Mar 2019

Browser Market Share - Mar 2019

World Disability Percentage

A11y WebAim Analysis

A11y WebAim Analysis

A11y WebAim Analysis

A11y WebAim Analysis

MDN - Span

A11y WebAim Analysis

HTML Spec - Semantics

TimBL on Universality

 

The definition of a11y

Why bother with a11y?

Universal Design Project

A11y

Presented by Scott Davis. His email address is scott@thirstyhead.com. His Twitter handle is @scottdavis99.