A Web for Everybody by Marcy Sutton

Hi, SmashingConf Whistler!

What if you couldn't:

  • do ski ballet
  • use a mouse
  • see the screen
  • perceive colors
  • hear audio content

Web Accessibility

Everyone can perceive, understand, navigate, and interact with the Web, and they can contribute to the Web.

Accessibility is about people.

A Web for Everybody

Marcy Sutton, Developer @Substantial
Angular.js Accessibility & Material Design



  • Assumptions
  • Accessible UIs
  • Web Components
  • Resources

Assumptions about Users

  • Disabled people cook.
  • Disabled people travel.
  • Disabled people work out.
  • Disabled people drink whiskey.
  • Disabled people take pictures.
“The tree is done! Pic courtesy of BlindChick photography…bad focus is strictly the blind girl’s fault.” Sarah Outwater on Facebook
Christmas tree

Disabled people are
early adopters.

Tech Lifelines

  • Social networks
  • Text-to-speech
  • Speech recognition
  • Braille/tactile devices
  • Live captioning
  • Image recognition
  • Accessible maps

Include accessibility
from the start.

On inaccessible user interfaces:

@marcysutton Here’s the thing: The web is accessible by nature. We developers turn off features. Why? Somehow we still don’t know our tools. Dale Cruse (@dalecruse)November 20, 2014

"Interactive" means something.

  • cursor: pointer;
  • element.on('click')
  • outline: none;

Enable the keyboard!

 <core-item style="cursor:pointer;">Inbox</core-item> // NOPE.

 <button ng-click="clickHandler()">Inbox</button> // YEP!

 <md-button role="button" tabIndex="0"
    ng-click="heckYeah()" ng-keypress="heckYeah()">

"Semantic" means something.

Generic vs. semantic HTML

Adding semantics
to components

  • Use native elements
  • Add ARIA attributes
  • Extend native elements*

ARIA Core Components


What does this thing do?

   <div role="img" style="background-image..."


The current condition of this particular thing

        <md-input aria-disabled="true"...


      <md-checkbox aria-label="Subscribe"...

Use the simplest abstraction possible.

Don't overdo it with ARIA.

People Will Travel

keyboard demo


  .navlist--main > li > a
    color: $white
    display: block

      text-decoration: underline


Sass (corrected)

  .navlist--main > li > a
    color: $white
    display: block

    &:hover, &:focus
      text-decoration: underline


Let’s Try This Again

Accessible Scroll UI Demo

Handling Focus

 $scope.$watch('airportIsSelected', function(newValue){
      scrollTop: peoplePicker.offset().top
    }, 600);


    $rootScope.$broadcast('statusUpdated', self.selectedAirport);

Alerting the User

  <status-bar aria-live="polite"></status-bar>

  function statusBarDirective($scope, $element, $attrs) {
      'role' : 'region'
    $scope.$on('statusUpdated', function(scope, message) {

Whiskey Business


Focus Management

 class App.FocusManager
   constructor: ->
     $('body').on 'focusin', (e) =>
       @oldFocus = $(e.target)

     App.bind 'rendered', (e) =>
       return unless @oldFocus
       @_focusById() if @oldFocus.data('focus-id')

   _focusById: ->
     focusId = @oldFocus.data('focus-id')
     newFocus = document.querySelector("##{focusId}")
     MyApp.focus(newFocus) if newFocus

Responsive Images

  <div role="img" style="background: url(corner-creek.gif)"
       aria-label="Corner Creek Kentucky Bourbon"></div>

       [role=img] {
         background-size: cover;
         background-position: center right;
         height: 100%;
         width: 100%;

Codepen Experiment

Ostrich skiing

The Future is Here

WebComponents.org redesigned with tacos

Taco buttons for all

@marcysutton @stevefaulkner I think that button is=

Typical Web Component

Listbox Web Component

The Accessibility Tree

Chrome Accessibility tree for Listbox Web Component

Web Components

  • Reusable widgets of your dreams
  • Custom elements
  • Encapsulation
  • Reinventing the Web
  • <div> soup
  • Dependency hell
  • BRB jumping out window

Is your element accessible?

  • Can you use your element with the keyboard only?
  • Can you use your element with a screen reader?
  • Can your element work without sound?
  • Can it work without color?
  • Can your element work with high-contrast mode enabled?

Source: Accessible Web Components, Part 1

Revisiting the Basic List Box

Accessible Listbox Web Component

Testing Tools


It's up to us to make the Web more accessible.

Thanks, Smashing Conf!

Dog on skis