how accessibility made me a better developer

55
How Accessibility Made Me a Better Developer Billy Gregory @thebillygregory … a developer’s tale

Upload: billy-gregory

Post on 08-May-2015

356 views

Category:

Technology


0 download

DESCRIPTION

This is a longer version of my presentation "Responsible Design: Accountable Accessibility" but with a catchier name :) This talk tells my story of how I went from front end developer who knew nothing about accessibility to an accessibility advocate. Included in this talk are my "10 Tips" that any developer can use on day one without any experience authoring accessible HTML. This talk was originally presented at the Accessibility Conference in Guelph, Ontario, Canada on May 29, 2013.

TRANSCRIPT

Page 1: How Accessibility Made Me a Better Developer

How Accessibility Made Me

a Better Developer

Billy  Gregory@thebillygregory

…  a  developer’s  tale

Page 2: How Accessibility Made Me a Better Developer

Agenda … or why are we here?

• Who  am  I?• My  Journey  into  Accessibility• Ten  “Day  1”  Accessibility  Aps• QuesAons,  Comments,  Your  stories  

Page 3: How Accessibility Made Me a Better Developer

About me…or, who the H#LL is Billy Gregory?

I’m  a  front  end  developer  who’s  passionate  about  digital  accessibility.

I’ve  been  working  in  or  around  digital  accessibility  since  early  2008.

I  was  a  member  of  “Team  Canada”  in  the  Knowbility  Open  Air  CompeEEon  in  2012.

Page 4: How Accessibility Made Me a Better Developer

WE ARE

LOSINGCONTROL!!!

Page 5: How Accessibility Made Me a Better Developer

The Web is EvolvingMore  and  more  demands  are  being  place  on  our  code.

We  can  no  longer  predict  or  control  how  a  user  accesses  our  code

Accessibility  isbecoming  the  law.

Page 6: How Accessibility Made Me a Better Developer

So what do we do?

Page 7: How Accessibility Made Me a Better Developer

My Journey

If  I  can  do  it,  so  can  you.

As  developers,  you  already  possess  many  of  the  required  skills.

…or, if it worked for me…

Page 8: How Accessibility Made Me a Better Developer
Page 9: How Accessibility Made Me a Better Developer

2008I  had  just  taken  a  job  as  a  front  end  developer

My  new  employer  had  been  working  with  the  TTC  (Toronto  Transit  Commission)  for  several  months  redesigning  their  site

Page 10: How Accessibility Made Me a Better Developer

????

Don’t forget to make it accessible!

????

I had no idea what digital accessibility really was.

Page 11: How Accessibility Made Me a Better Developer

Trial By FireForced  to  learn  the  hard  way

For  the  first  7me  in  my  career  I  was  using  HTML  elements,  tags,  and  a@ributes  properly

Or  in  some  cases,  for  the  first  7me  at  all.

Page 12: How Accessibility Made Me a Better Developer

Own Your Code

… and not just the stuff you did right!

The real lessons are in the stuff you did wrong

Page 13: How Accessibility Made Me a Better Developer

Own Your Code

Page 14: How Accessibility Made Me a Better Developer

My moment of clarityMy  work  took  on  a  whole  new  meaning  to  me…• I  realized  that  I  was  building  a  tool,  not  a  sta7c  page• My  code  had  a  life  of  it’s  own,  it  wasn’t  there  to  be  READ,  it  was  there  to  be  USED

Through Clarity Came FocusI  no7ced  my  skills  as  a  developer  had  evolved• 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

Page 15: How Accessibility Made Me a Better Developer

The Project Ended.

Page 16: How Accessibility Made Me a Better Developer

Digital Accessibility in 2008...Was an uphill struggle.

Page 17: How Accessibility Made Me a Better Developer

I tried to speak to the creative department, but they didn’t like me questioning their designs

Yo dawg, I heard you like the color grey…

Page 18: How Accessibility Made Me a Better Developer

The UX team didn’t take too kindly to me suggesting alternative approaches

Yo dawg, I heard you like modals…

So I put a modal…

In your Modal!

Page 19: How Accessibility Made Me a Better Developer

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 documentation.

But, like most devs….

But  isn’t  Accessibility  EXPENSIVE?!...

But isn’tAccessibility

EXPEN$IVE ?!...

Page 20: How Accessibility Made Me a Better Developer

I ignored the documentation.

Page 21: How Accessibility Made Me a Better Developer

DIY a11yI 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 bottomThen I read it again. And again.

Then I had someone smarter than me translate it so I could finally understand.

And again.

I reached out to the accessibility community. #a11y on twitter will yield results.

Page 22: How Accessibility Made Me a Better Developer

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 always assumed at least SOME level of accessibility

• I stopped LOOKING at the designs I was building from, and

learned to READ them

Page 23: How Accessibility Made Me a Better Developer

Try  to  assume  at  least  SOME  level  of  Accessibility

Page 24: How Accessibility Made Me a Better Developer
Page 25: How Accessibility Made Me a Better Developer

Looking at your design

Page 26: How Accessibility Made Me a Better Developer

READING your design

Page 27: How Accessibility Made Me a Better Developer

What YOU see… …isn’t always what they get.

Page 28: How Accessibility Made Me a Better Developer

“You kids today….”  Accessibility  has  come  a  long  way  since  2008.

JQuery  UI  and  other  libraries  have  taken  the  “baked  in”  approach  and  oWen  include  keyboard  support,  WAI-­‐ARIA  and  other  common  accessibility  requirements.

There  are  a  lot  more  tools  available  to  assist  inAccessibility  tesAng.

Page 29: How Accessibility Made Me a Better Developer

But what can I do NOW?...

Page 30: How Accessibility Made Me a Better Developer

 

Day One AccessibilityTips!

Page 31: How Accessibility Made Me a Better Developer

My Top Ten  Over  7me,  I  kept  adding  to  the  list  of  things  I  could  "get  away"  

with  or  had  complete  control  over

1) Language2) Seman7c  mark-­‐up3) Code  Order  /  Tab  Order4) ARIA  Landmark  Roles5) Focus6) Keyboard  control7) Skip  Links8) Form  labels  &  fieldsets9) Alt  text10) “Hidden”  text

Page 32: How Accessibility Made Me a Better Developer

Watch Your Language!  

<html  lang="en">

<html  lang="fr">

1

Page 33: How Accessibility Made Me a Better Developer

Semantic Mark-up  

Make  sure  your  pages  are  Atled  appropriately  and  meaningfully.  • it’s  the  first  thing  a  screen  reader  will  read

Use  elements  for  their  intended  purpose.• Use  bu\ons  as  bu\ons,  lists  as  lists,  tables  as  tables,  etc.

2

USE  HEADINGS!!!

Page 34: How Accessibility Made Me a Better Developer

Semantic Mark-up  

2

Page 35: How Accessibility Made Me a Better Developer

Semantic Mark-up  Tables … Yes. Tables.

Good  use  of  a  table

2

Page 36: How Accessibility Made Me a Better Developer

Semantic Mark-up  Tables … Yes. Tables.

BAD  use  of  a  table

2

Page 37: How Accessibility Made Me a Better Developer

Code Order vs Tab Order  

Code  Order:  The  order  the  elements  are  marked-­‐up  on  the  page

Tab  Order:The  order  in  which  the  elements  on  the  page  receive  focus.

3

Page 38: How Accessibility Made Me a Better Developer

Code Order vs Tab Order

Element Element Element Element

This…

Element Element Element Element

NOT This…

3

Page 39: How Accessibility Made Me a Better Developer

ARIA Landmark Roles  WAI-­‐ARIA

WebAccessibility  IniEaEveAccessibleRichInternet  ApplicaEons

• ARIA  meant  to  help  bridge  the  semanEc  gap  between  screen  readers  and  HTML5

• Landmark  Roles  are  just  the  Ep  of  the  iceberg.  

• Screen  reader  users  can  use  ARIA  landmarks  to  help  navigate  the  page

• Provides  further  semanEc  meaning  to  page  elements

4

Page 40: How Accessibility Made Me a Better Developer

 

ARIA Landmark Roles<header  id=“header”….

<nav  id=“main-­‐navigaAon”  …

<main  id=“main-­‐content”  … <div  id=“right-­‐col”  …

<footer  id=“footer”  …

4

Page 41: How Accessibility Made Me a Better Developer

 

ARIA Landmark Roles<header  id=“header”  role=“banner”….

<nav  id=“main-­‐navigaAon”  role=“navigaAon”…

<main  id=“main-­‐content”  role=“main”  … <div  id=“right-­‐col”  role=“complementary”…

<footer  id=“footer”  role=“contenAnfo”  …

4

Page 42: How Accessibility Made Me a Better Developer

Focus  

In  your  CSS,  for  every  :hover  pseudo  element,  use  the    :focus  pseudo  element• :hover  is  bound  to  the  mouse.  • keyboards  don’t  hover• Don’t  override  the  outline• Use  more  than  color  alone  to  show  the  focus.          text-­‐decoraEon:underline;  is  best.

5

Page 43: How Accessibility Made Me a Better Developer

Focus  

Make  sure  that  when  new  elements  are  opened,  the  focus  shi_s  accordingly.  For  instance,  when  a  user  opens• Modals• Tool  Eps

Be  careful  when  forcing  focus  on  an  element.  • The  user  might  not  be  expecEng  this.• Error  messages  • Search  form  on  a  new  page

5

Page 44: How Accessibility Made Me a Better Developer

Focus  

?

5

Page 45: How Accessibility Made Me a Better Developer

Keyboard Control  

POP QUIZ!…  or  trick  ques7on

QuesEon:Who  among  your  users  might  not  be  using  a  mouse?

Answer:  Anyone!  …It’s  not  up  to  us  to  decide  that  ;)

Example:  Have  you  ever  tabbed  through  a  form  when  you’re  filling  it  out?

6

Page 46: How Accessibility Made Me a Better Developer

Keyboard Control  

Lots of people don’t use a mouse.

6

Page 47: How Accessibility Made Me a Better Developer

Keyboard Control  

Test  that  your  work  can  be  navigated  by  keyboard  alone.  

Look  out  for  “keyboard  traps”  –  make  sure  you  don’t  open  something  that  would  result  in  your  cursor  /  focus  being  behind  an  element  like  a  modal  window.

*I  totally  stole  the  Akbar  thing  from  George  Zamfir  -­‐    @good_wally

6

Page 48: How Accessibility Made Me a Better Developer

Skip Links  • Skip  links  provide  a  means  for  keyboard  users  as  well  as  screen  reader  users  a  way  to  skip  repeated  blocks  of  content

• Skip  links  can  be  used  to  skip  OVER  or  skip  TO  parts  of  a  page.  

• Be  careful  to  move  keyboard  focus  and  not  just  visual  focus  when  adding  skip  links.

7

Page 49: How Accessibility Made Me a Better Developer

 

Skip Links

<main  id=“main-­‐content”  role=“main”  … <div  id=“right-­‐col”  role=“complementary”…

<footer  id=“footer”  role=“contenAnfo”  …

<a  href="#main-­‐content">skip  to  main  content</a>

<ul>  <!–  this  is  a  repeated  block  of  content  -­‐-­‐>  …

7

Page 50: How Accessibility Made Me a Better Developer

Form labels and fieldsets  

8

Page 51: How Accessibility Made Me a Better Developer

Alternative Text  

The  “alt”  aeribute  contains  text  that  describes  an  imagealt=“DescripEve  text  would  go  in  here”  

9

TSA  To  Introduce  New  Security  Measures.BAD  alt  text:alt=“TSA  officer”

GOOD  alt  text:alt=“A  TSA  Agent  looking  into  the  camera  while  snapping  on  a  rubber  glove.”

Page 52: How Accessibility Made Me a Better Developer

“Hidden” Text  

One  of  the  best  pracEces  for  “hiding”  text  off  screen  is  to  use  css  to  visually  remove  text  from  the  code  order  while  sEll  keeping  it  visible  to  screen  readers.

10

Page 53: How Accessibility Made Me a Better Developer

If you build it...

Page 54: How Accessibility Made Me a Better Developer

SomeEmes  it’s  easier  to  beg  forgivenessThan  to  ask  permission  

Page 55: How Accessibility Made Me a Better Developer

Thank you!

Billy  Gregory@thebillygregory