Hi, SmashingConf Whistler!

View Github Repository Open presentation in a new window

marcysutton

See all presentation from marcysutton

Hi, SmashingConf Whistler!

0 1

a-web-for-everybody

Slides for my talk at SmashingConf Whistler

On Github marcysutton / a-web-for-everybody

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.

W3C definition

Millions of people have disabilities that affect their use of the Web.

Web accessibility also benefits people without disabilities.

Accessibility is about people.

I like accessibility because it's an innovative challenge that has potential to help people.

A Web for Everybody

Marcy Sutton, Developer @SubstantialAngular.js Accessibility & Material Design

http://bit.ly/smashingconf

We design and build websites, web apps, mobile experiences, digital products, and we take pride in our craft. But sometimes we only build things for ourselves.

Today!

  • Assumptions
  • Accessible UIs
  • Web Components
  • Resources

Assumptions about Users

"Accessibility is a niche, a small audience." "Disabled people don't need a fitness app." "Why would a blind person need a camera?" By considering that a disabled person would have a need for your product, you are a supporter of accessibility.
  • 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

Disabled people are early adopters.

And you know why? Because mobile devices improve quality of life.

Accessibility shouldn't be an afterthought.

Tech Lifelines

  • Social networks
  • Text-to-speech
  • Speech recognition
  • Braille/tactile devices
  • Live captioning
  • Image recognition
  • Accessible maps
Mobile devices improve quality of life. Live Captioning for Glass by Georgia Tech research

Include accessibility from the start.

On inaccessible user interfaces:

"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()">
    Inbox
 </md-button>
Challenge the concept of "interactive". PERCEIVABLE and OPERABLE. Robust. Understandable.

"Semantic" means something.

Adding semantics to components

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

ARIA Core Components

Roles

What does this thing do?

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

States

The current condition of this particular thing

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

Properties

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

Use the simplest abstraction possible.

Don't overdo it with ARIA.

People Will Travel

keyboard demo

Sass

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

    &:hover
      text-decoration: underline

Sass (corrected)

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

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

Handling Focus

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

    peoplePicker.find('button').first().focus();

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

Alerting the User

  <status-bar aria-live="polite"></status-bar>
          
  function statusBarDirective($scope, $element, $attrs) {
    element.attr({
      'role' : 'region'
    });
    $scope.$on('statusUpdated', function(scope, message) {
      $element.html(message.text);
    });
  }

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

The Future is Here

What are Web Components?

Taco buttons for all

Typical Web Component

What is the accessibility problem? SHOW the SOURCE!!!!!

The Accessibility Tree

chrome://accessibility/

Web Components

  • Reusable widgets of your dreams
  • Custom elements
  • Encapsulation
  • Reinventing the Web
  • <div> soup
  • Dependency hell
  • BRB jumping out window
It's about expectations: we expect that it would take no time at all to style and wire up a button. An <md-button> or <core-whatever> should make it as easy as possible to add an interactive element. When it doesn't work by default, we want to flip tables. *Reinventing the wheel

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

Testing Tools

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

We're being told "this is the future of the Web" yet often it's completely inaccessible. Patience vs. making noise. Make it more accessible by building it in to every project, documenting and sharing how you did it. Take it as an innovation challenge.

Thanks, Smashing Conf!

A Web for Everybody@marcysutton / MarcySutton.com