SlideShare a Scribd company logo
How Accessibility
Made Me
a Better Developer
Billy	
  Gregory
@thebillygregory
…	
  a	
  developer’s	
  tale
Agenda … or why are we here?
• Who	
  am	
  I?
• My	
  Journey	
  into	
  Accessibility
• Ten	
  “Day	
  1”	
  Accessibility	
  Aps
• QuesAons,	
  Comments,	
  Your	
  stories	
  
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.
WE
ARE
LOSING
CONTROL!!!
The Web is Evolving
More	
  and	
  more	
  demands	
  are	
  
being	
  place	
  on	
  our	
  code.
We	
  can	
  no	
  longer	
  predict	
  or	
  control	
  
how	
  a	
  user	
  accesses	
  our	
  code
Accessibility	
  is
becoming	
  the	
  law.
So what do we do?
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…
2008
I	
  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
????
Don’t forget
to make it
accessible!
????
I had no idea what digital accessibility really was.
Trial By Fire
Forced	
  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.
Own Your Code
… and not just the
stuff you did right!
The real lessons
are in the stuff
you did wrong
Own Your Code
My moment of clarity
My	
  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 Focus
I	
  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
The Project Ended.
Digital Accessibility in 2008
...Was an uphill struggle.
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…
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!
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’t
Accessibility
EXPEN$IVE ?!...
I ignored the
documentation.
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 me translate it so I
could finally understand.
And again.
I reached out to the accessibility community.
#a11y on twitter will yield results.
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
Try	
  to	
  assume	
  at	
  least	
  
SOME	
  level	
  of	
  Accessibility
Looking at your design
READING your design
What YOU see…
…isn’t always what they get.
“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	
  in
Accessibility	
  tesAng.
But what can
I do NOW?...
 
Day One
Accessibility
Tips!
My Top Ten
	
  Over	
  7me,	
  I	
  kept	
  adding	
  to	
  the	
  list	
  of	
  things	
  I	
  could	
  "get	
  away"	
  
with	
  or	
  had	
  complete	
  control	
  over
1) Language
2) Seman7c	
  mark-­‐up
3) Code	
  Order	
  /	
  Tab	
  Order
4) ARIA	
  Landmark	
  Roles
5) Focus
6) Keyboard	
  control
7) Skip	
  Links
8) Form	
  labels	
  &	
  fieldsets
9) Alt	
  text
10) “Hidden”	
  text
Watch Your Language!
	
  
<html	
  lang="en">
<html	
  lang="fr">
1
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	
  buons	
  as	
  buons,	
  lists	
  as	
  lists,	
  tables	
  as	
  
tables,	
  etc.
2
USE	
  HEADINGS!!!
Semantic Mark-up
	
  
2
Semantic Mark-up
	
  
Tables … Yes. Tables.
Good	
  use	
  of	
  a	
  table
2
Semantic Mark-up
	
  
Tables … Yes. Tables.
BAD	
  use	
  of	
  a	
  table
2
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
Code Order vs Tab Order
Element Element Element Element
This…
Element Element Element Element
NOT This…
3
ARIA Landmark Roles
	
  
WAI-­‐ARIA
Web
Accessibility	
  
IniEaEve
Accessible
Rich
Internet	
  
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
 
ARIA Landmark Roles
<header	
  id=“header”….
<nav	
  id=“main-­‐navigaAon”	
  …
<main	
  id=“main-­‐content”	
  … <div	
  id=“right-­‐col”	
  …
<footer	
  id=“footer”	
  …
4
 
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
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
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
Focus
	
  
?
5
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
Keyboard Control
	
  
Lots of
people don’t
use a mouse.
6
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
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
 
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
Form labels and fieldsets
	
  
8
Alternative Text
	
  
The	
  “alt”	
  aeribute	
  contains	
  text	
  that	
  describes	
  an	
  image
alt=“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.”
“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
If you build it...
SomeEmes	
  it’s	
  easier	
  
to	
  beg	
  forgiveness
Than	
  to	
  ask	
  permission	
  
Thank you!
Billy	
  Gregory
@thebillygregory

More Related Content

What's hot

Responsive Design Overview for UB CIT
Responsive Design Overview for UB CITResponsive Design Overview for UB CIT
Responsive Design Overview for UB CIT
Adrian Roselli
 
Html5 public
Html5 publicHtml5 public
Html5 public
doodlemoonch
 
Selfish Accessibility: UXSG 2014
Selfish Accessibility: UXSG 2014Selfish Accessibility: UXSG 2014
Selfish Accessibility: UXSG 2014
Adrian Roselli
 
Accessibility is not disability Drupal South 2014
Accessibility is not disability Drupal South 2014Accessibility is not disability Drupal South 2014
Accessibility is not disability Drupal South 2014
Gareth Hall
 
WordPress Blogs 101
WordPress Blogs 101WordPress Blogs 101
WordPress Blogs 101
Tom McGee
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone Wild
Jared Smith
 
Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013
Adrian Roselli
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
Emily Lewis
 
Intro to jQuery for Drupal
Intro to jQuery for DrupalIntro to jQuery for Drupal
Intro to jQuery for Drupal
jhamiltoorion
 
Making Web Accessibility Sexy
Making Web Accessibility SexyMaking Web Accessibility Sexy
Making Web Accessibility Sexy
Ann McMeekin Carrier
 
Wordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelmanWordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelman
H. Trevor Johnson-Steigelman
 
Developers: Why Care About the User? (2017)
Developers: Why Care About the User? (2017)Developers: Why Care About the User? (2017)
Developers: Why Care About the User? (2017)
Andrew Malek
 
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Robert Jolly
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
Thinkful
 
Why Nobody Fills Out My Forms (Updated)
Why Nobody Fills Out My Forms (Updated)Why Nobody Fills Out My Forms (Updated)
Why Nobody Fills Out My Forms (Updated)
Andrew Malek
 
HTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the funHTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the fun
Sarah Dutkiewicz
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
Chris Mills
 

What's hot (18)

Responsive Design Overview for UB CIT
Responsive Design Overview for UB CITResponsive Design Overview for UB CIT
Responsive Design Overview for UB CIT
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Selfish Accessibility: UXSG 2014
Selfish Accessibility: UXSG 2014Selfish Accessibility: UXSG 2014
Selfish Accessibility: UXSG 2014
 
Accessibility is not disability Drupal South 2014
Accessibility is not disability Drupal South 2014Accessibility is not disability Drupal South 2014
Accessibility is not disability Drupal South 2014
 
WordPress Blogs 101
WordPress Blogs 101WordPress Blogs 101
WordPress Blogs 101
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone Wild
 
Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
Intro to jQuery for Drupal
Intro to jQuery for DrupalIntro to jQuery for Drupal
Intro to jQuery for Drupal
 
Making Web Accessibility Sexy
Making Web Accessibility SexyMaking Web Accessibility Sexy
Making Web Accessibility Sexy
 
Wordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelmanWordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelman
 
Developers: Why Care About the User? (2017)
Developers: Why Care About the User? (2017)Developers: Why Care About the User? (2017)
Developers: Why Care About the User? (2017)
 
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
 
Why Nobody Fills Out My Forms (Updated)
Why Nobody Fills Out My Forms (Updated)Why Nobody Fills Out My Forms (Updated)
Why Nobody Fills Out My Forms (Updated)
 
HTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the funHTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the fun
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 

Similar to How Accessibility Made Me a Better Developer

Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
Eric Malcolm
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
Rachel Cherry
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Dylan Wilbanks
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
Rachel Cherry
 
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
Karen Mardahl
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
Helena Zubkow
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Web
greenideas
 
jQuery mobile UX
jQuery mobile UXjQuery mobile UX
jQuery mobile UX
Inbal Geffen
 
Atag & drupal 8
Atag & drupal 8Atag & drupal 8
Atag & drupal 8
Mike Gifford
 
Access by Default
Access by DefaultAccess by Default
Access by Default
Kendra Skeene
 
Tales from the Accessibility Trenches
Tales from the Accessibility TrenchesTales from the Accessibility Trenches
Tales from the Accessibility Trenches
graemecoleman
 
Web Accessibility and why we need it
Web Accessibility and why we need itWeb Accessibility and why we need it
Web Accessibility and why we need it
Genevieve Nelson
 
Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and Profit
Mike Wilcox
 
User Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UIUser Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UI
Dave Olsen
 
Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?
LavaConConference
 
Accessibility 101
Accessibility 101Accessibility 101
Accessibility 101
Barry Briggs
 
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Jared Smith
 
Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0
Dennis Lembree
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
Adrian Roselli
 
DevDay 2013 - Building Startups and Minimum Viable Products
DevDay 2013 - Building Startups and Minimum Viable ProductsDevDay 2013 - Building Startups and Minimum Viable Products
DevDay 2013 - Building Startups and Minimum Viable Products
Ben Hall
 

Similar to How Accessibility Made Me a Better Developer (20)

Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
 
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Web
 
jQuery mobile UX
jQuery mobile UXjQuery mobile UX
jQuery mobile UX
 
Atag & drupal 8
Atag & drupal 8Atag & drupal 8
Atag & drupal 8
 
Access by Default
Access by DefaultAccess by Default
Access by Default
 
Tales from the Accessibility Trenches
Tales from the Accessibility TrenchesTales from the Accessibility Trenches
Tales from the Accessibility Trenches
 
Web Accessibility and why we need it
Web Accessibility and why we need itWeb Accessibility and why we need it
Web Accessibility and why we need it
 
Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and Profit
 
User Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UIUser Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UI
 
Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?
 
Accessibility 101
Accessibility 101Accessibility 101
Accessibility 101
 
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)
 
Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
 
DevDay 2013 - Building Startups and Minimum Viable Products
DevDay 2013 - Building Startups and Minimum Viable ProductsDevDay 2013 - Building Startups and Minimum Viable Products
DevDay 2013 - Building Startups and Minimum Viable Products
 

Recently uploaded

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
saastr
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
GDSC PJATK
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
flufftailshop
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 

Recently uploaded (20)

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 

How Accessibility Made Me a Better Developer

  • 1. How Accessibility Made Me a Better Developer Billy  Gregory @thebillygregory …  a  developer’s  tale
  • 2. Agenda … or why are we here? • Who  am  I? • My  Journey  into  Accessibility • Ten  “Day  1”  Accessibility  Aps • QuesAons,  Comments,  Your  stories  
  • 3. 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.
  • 5. The Web is Evolving More  and  more  demands  are   being  place  on  our  code. We  can  no  longer  predict  or  control   how  a  user  accesses  our  code Accessibility  is becoming  the  law.
  • 6. So what do we do?
  • 7. 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…
  • 8.
  • 9. 2008 I  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
  • 10. ???? Don’t forget to make it accessible! ???? I had no idea what digital accessibility really was.
  • 11. Trial By Fire Forced  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.
  • 12. Own Your Code … and not just the stuff you did right! The real lessons are in the stuff you did wrong
  • 14. My moment of clarity My  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 Focus I  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
  • 16. Digital Accessibility in 2008 ...Was an uphill struggle.
  • 17. 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…
  • 18. 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!
  • 19. 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’t Accessibility EXPEN$IVE ?!...
  • 21. 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 me translate it so I could finally understand. And again. I reached out to the accessibility community. #a11y on twitter will yield results.
  • 22. 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
  • 23. Try  to  assume  at  least   SOME  level  of  Accessibility
  • 24.
  • 25. Looking at your design
  • 27. What YOU see… …isn’t always what they get.
  • 28. “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  in Accessibility  tesAng.
  • 29. But what can I do NOW?...
  • 31. My Top Ten  Over  7me,  I  kept  adding  to  the  list  of  things  I  could  "get  away"   with  or  had  complete  control  over 1) Language 2) Seman7c  mark-­‐up 3) Code  Order  /  Tab  Order 4) ARIA  Landmark  Roles 5) Focus 6) Keyboard  control 7) Skip  Links 8) Form  labels  &  fieldsets 9) Alt  text 10) “Hidden”  text
  • 32. Watch Your Language!   <html  lang="en"> <html  lang="fr"> 1
  • 33. 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  buons  as  buons,  lists  as  lists,  tables  as   tables,  etc. 2 USE  HEADINGS!!!
  • 35. Semantic Mark-up   Tables … Yes. Tables. Good  use  of  a  table 2
  • 36. Semantic Mark-up   Tables … Yes. Tables. BAD  use  of  a  table 2
  • 37. 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
  • 38. Code Order vs Tab Order Element Element Element Element This… Element Element Element Element NOT This… 3
  • 39. ARIA Landmark Roles   WAI-­‐ARIA Web Accessibility   IniEaEve Accessible Rich Internet   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
  • 40.   ARIA Landmark Roles <header  id=“header”…. <nav  id=“main-­‐navigaAon”  … <main  id=“main-­‐content”  … <div  id=“right-­‐col”  … <footer  id=“footer”  … 4
  • 41.   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
  • 42. 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
  • 43. 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
  • 45. 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
  • 46. Keyboard Control   Lots of people don’t use a mouse. 6
  • 47. 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
  • 48. 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
  • 49.   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
  • 50. Form labels and fieldsets   8
  • 51. Alternative Text   The  “alt”  aeribute  contains  text  that  describes  an  image alt=“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.”
  • 52. “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
  • 53. If you build it...
  • 54. SomeEmes  it’s  easier   to  beg  forgiveness Than  to  ask  permission