Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsible Design: Accountable Accessibility

Responsible Design: Accountable Accessibility

Given from a developer's perspective, this presentation will address the concept of responsible web design as an approach to the authoring of accessible web sites.

This is a talk I gave at CSUN13 this year. I will update this file with a more accessible version asap.

Billy Gregory

March 01, 2013
Tweet

More Decks by Billy Gregory

Other Decks in Programming

Transcript

  1. “Through  code  ownership,  I  became  more   Responsible  for  the

     overall  Design  of  my  code.     I  believed  that  by  holding  myself  Accountable   for  the  end  result,  I  could  directly  improve  the   Accessibility  of  my  work.”     A  tall,  ques5onably  handsome,  man  at  the  front  of  the  room  
  2. As  the  web  shi;ed,  grew,  mutated,  evolved,  matured,  into  

    this  fantas5cally  seman5c  place,  I  began  to  realize  one  simple   fact  about  Accessibility  that  all  developers  should  embrace  …   About me I’m  a  front  end  developer  at  CGI  in  Toronto,  Canada.     I  am  NOT  an  Accessibility  Specialist,  expert,  guru,  ninja,  etc…   What  I  am  is  a  developer  who  has  grown  to  understand  the   importance  of  Accessibility,  not  only  to  those  who  rely  on  it   but  to  the  web  as  a  whole.  
  3. No.

  4. If it worked for me… I like to explain Responsible

    Design using my own story as an example. So, using my not so unique story as an example, let’s start at the beginning…. Not because it’s particularly unique, but because it’s incredibly common.  
  5. 2008 I  had  just  taken  a  job  as  a  front

     end  developer       I  was  being  parachuted  into  the  project  just  a;er  the   templates  had  come  in  from  the  contractor  who  had  been   working  on  them     My  new  employer  had  been  working  with  the  TTC  (Toronto   Transit  Commission)  for  several  months  and  had  just  begun   development  on  the  templates    
  6. ????   Don’t forget to make it accessible! ???? I

    had no idea what accessibility really was.
  7. Trial By Fire Forced  to  learn  the  hard  way  

    For  the  first  5me  in  my  career  I  was  using  HTML   elements,  tags,  and  aUributes  properly   Or  in  some  cases,  for  the  first  5me  at  all.  
  8. My moment of clarity My  work  took  on  a  whole

     new  meaning  to  me…   •  I  realized  that  I  was  building  a  tool,  not  a  sta5c  page   •  My  code  had  a  life  of  it’s  own,  it  wasn’t  there  to  be  READ,  it   was  there  to  be  USED   While  I  never  ques5oned  the  importance  of  accessibility,  I   learned  that  it  was  not  my  job  or  my  right  to  dictate  who  could   use  this  code  or  HOW  
  9. Through Clarity Came Focus I  no5ced  my  skills  as  a

     developer  had  evolved   •  My  focus  was  no  longer  on  making  my  code  match  the  design   •  I  was  carefully  choosing  how  and  why  I  was  coding  every   element  on  the  page,  knowing  it  was  going  to  be  tested  and  I   needed  to  defend  my  choices   As  a  result,  over  a  period  of  5me   •  My  code  had  fewer  errors   •  There  were  less  cross-­‐browser  issues   •  It  was  easier  for  the  back  end  team  to  integrate    
  10. Accessibility in 2008 It was hard enough to get some

    devs to abandon table based layouts let alone embrace semantic code We were still years away from the end of IE6
  11. I tried to speak to the creative department, but they

    didn’t like me questioning their designs
  12. It was tough to get other clients interested in Accessibility

    The most common excuses were that accessibility was “too hard” or “too costly” so it wasn’t included in the spec But, like most devs….
  13. I looked for ways to improve accessibility without involving the

    client, the PM, the designers, or the UX team while not undermining their work The answer was at my fingertips, and right in front of me, all along My code. I was ultimately responsible for the work I was putting out there, there was no one else telling me how to code. I could make it as accessible as I wanted to as long as I didn’t change the look or feel.
  14. DIY a11y I took it on myself to make my

    work more accessible I knew the heart of accessible code, was semantic HTML I read the WCAG document top to bottom Then I read it again. And again. Then I had someone smarter than my translate it into developer speak so I could finally understand it. I learned which points were bound directly to my work and that I had complete ownership over And again.
  15. When good enough stopped being “Good Enough” I approached my

    development process a little differently •  I spent more time planning my code up front, which lead to less time fixing it later •  I questioned everything on the page, I made sure it was documented •  Wireframes became my recipe, I refused to cook without them •  I always assumed at least SOME level of accessibility •  I stopped LOOKING at the designs I was building from, and learned to READ them
  16. Own Your Code … and not just the stuff you

    did right! The real lessons are in the stuff you did wrong Every bug could be a chance to learn something you didn’t know before.
  17. My Top Ten     Over  5me,  I  kept  adding

     to  the  list  of  things  I  could  "get  away"   with  or  had  complete  control  over   1)  Seman5c  mark-­‐up   2)  ARIA  landmark  roles   3)  Lists  and  the  many  ways  we  can  use  them   4)  Skip  links   5)  Focus   6)  Headings   7)  Forms  and  labels     8)  Alt  text   9)  Hidden  text   10) Tes5ng  
  18. By  taking  the  extra  5me  to  carefully  cra;  my  code,

     and   from  taking  full  responsibility  for  what  I  was  pufng  out   for  people  to  use,  I  became  protec5ve  of  my  work.         Figuring  out  what  I  could  do  above  and  beyond  just   wri5ng  the  best  HTML  was  just  natural  progression.        
  19. “Through  code  ownership,  I  became  more   Responsible  for  the

     overall  Design  of  my  code.     I  believed  that  by  holding  myself  Accountable   for  the  end  result,  I  could  directly  improve  the   Accessibility  of  my  work.”     Responsible   Design   Accountable   Accessibility  
  20. Thank you! Billy  Gregory   @thebillygregory   This  presenta5on  couldn’t

     have  been   possible  with  help  from  Ryan  Burgess   @coveredfilth