Web Accessibility

Accessibility Webaim          This  is  a  pre-y  prolific  site  that  has  a  cool  li-le  toolbar  to  install  to  your  bowser.      It’s  called  Wave.  It’s  a  great  tool,  but  it  is  also  easy  to  fool.    Just  because  your  site  passes  with  no  accessibility  errors,  does  not  mean  it’s  accessible.    It  only  means  it  technically  meets  minimum  requirements.          Colorblindness  Simulators                  WeAreColorBlind  –  This  tool  is  pre-y  high  level,  but  it  gives  you  a  good  idea  about  the  need  for  consideraFon  to  you  color  blind  audience.    Color  contrast  is  important,  and  there  are  a  few  great  examples  of  the  right  and  wrong  way  to  display  your  data,  when  considering  a  color  blind  audience.    CDAC  –  Digital  Accessibility  Center  CDAC  provides  a  number  of  services  that  vary  based  on  the  type  of  web  content.    StaFc,  content  managed  and  dynamic  web  sites  can  benefit  from  our  accessibility  review  service.    Rich  media  content,  such  as  MicrosoK  Word  documents,  Adobe  Acrobat  PDF  files  and  mulFmedia  can  benefit  from  our  review  services.    

Image  Alt  Text  

Alt=  Screen  shot  of  CQ5  text/image  component  alt  text  and  advanced  seRngs  dialog  box  

Alt  text  in  Word  2011  &  2012  Alt  text  in  PDF    

(using  Adobe  Acrobat  Pro)  

Alt  Text  Everywhere  

Alt  Text  Resources  

•  W3C  Techniques  for  providing  useful  text  alternaFves  h-p://www.w3.org/TR/html-­‐alt-­‐techniques/  

•  NCAM  EffecFve  pracFces  for  describing  science  content  h-p://ncam.wgbh.org/experience_learn/educaFonal_media/stemdx  

Notate  Links  to  Documents  

•  When  linking  to  a  word  document,  PDF  or  other  file,  make  sure  to  note  in  your  link  what  the  document  is  and  hyperlink  that  notaFon  

 Fill  out  the  Camp  Counselor  ApplicaFon  (PDF)    Register  for  Volunteer  Weekend  (Word  Doc)    

Proper  Headings  

<h1>Main  heading/Ftle  of  the  page</h1>          <h2>Secondary  heading</h2>                <h3>First  subheading  in  this  secFon</h3>                <h3>Second  subheading  in  this  secFon</h3>          <h2>Another  secondary  heading</h2>  

Proper  Headings  Example  

<h1>ApplicaFon  Process          <h2>Undergraduate  Admission      <h3>Admission  Requirements      <h3>  ApplicaFon  Process    <h2>Graduate  Admission</h2>      <h3>OU  Graduate  College  Requirements  

               <h3>College  of  Blank  Requirements    

Headings  For  All  Docs…  Not  Just  Web  

Headings  even  (especially)    in  PDF!  

Speaking  of  PDFs…..  

Create  Accessible  PDFs  

•  Not  all  PDFs  are  equal:    –  Image  PDFs  – PDFs  with  text,  but  no  structure    – Tagged  PDF  (the  only  accessible  type)  

•  Can  create  an  accessible  PDF  from  scratch    – Using  a  tool  that  supports  tagged  PDF  (e.g.,  Word)  – Save  as  tagged  PDF  

•  Can  fix  an  inaccessible  PDF  using  Adobe  Acrobat  Pro  

Fixing  PDFs  in  Acrobat  Pro  

1.   Convert  to  text  (if  needed)  2.  Add  tags  to  document  (if  needed)  3.  Touch  up  reading  order,    

add  alt  text  to  images  4.  Check/correct  headings  and  other  tags  5.  Create  links  from  URLs  (if  needed)  6.  Define  document  language  7.  Run  an  accessibility  check  

PDF  Accessibility  Resources  

h-p://uw.edu/accessibility/pdf.html  •  Includes  workflows  for:  – Making  a  PDF  accessible  from  scratch  –  ExporFng  from  Word  to  tagged  PDF  –  Repairing  and  creaFng  inaccessible  PDFs  and  PDF  forms  using  Acrobat  Pro  

PDFs  are  great  for  documents  where:    •    Appearance  is  criFcal.  Document  must  be  the  same  across  all  plaoorms.    

•  Security  is  criFcal.  Document  requires  encrypFon,  digital  signatures,  watermarks,  etc.    

Mark  Up  Tables  Appropriately  Include  markup  that  clearly  communicates  the  relaFonship  between  table  headers  and  the  cells  within  their  scope:  

Color  Contrast  Checker  WCAG  2.0  Level  AA:    – Contrast  raFo  of  4.5:1  for  normal  text  – or  3:1  for  large  text  (18  pt  or  14  pt  bold)  

WCAG  2.0  Level  AAA:    – Contrast  raFo  of  7:1  for  normal  text  – Or  4.5:1  for  large  text  

Color  Contrast  Example  h-p://www.paciellogroup.com/resources/contrast-­‐analyser.html  

Respect  white  space  

•  Space  between  lines    •  Space  between  paragraphs    •  Can  help  users  who  have  difficulty  tracking  text  horizontally.    

•  Contributes  to  a  cleaner,  more    aestheFcally  pleasing  interface  for  everyone.    

 

Clean  &  Simple  is  Good  

Use  Text,  Not  Pictures  of  Text  

•  Pictures  become  blurry  when  enlarged  •  Pictures  take  longer  to  download  •  Pictures  that  contain  text  are  not  readable  on  a  screen  reader  

•  Text  in  an  image  is  not  searchable  

Think  Twice  About  the    Words  You  Choose  •  Word  length  and  sentence  complexity  have  an  effect  on  the  ability  of  certain  individuals  to  decode  the  words  on  a  page.  

•  Juicy  Studio  Readability  Test:  h-p://juicystudio.com/services/readability.php    

•  Struggling  with  Understandability:    h-p://terrillthompson.com/blog/10  

Make  Text  Easier  to  Read  

•  Understandable  à  “easier  to  read”  •  Manipulated  à  Changed  •  Subsequently  à  Later  •  “TesFmonials  from  individuals  with  disabiliFes…”  à    “People  with  disabiliFes  talk  about…”  

Become a Closed Captioning Master 3  Common  terms  to  know:  •  .SRT  File  common  subFtle  file  that  has  the  Fmecode  

and  text  •  Video  Hos/ng  Site  this  site  is  a  3rd  party  site  where  

your  video  lives  (i.e.  YouTube  or  Vimeo).  For  every  video  you  upload  you  will  have  a  URL  

•  CC  the  abbreviaFon  for  Closed  CapFoning  CC  on  YouTube  You  want  to  host  your  video  through  a  service  like  YouTube.  Use  a  capFoning  service  like  Overstream.net,  CapFonTube  or  Amara  to  generate  your  capFoning  file.  

Closed Captioning

Closed Captioning

Closed Captioning

Closed Captioning

Closed Captioning

•  Don’t  forget  to  describe  content  that  is  otherwise  only  accessible  to  people  who  can  see  it.  Examples:  – Words  on  the  screen    – CriFcal  acFons    – Other  criFcal  details  about  the  seRng,  etc.    

•  Script  the  descripFon  •  Sync  descripFon  with  the  video.  

   

 

 

h-p://listeningislearning.org/background_what-­‐is-­‐descripFon.html  

Get Involved

•  Follow  #a11y  on  Twi-er  •  Contact  the  Disability  Resource  Center  and  get  involved  with  the  Web  Accessibility  Higher  EducaFon  project  

•  EDUCAUSE  IT  Accessibility  ConsFtuent  Group  – Working  to  get  accessibility  on  the  radar  of  EDUCAUSE,  CIO’s,  and  other  IT  Leaders    

– h-p://educause.edu/groups/itaccess    

 

Test Content on Mobile Device •  71.8%  of  screen  reader  users  now  use  a  screen  reader  on  a  mobile  device    Source:  WebAIM  Screen  Reader  User  Survey  #4:  h-p://weba.im/survey4  

•  Test  on  iPhone  using  VoiceOver.  Some  Fps:  h-p://webaim.org/arFcles/voiceover/  

Test on Screen Reader

•  JAWS  h-p://freedomscienFfic.com/products/fs/jaws-­‐product-­‐page.asp  

•  Window-­‐Eyes  h-p://www.gwmicro.com/Window-­‐Eyes/  

•  NVDA  (Free!)    h-p://www.nvda-­‐project.org  

•  VoiceOver  (built  in  to  Mac  OS  X  and  iOS)  h-p://www.apple.com/accessibility/voiceover/