Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

10 Simple Rules for Making My Site Accessible

2,488 views

Published on

From the basic principle that the web should be great for everyone, Chris Albrecht and Helena Zubkow team up to present an informative accessibility demo that will rock your world. The goal of this session is to introduce developers to web accessibility – what it is, why it’s important, and how to build and test sites to make them as accessible as possible.

This includes a demo of how to do things the right way and the wrong way, some great tools, and a walkthrough of basic standards for accessibility.

- Intro - What is web accessibility?
- Why does web accessibility matter?
- Accessibility fundamentals (web accessibility in practice / code demo)
- Web accessibility tools to assess and improve your projects
- Q&A session

Published in: Technology

10 Simple Rules for Making My Site Accessible

  1. 1. 10  Simple  Rules for Making my Site Accessible @ChrisAlbrecht@misshelenasue@Accessibots @AccessibotLilly
  2. 2. 2 10 Simple Rules for Making Your Site Accessible The Accessibots Accessibility  tends  to  be  an  a<erthought  for  most  of  us.  We  make   excuses  like  "it  will  add  too  much  cost  to  the  project,"  or  "I  can't   make  Drupal  do  that,"  or  it  may  be  that  we  simply  don't  know.   That's  where  we  come  in.
  3. 3. 3 -Chris Albrecht- Developer LULLABOT // ACCESSIBOT MOUNTAIN CLIMBER // BEER DRINKER LOVER // DREAMER ! “WHEN LIFE GETS YOU DOWN…MAKE A COMFORTER.” - BO BURNHAM
  4. 4. 4 -Helena Zubkow- Front-­‐end  Developer LULLABOT // ACCESSIBOT CODER // GAMER GOLDEN HEART // TECHNICOLOR SOUL ! “I AM NOT AFRAID… I WAS BORN TO DO THIS.” - JOAN OF ARC
  5. 5. 5 Strategy  //  Design  //  Development We’re an interactive strategy, design, and development company. We create delightful experiences using Drupal and open source technologies.
  6. 6. 6 (probably not deadly neurotoxin) What Awaits You Why? Why  make  websites  accessible? Live Demo Taking  web  accessibility  off  some   sweet  jumps When? PrioriVzing  web  accessibility  to   make  it  happen Amazing Tools Accessibility  tools  and  how  to   use  them How? Including  everyone:     it’s  so  easy! Fabulous Prizes mumble  mumble  some  exclusions   apply  mumble Who? Beneficiaries  and  proponents  of   web  accessibility Resources Code  snippets  and  resources   that  you  can  use
  7. 7. Why  does  web  accessibility  ma]er  anyway? Lesson  1
  8. 8. 8 What’s the Point? Do  the  right  thing.   Protect  against  lost  sales.   It’s  the  law. If There’s Time… The  longer  you  wait,  the  harder  it  will  be   to  implement.    Some  secVons  may  need   complete  overhauls. The Client Doesn’t Care Doesn’t  care  or  doesn’t  know.    As  a   developer  or  project  manager,  it’s  your   responsibility. Who’s it Really For? Visually  Impaired,  Colorblind,  Hearing   Impaired,  CogniVve  Differences,  Motor   Impaired…  and  everyone  else!
  9. 9. 9 Hover  States   &  Focus Are  You  There,   Blog?   ! It's  Me,  Markup. Put  it  on   My  Tab Painless  Page     Titles You're  Out  of   Order!   ! This  Whole  Page  is   Out  of  Order! Keep  Your   Focus NO  CAPTCHAS   If  You  Can Alts,  Titles  and   Bare  Text   ! Oh  My! Skip  it!
  10. 10. 10 Provide a Textual Alternative to Non-Text Content Alts, Titles and Bare Text! Oh My! Images  are  missing  or  have  bad  ALT  a]ributes   Icons  are  used  instead  of  text  links   Vague  links  are  missing  valuable  context What’s the Issue? Why is it Important? Screen  readers  can’t  see  images   Icons  infer  context  for  sighted  users   Images  with  text  can’t  be  read
  11. 11. 11 Provide a Textual Alternative to Non-Text Content Alts, Titles and Bare Text! Oh My! Common Oversights We’ll  go  back  and  fill  in  the  ALT  text  later.   Leave  the  ALT  text  field  off.    It  makes  the  form  too   clu]ered.   Telling  users  the  image  is  an  image.   Not  telling  users  where  a  link  is  taking  them.   Just  going  with  the  Drupal  defaults.
  12. 12. 12 Provide a Textual Alternative to Non-Text Content Alts, Titles and Bare Text! Oh My! Do It in Drupal! Make  the  alt  text  field  required.  This  way  no  one  can   ‘forget’  to  fill  it  in.   Many  accessibility  specialists  are  now  recommending   to  disconVnue  use  of  the  Vtle  tag.
  13. 13. 13 Provide a Textual Alternative to Non-Text Content Alts, Titles and Bare Text! Oh My! Do It in Drupal!
  14. 14. 14 Provide a Textual Alternative to Non-Text Content Alts, Titles and Bare Text! Oh My! Examples Bad  Examples   ! <a  href="/about-­‐us">        <img  src="images/accessibots.png"  alt="The  Accessibots"  />   </a>   ! <a  href="http://www.awesome.com/article359395"  title="The  Most  Amazing  Article   Ever">        The  Most  Amazing  Article  Ever   </a>   !
  15. 15. 15 Provide a Textual Alternative to Non-Text Content Alts, Titles and Bare Text! Oh My! Examples Good  Examples   ! <a  href="/about-­‐us">        <img  src="images/accessibots.png"  alt=“The  Accessibots  Logo  -­‐  Only  You  Can  Prevent   Inaccessible  Websites”/>        <span>Read  about  Helena  &  Chris</span>   </a>   ! <a  href="http://www.awesome.com/article359395">        Read  The  Most  Amazing  Article  Ever  at  Awesome.com   </a>   !
  16. 16. 16 Provide a Textual Alternative to Non-Text Content Alts, Titles and Bare Text! Oh My! Examples Debatable   ! <a  href="http://www.awesome.com/article359395"  title="Read  this  article  at   Awesome.com">        The  Most  Amazing  Article  Ever   </a>   !
  17. 17. 17 Page titles that get to the point Painless Page Titles Page  Vtles  someVmes  appear  a<er  the  site  Vtle   Pages  don’t  have  Vtles What’s the Issue? Why is it Important? That’s  really  annoying  when  using  a  screen  reader,   because  they  have  to  listen  to  the  Vtle  of  your  website   before  they  can  page  through  to  hear  the  page  Vtle.
  18. 18. 18 Page titles that get to the point Painless Page Titles Common Oversights Puong  the  Vtle  of  the  website  before  the  Vtle  of  the  page.   Forgeong  to  provide  a  page  Vtle.
  19. 19. 19 Page titles that get to the point Painless Page Titles Do It in Drupal! Drupal  is  nice  and  does  this  properly  for  you!  Hooray.   Just  don’t  change  it.
  20. 20. 20 Examples Bad  Examples   ! My  Awesome  Site  |  Home   My  Awesome  Site  |  About   My  Awesome  Site  |  Buy  Stuff   ! My  Awesome  Site   My  Awesome  Site   My  Awesome  Site   ! Page titles that get to the point Painless Page Titles
  21. 21. 21 Examples Good  Examples   ! Home  |  My  Awesome  Site   About  |  My  Awesome  Site   Buy  Stuff  |  My  Awesome  Site   ! Page titles that get to the point Painless Page Titles
  22. 22. 22 ‘Get out of Jail Free’ card for Keyboard Users Skip it! NavigaVon  o<en  remains  the  same  from  page  to  page   This  is  annoying  and  repeVVve  for  screen  readers   Something  nice  we  can  do  is  to  provide  a  skip  link What’s the Issue? Why is it Important? No  one  wants  to  hear  the  same  links  read  over  and  over   It  takes  a  long  Vme  to  page  through  to  get  to  the  content
  23. 23. 23 ‘Get out of Jail Free’ card for Keyboard Users Skip it! Common Oversights Who’s  skip?  Why  am  I  linking  to  his  page?   Assume  Drupal  ‘got  it’  without  checking.   Using  Panels  without  configuring  the  skip  link.
  24. 24. 24 ‘Get out of Jail Free’ card for Keyboard Users Skip it! Do It in Drupal! 1. First,  make  sure  that  it’s  linking  to  a  region  that  actually  exists   and  is  lower  in  the  DOM  than  the  nav.     2. Add  tabindex=“0”  to  your  main  region  if  it’s  not  a  naturally   focusable  element.   3. Use  jQuery  to  force  the  focus  past  your  navigaVon  and  land   the  user  at  the  main  content.  Skip  links  will  not  work  in   Chrome  without  this  fix.
  25. 25. 25 Examples ! ! HTML  Setup   html.tpl.php   <a  href="#"  class="skip-­‐link">
            <span  class="skip-­‐link__inner">
                <?php  print  t('Skip  to  main  content');  ?>
            </span>
 </a>   ! page.tpl.php   <div  class="layout__primary"  tabindex="0">   ! ! ! ‘Get out of Jail Free’ card for Keyboard Users Skip it!
  26. 26. 26 Examples Sass  Setup   .skip-­‐link  {
    display:  block;
    position:  absolute;
    background:  $white;
    margin-­‐top:  -­‐25px;
    z-­‐index:  6;
    outline:  none;
    transition:  margin  0.2s  ease;
    font-­‐family:  $roboto;
 
    &:focus  {
        position:  relative;
        margin-­‐top:  0;
        height:  25px;
        color:  $gray-­‐-­‐lightest;
    }
 
    .skip-­‐link__inner  {
        display:  inline-­‐block;
        background:  #812caf;
        padding:  5px  10px  5px  5px;
        border-­‐radius:  0  0  5px;
    }
 }
  27. 27. 27 Examples JS  Setup   /**
  *  Skip  link  configuration
  */
 Drupal.behaviors.skipLink  =  {
    attach:  function  (context,  settings)  {
        $('body',  context).once('skip-­‐link',  function  ()  {
            $('.skip-­‐link').click(function()  {
                $('.layout__primary').focus();
            });
        });
    }
 }; ‘Get out of Jail Free’ card for Keyboard Users Skip it!
  28. 28. 28 Making interactive elements that don’t suck Hovering around the Focus Issue Hover  states  are  awesome!   If  you  don’t  apply  the  styles  to  focus  as  well,  people   who  aren’t  using  a  mouse  can’t  enjoy  them.  :( What’s the Issue? Why is it Important? Everyone  should  get  to  enjoy  the  same  experience.   SomeVmes  hover  states  impart  valuable  informaVon.
  29. 29. 29 Making interactive elements that don’t suck Hovering around the Focus Issue Common Oversights Aren’t  focus  styles  just  for  forms  and  stuff?   Oops,  I  forgot.
  30. 30. 30 Examples Bad  Example   ! .myclass  {        &:hover  {            color:  red;        }    }   ! Making interactive elements that don’t suck Hovering around the Focus Issue
  31. 31. 31 Examples Good  Example   ! .myclass  {        &:hover,        &:focus  {            color:  red;        }    }   ! Making interactive elements that don’t suck Hovering around the Focus Issue
  32. 32. 32 Everything clickable should be tab accessible Put it on My Tab Not  everyone  can  use  a  mouse.  If  your  interacVve   elements  aren’t  focusable  elements,  not  everyone  can   access  them. What’s the Issue? Why is it Important? If  users  can’t  interact  with  elements  on  your  site,  they   may  not  be  able  to  use  it  at  all.
  33. 33. 33 Everything clickable should be tab accessible Put it on My Tab Common Oversights Hamburger  menu  icons  that  are  divs  triggered  by   jQuery  clicks   Items  are  able  to  be  tabbed  to,  but  are  sVll  visually   hidden  (drop-­‐down  menus)
  34. 34. 34 Examples Bad  Example   ! <div  class=“hamburger-­‐icon”></div>   ! Everything clickable should be tab accessible Put it on My Tab
  35. 35. 35 Examples Good  Examples   ! <a  class=“hamburger-­‐icon”>     <span  class=“link-­‐text—-­‐hidden”>Menu</span>   </a>   ! <a  class=“hamburger-­‐icon”>     <span  class=“element-­‐invisible”>Menu</span>   </a>   ! Everything clickable should be tab accessible Put it on My Tab
  36. 36. 36 Using element hierarchies properly YOU’RE OUT OF ORDER! SomeVmes  content  is  intuiVvely  posiVoned  with  CSS,   but  is  out  of  order  in  the  source.   Hierarchy  elements  are  someVmes  abused  for  styling What’s the Issue? Why is it Important? This  makes  it  difficult  for  screenreader  users  to  navigate   your  page  efficiently
  37. 37. 37 Using element hierarchies properly YOU’RE OUT OF ORDER! Common Oversights Using  the  wrong  header  element  because  it  is  a  be]er   font  size  for  that  place  on  the  page.   Using  Drupal's  default  templates.   Arranging  markup  in  a  non-­‐logical  order  to  fulfill  a   layout  requirement.   Not  providing  "Skip  Links"  in  helpful  places  to  allow   screen  readers  to  jump  past  inaccessible  secVons  to   get  to  accessible  versions.
  38. 38. 38 Using element hierarchies properly YOU’RE OUT OF ORDER! Do It in Drupal! Configure  templates  to  use  proper  headings.   Views,  panels  and  blocks  all  allow  this  easily   If  you  need  a  more  specific  template,  add  a  template  suggesVon   in  a  preprocess  hook.   Try  to  uVlize  CSS  layout  tools  like  flexbox  to  arrange  elements  on   the  screen  visually  while  maintaining  the  proper  source  order.   Create  "readable"  versions  of  complex  interacVons  such  as   slideshows  and  graphical  data  and  use  skip  links  to  allow  screen   readers  to  "jump"  to  the  readable  informaVon.  
  39. 39. 39 Examples Bad  Example   ! <h2>Me  &  My  Crappy  Code</h2>   <p  class=“bigger”>How  do  I  feel  about  web  accessibility?</p>   <div>I  love  <h1>coding!</h1>  I  can’t  wait  to  learn  accessibility  so  that  my  sites   aren’t  <h3>annoying</h3>!   </div>   <p  class=“bigger”>I  have  no  idea  how  to  do  this.</p>   <div>What  a  <h1>pain</h1>  for  everybody.</div>   ! Using element hierarchies properly YOU’RE OUT OF ORDER!
  40. 40. 40 Examples Good  Example   ! <h1>Me  &  My  Friendly  Code</h1>   <h2>How  do  I  feel  about  web  accessibility?</h2>   <p>I  love  <strong>coding!</strong>  I’m  so  glad  I  learned  web  accessibility  so  that   my  sites  aren’t  <i>annoying</i></p>   <h2>Why  is  friendly  code  great?</h2>   <p>A  li]le  more  informaVon  about  doing  it  right.</p>   Using element hierarchies properly YOU’RE OUT OF ORDER!
  41. 41. 41 When to Hide, and When to Go Invisible Are You There, Blog? It's Me, Markup. Elements  removed  using  `display:  none`  are  not  picked   read  by  screen  readers. What’s the Issue? Why is it Important? Screen  readers  skip  big  chunks  of  content  and  can’t   interpret  complex  components.
  42. 42. 42 When to Hide, and When to Go Invisible Are You There, Blog? It's Me, Markup. Common Oversights ‘Display:  none’  is  easier.    It’s  a  CSS  property.   jQuery  uses  ‘display:  none’  in  UI  components
  43. 43. 43 Do It in Drupal! When to Hide, and When to Go Invisible Are You There, Blog? It's Me, Markup. Use  Drupal’s  ‘.element-­‐invisible’  to  hide  content  that  should  not  be  visible,  but  sVll   be  read.   Note:  Don’t  use  this  if  your  site  will  be  translated  to  a  right-­‐to-­‐le<  language!   Make  a  class  using  the  opacity  /  font-­‐size  trick  we  talked  about  earlier  to  use   here  instead.   Look  for  accessible  jQuery  plugins  that  support  Aria  Tags   h]p://hanshillen.github.io/jqtest   h]ps://plugins.jquery.com/tag/accessibility   Use  custom  jQuery  events  to  override  the  `display:  none`  css.
  44. 44. 44 Examples Bad  Example   ! <div  id=“accordion”>      <h3>Chapter  1</h3>      <div  class=“block1”>CONTENT!</div>      <h3>Chapter  2</h3>      <div  class=“block2”  style=“display:  none”>INVISIBLE  CONTENT!</div>   </div>   ! When to Hide, and When to Go Invisible Are You There, Blog? It's Me, Markup.
  45. 45. 45 Examples Good  Example   ! <div  id=“accordion”>      <h3>Chapter  1</h3>      <div  class=“block1”>CONTENT!</div>    <h3>Chapter  2</h3>      <div  class=“block2  element-­‐invisible”>INVISIBLE  CONTENT!</div>   </div>   When to Hide, and When to Go Invisible Are You There, Blog? It's Me, Markup.
  46. 46. 46 Do It in Drupal! When to Hide, and When to Go Invisible Are You There, Blog? It's Me, Markup. Drupal  8’s  built-­‐in  accessibility  classes  are  a  li]le  bit  different.  There’s  a  change   noVce  on  drupal.org  that  explains  this  here:  h]ps://www.drupal.org/node/2022859
  47. 47. 47 Examples Bad  Example   ! $(this).slideUp();   When to Hide, and When to Go Invisible Are You There, Blog? It's Me, Markup.
  48. 48. 48 Examples Good  Example   ! $.fn.aSlideUp  =  function(duration,  callback)  {          var  $this  =  $(this);              $this.slideUp(duration,  function()  {              $this.addClass('element-­‐invisble').show();          });    };   When to Hide, and When to Go Invisible Are You There, Blog? It's Me, Markup.
  49. 49. 49 Because not being able to see does not prove that you’re not a human. No CAPTCHAs if You Can CAPTCHAs  are  inaccessible.   CAPTCHAs  don’t  work.   CAPTCHAs  annoy  everyone. What’s the Issue? Why is it Important? It’s  rude  to  tell  people  that  they  aren’t  human  because   they  can’t  pass  a  vision  test.   CAPTCHAs  make  your  site  inaccessible  to  valid  users.
  50. 50. 50 Because not being able to see does not prove that you’re not a human. No CAPTCHAS if You Can Common Oversights My  CAPTCHA  has  an  audio  version,  so  it’s  accessible.   I  need  a  CAPTCHA  to  keep  out  spam  bots,  so  it’s  a   necessary  evil.
  51. 51. 51 Because not being able to see does not prove that you’re not a human. No CAPTCHAS if You Can Do It in Drupal! There’s  a  module  for  that  -­‐  Honeypot   h]ps://www.drupal.org/node/1232638
  52. 52. 52 Focus Indicators Need to Stay On Keep Your Focus Default  focus  indicators  are  someVmes  disabled  for  style   reasons  and  are  not  replaced  with  an  appropriate   subsVtute. What’s the Issue? Why is it Important? Sighted  keyboard  users  need  those  visual  focus   indicators  to  be  able  to  tell  where  they  are  on  the  page.
  53. 53. 53 Focus Indicators Need to Stay On Keep Your Focus Common Oversights What  are  these  weird  blue  lines?   They  don’t  match  my  website  /  I  don’t  like  how  they  look.   The  client  doesn’t  want  them  there.
  54. 54. 54 Examples We  have  three  great  choices  for  focus  indicaVon:   ! 1. Just  leave  them  alone.   2. If  need  be,  style  them!  It’s  okay  to  change  them  a  li]le  to  make  them   fit  with  the  style  of  the  site,  as  long  as  the  change  is  sVll  evident.   3. Use  something  else  altogether  -­‐  as  long  as  it’s  a  noVceable  change   and  it’s  on  everything  that  can  receive  focus.   Focus Indicators Need to Stay On Keep Your Focus
  55. 55. 55 How Do I Test This Stuff? Wave  Tool     h]p://wave.webaim.org/ Color  Oracle     h]p://colororacle.org/ Quail   h]p://quailjs.org/   Drupal  Accessibility  Module   h]ps://www.drupal.org/project/accessibility
  56. 56. 56 h]p://www.accessibots.io The Accessibots Chris Albrecht Developer  //  Technical  PM @ChrisAlbrecht Lilly Bot Mascot @accessibotlilly Helena Zubkow Front-­‐End  Developer @misshelenasue

×