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.
Howto Improve
Your Project’s Accessibility
Without Going Crazy
Eric Eggert
ee@w3.org • yatil
W3C/Web Accessibility Initiat...
– w3.org/accessibility
The Web is fundamentally designed to work for
all  people, whatever their hardware, software,
langu...
Accessibility:
Make sure that People with disabilities
can effectively interact with the Web
– Aaron Gustafson (Foreword in: Sarah Horton. “A Web for Everyone.”)
“On the web, every decision I make can have a
profoun...
>1 billion
Persons with some form
of disability
— WHO Report 2011
15%
Persons with some form
of disability
— WHO Report 2011
@dstorey
Q: How do
People With Disabilities
Use the web?
Browser Web
Content
Browser Web
Content
Assistive
tech
Zoom
Pinch Out by Julie Muckensturm from the Noun Project
Braille
customizations
Captions
Resource:
How People with
Disabilities Use the Web
w3.org/WAI/intro/people-use-web/
Q: Accessibility sounds
complicated.
Q: How do I start with
Accessibility?
Designers
Content creators
Developers
Resource:
Tips for getting started
with web accessibility
w3.org/WAI/gettingstarted/tips/
Q: How do I make sure my
website is accessible?
Resource:
Web Content
Accessibility Guidelines
(WCAG) 2.0
w3.org/TR/WCAG/
Principles:
Perceivable
Operable
Understandable
Robust
Perceivable:
TextAlternatives
<button>
<span class="icon icon-pencil">
</span>
</button>
<button title="Edit">
<span class="icon icon-pencil">
</span>
</button>
<button title="Edit">
<span class="icon icon-pencil-kaput“>
</span>
</button>
ImageS
<button>
<img src="pencil.png" alt="Edit">
</button>
<button>
<img src="pencil.svg" alt="Edit">
</button>
Resource:
Image Tutorial
w3.org/WAI/tutorials/images/
Resource:
Web Accessibility
Tutorials
w3.org/WAI/tutorials/
<aside>
Page structure (Draft)
Menus (Draft)
images
Tables
forms
carousels (Draft)
</aside>
Visible text labels
<button>
<span class="icon icon-pencil">
</span>
Edit
</button>
Perceivable:
Color Contrast
Operable:
usable with a Keyboard
Operable:
Proper headings
F labels
Understandable:
Page language
Understandable:
Consistent Navigation
Robust:
Compatibility
Q: How do I make sure my
Backend is accessible?
Resource:
Authoring Tools
Accessibility Guidelines
(ATAG) 2.0
w3.org/TR/ATAG/
part A:
Make the authoring tool
user interface accessible
part B:
Support the production of
accessible content
part A:
Make the authoring tool
user interface accessible
principle A.1:
Authoring tool user
interfaces follow
applicable accessibility
guidelines
principle A.2:
Editing-views are
perceivable
principle A.3:
Editing-views are
Operable
Guideline A.3.1:
Provide keyboard access
to authoring features
Guideline A.3.2:
Provide authors with
enough time
Guideline A.3.4:
Enhance navigation and
editing via content
structure
principle A.4:
Editing-views are
understandable
Guideline A.4.1:
Help authors avoid and
correct mistakes
Guideline A.4.2:
Document the user
interface, including all
accessibility features
part B:
Support the production
of accessible content
principle B.1:
Fully automatic
processes produce
accessible content
principle B.2:
Authors are supported
in producing
accessible content
Guideline B.2.3:
Assist authors
with managing
alternative content for
non-text content
Guideline A.2.4:
Assist authors with
accessible templates
principle B.3:
Authors are supported in
improving the accessibility
of existing content
Guideline B.3.1:
Assist authors in
checking for
accessibility problems
Guideline B.3.2:
Assist authors in
repairing accessibility
problems
principle B.4:
Authoring tools promote
and integrate their
accessibility features
Q: How do I make sure
that the experience is
accessible?
You achiEve the best
results when…
Accessibility is
not an afterthought
Makes the backend 

easyto use
No need to rebuild
Accessibility is
an opportunity
Reach more people
makes your website 

easy(er) to understand
consistent layout H
Navigation
Accessibility is
A creative outlet
Produce the best
video player UI
Take the available data
and do something no one
expects
thankyou.
Eric Eggert
W3C/Web accessibility initiative
ee@w3.org & @yatil
Fonts: Goodlife (Sans Condensed, Brush, Serif, S...
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
Upcoming SlideShare
Loading in …5
×

DrupalCamp Vienna 2015

712 views

Published on

My talk at DrupalCamp Vienna 2015.

Published in: Education
  • Be the first to comment

  • Be the first to like this

DrupalCamp Vienna 2015

  1. 1. Howto Improve Your Project’s Accessibility Without Going Crazy Eric Eggert ee@w3.org • yatil W3C/Web Accessibility Initiative
  2. 2. – w3.org/accessibility The Web is fundamentally designed to work for all  people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
  3. 3. Accessibility: Make sure that People with disabilities can effectively interact with the Web
  4. 4. – Aaron Gustafson (Foreword in: Sarah Horton. “A Web for Everyone.”) “On the web, every decision I make can have a profound effect on hundreds of thousands (if not millions) of people’s lives. I can make checking into a flight a breeze, or I can make it a living hell. That’s a lot of power. And to quote Stan Lee: ‘With great power comes great responsibility.’”
  5. 5. >1 billion Persons with some form of disability — WHO Report 2011
  6. 6. 15% Persons with some form of disability — WHO Report 2011
  7. 7. @dstorey
  8. 8. Q: How do People With Disabilities Use the web?
  9. 9. Browser Web Content
  10. 10. Browser Web Content Assistive tech
  11. 11. Zoom
  12. 12. Pinch Out by Julie Muckensturm from the Noun Project
  13. 13. Braille
  14. 14. customizations
  15. 15. Captions
  16. 16. Resource: How People with Disabilities Use the Web w3.org/WAI/intro/people-use-web/
  17. 17. Q: Accessibility sounds complicated.
  18. 18. Q: How do I start with Accessibility?
  19. 19. Designers Content creators Developers
  20. 20. Resource: Tips for getting started with web accessibility w3.org/WAI/gettingstarted/tips/
  21. 21. Q: How do I make sure my website is accessible?
  22. 22. Resource: Web Content Accessibility Guidelines (WCAG) 2.0 w3.org/TR/WCAG/
  23. 23. Principles: Perceivable Operable Understandable Robust
  24. 24. Perceivable: TextAlternatives
  25. 25. <button> <span class="icon icon-pencil"> </span> </button>
  26. 26. <button title="Edit"> <span class="icon icon-pencil"> </span> </button>
  27. 27. <button title="Edit"> <span class="icon icon-pencil-kaput“> </span> </button>
  28. 28. ImageS
  29. 29. <button> <img src="pencil.png" alt="Edit"> </button>
  30. 30. <button> <img src="pencil.svg" alt="Edit"> </button>
  31. 31. Resource: Image Tutorial w3.org/WAI/tutorials/images/
  32. 32. Resource: Web Accessibility Tutorials w3.org/WAI/tutorials/ <aside>
  33. 33. Page structure (Draft) Menus (Draft) images Tables forms carousels (Draft) </aside>
  34. 34. Visible text labels
  35. 35. <button> <span class="icon icon-pencil"> </span> Edit </button>
  36. 36. Perceivable: Color Contrast
  37. 37. Operable: usable with a Keyboard
  38. 38. Operable: Proper headings F labels
  39. 39. Understandable: Page language
  40. 40. Understandable: Consistent Navigation
  41. 41. Robust: Compatibility
  42. 42. Q: How do I make sure my Backend is accessible?
  43. 43. Resource: Authoring Tools Accessibility Guidelines (ATAG) 2.0 w3.org/TR/ATAG/
  44. 44. part A: Make the authoring tool user interface accessible part B: Support the production of accessible content
  45. 45. part A: Make the authoring tool user interface accessible
  46. 46. principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines
  47. 47. principle A.2: Editing-views are perceivable
  48. 48. principle A.3: Editing-views are Operable
  49. 49. Guideline A.3.1: Provide keyboard access to authoring features
  50. 50. Guideline A.3.2: Provide authors with enough time
  51. 51. Guideline A.3.4: Enhance navigation and editing via content structure
  52. 52. principle A.4: Editing-views are understandable
  53. 53. Guideline A.4.1: Help authors avoid and correct mistakes
  54. 54. Guideline A.4.2: Document the user interface, including all accessibility features
  55. 55. part B: Support the production of accessible content
  56. 56. principle B.1: Fully automatic processes produce accessible content
  57. 57. principle B.2: Authors are supported in producing accessible content
  58. 58. Guideline B.2.3: Assist authors with managing alternative content for non-text content
  59. 59. Guideline A.2.4: Assist authors with accessible templates
  60. 60. principle B.3: Authors are supported in improving the accessibility of existing content
  61. 61. Guideline B.3.1: Assist authors in checking for accessibility problems
  62. 62. Guideline B.3.2: Assist authors in repairing accessibility problems
  63. 63. principle B.4: Authoring tools promote and integrate their accessibility features
  64. 64. Q: How do I make sure that the experience is accessible?
  65. 65. You achiEve the best results when…
  66. 66. Accessibility is not an afterthought
  67. 67. Makes the backend 
 easyto use
  68. 68. No need to rebuild
  69. 69. Accessibility is an opportunity
  70. 70. Reach more people
  71. 71. makes your website 
 easy(er) to understand
  72. 72. consistent layout H Navigation
  73. 73. Accessibility is A creative outlet
  74. 74. Produce the best video player UI
  75. 75. Take the available data and do something no one expects
  76. 76. thankyou. Eric Eggert W3C/Web accessibility initiative ee@w3.org & @yatil Fonts: Goodlife (Sans Condensed, Brush, Serif, Serif Bold), Aleo, Source code pro

×