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.
WEB ACCESSIBILITY:
MAKING WEBSITES
BETTER FOR EVERYONE
WHAT IS WEB
ACCESSIBILITY?
SCREEN READER
Page has fifty-eight headings and two hundred
seventy-one links BBC dash Homepage Link
Graphic BBC Heading l...
HIGH CONTRAST
HIGH CONTRAST
VOICE RECOGNITION
VOICE RECOGNITION
VOICE RECOGNITION
TRACKBALL
KEYBOARD
TRY IT YOURSELF
Jaws / ChromeVox
Windows High Contrast Theme
Turn off your mouse
Use your elbows (not fingers)
YOU SHOULD CARE ABOUT
ACCESSIBILITY
1: UX
Content
Information Architecture
Interface Design
1: UX
xkcd.com/773
2: HTML
2: HTML
Semantic HTML:
When the HTML markup reinforces the
meaning (aka semantics) of the
information on the page.
2: HTML
WCAG 2.0
(Web Content Accessibility Guidelines)
wave.webaim.org
Section508
Rehabilitation Act
Americans with Disabilities Act
Nat’l Federation of the Deaf vs. Netflix Inc
ADA
Department ...
3: CSS
Don’t screw up your HTML
Make small improvements
4: JAVASCRIPT
Don’t screw up your HTML
4: JAVASCRIPT
Don’t screw up your HTML
ARIA Roles and Attributes
(Accessible Rich Internet Applications)
<div class="server">Blueberry
<span class="server_button">
DETAILS ▸</span>
</div>
<div class="server_details">
<div>Hostn...
<div class="server">Blueberry
<span class="server_button">
DETAILS ▸</span>
</div>
<div class="server_details">
<div>Hostn...
<div class="server">Blueberry
<span class="server_button">
DETAILS ▸</span>
</div>
<dl class="server_details">
<dt>Hostnam...
<div class="server">Blueberry
<span class="server_button">
DETAILS ▸</span>
</div>
<dl class="server_details">
<dt>Hostnam...
<h3 class="server">Blueberry
<span class="server_button">
DETAILS ▸</span>
</h3>
<dl class="server_details">
<dt>Hostname:...
<h3 class="server">Blueberry
<span class="server_button">
DETAILS ▸
</span>
</h3>
<dl class="server_details">
<dt>Hostname...
$('.server_button').on('click',
function() {
$(this)
.parent().next()
.toggleClass('hide');
});
.server_button:hover {
background-color: #000;
color: #fff;
}
<h3 class="server">Blueberry
<span class="server_button">
DETAILS ▸
</span>
</h3>
<dl class="server_details">
<dt>Hostname...
<h3 class="server">Blueberry
<button class="server_button">
DETAILS ▸
</button>
</h3>
<dl class="server_details">
<dt>Host...
<h3 class="server">Blueberry
<button class="server_button"
type="button">
DETAILS ▸
</button>
</h3>
<dl class="server_deta...
$('.server_button').on('click',
function() {
$(this)
.parent()
.next()
.toggle();
});
.server_button:hover {
background-color: #000;
color: #fff;
}
.server_button:hover,
.server_button:focus {
background-color: #000;
color: #fff;
}
.server_button:hover,
.server_button:focus {
background-color: #000;
color: #fff;
text-decoration: underline;
}
<h3 class="server">Blueberry
<button class="server_button"
type="button">
DETAILS ▸
</button>
</h3>
<dl class="server_deta...
<h3 class="server">Blueberry
<button class="server_button"
type="button">
Details ▸
</button>
</h3>
<dl class="server_deta...
<h3 class="server">Blueberry
<button class="server_button"
type="button">
Details ▸
</button>
</h3>
<dl class="server_deta...
<h3 class="server">
<button class="server_button"
type="button">
Blueberry
</button>
</h3>
<dl class="server_details">
<dt...
<h3 class="server">
<button class="server_button"
type="button">
Blueberry
</button>
</h3>
<dl class="server_details">
<dt...
<h3>
<button class="server"
type="button">
Blueberry
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> we...
.server_button
.server:after {
content: 'Details 25B8’;
text-transform: uppercase;
speak: none;
background-color: #fff;
bo...
.server_button:hover,
.server_button:focus
.server:hover:after,
.server:focus:after {
/* same styles as before */
}
Click here
“…the time required to rapidly
move to a target area is a function
of the ratio between the distance
to the target and the...
<span aria-hidden="true"
class="icon_check"></span>
<span class="offscreen">
This server is up:
</span>
<span aria-hidden="true"
class="icon_check"></span>
<span class="offscreen">
This server is up:
</span>
.icon_check:before {
content: '2713';
speak: none; }
.icon_times:before {
content: '2715';
speak: none; }
<span aria-hidden="true"
class="icon_check"></span>
<span class="offscreen">
This server is up:
</span>
<span aria-hidden="true"
class="icon_check"></span>
<span class="offscreen">
This server is up:
</span>
.offscreen {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1...
WHAT JUST HAPPENED?
WHAT JUST HAPPENED?
- choose the right element
WHAT JUST HAPPENED?
- choose the right element
- use descriptive calls to action
WHAT JUST HAPPENED?
- choose the right element
- use descriptive calls to action
- make hit areas bigger
WHAT JUST HAPPENED?
- choose the right element
- use descriptive calls to action
- make hit areas bigger
- add visual cues
WHAT JUST HAPPENED?
- choose the right element
- use descriptive calls to action
- make hit areas bigger
- add visual cues...
<h3>
<button class="server" type="button">
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server...
<h3>
<button class="server" type="button">
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server...
<h3>
<button class="server" type="button">
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server...
<h3>
<button aria-controls="raspberry" class="serve
<span aria-hidden="true" class="icon_check"
<span class="offscreen">Th...
<h3>
<button aria-controls="raspberry"
aria-expanded="false" class="server" t
<span aria-hidden="true" class="icon_check"
...
$('[aria-expanded]').on('click',
function() {
var id = $(this)
.attr(aria-contols);
/*
toggle values of
aria-expanded & ar...
<h3>
<button aria-controls="raspberry"
aria-expanded="false" class="server" t
<span aria-hidden="true" class="icon_check"
...
<h3>
<button aria-controls="raspberry"
aria-expanded="true" class="server" ty
<span aria-hidden="true" class="icon_check"
...
.server_details[aria-hidden=true]{
display: none;
}
.server[aria-expanded=false]:after{
content: 'Details 25B8';
}
.server[aria-expanded=true]:after{
content: 'Details 25BE';...
DON’T SELL IT, DO IT
BETTER FOR EVERYONE
I LIKE TO MAKE WEBSITES
EVERYONE CAN USE
@stephaniehobson
stephaniehobson.ca
RESOURCES
- webaim.org
- wave.webaim.org
- alistapart.com/article/the-accessibility-of-wai-aria
- 24ways.org/2009/dont-los...
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Upcoming SlideShare
Loading in …5
×

Web Accessibility: 
Making Websites Better for Everyone

1,364 views

Published on

Making our sites easier to use for users who face vision or mobility challenges makes them easier for everyone to use.

Published in: Internet
  • Be the first to comment

Web Accessibility: 
Making Websites Better for Everyone

  1. 1. WEB ACCESSIBILITY: MAKING WEBSITES BETTER FOR EVERYONE
  2. 2. WHAT IS WEB ACCESSIBILITY?
  3. 3. SCREEN READER Page has fifty-eight headings and two hundred seventy-one links BBC dash Homepage Link Graphic BBC Heading level two Heading level two BBC navigation List of nine items bullet Link News bullet Link Sport bullet Link Weather bullet Link Capital bullet Link Future bullet Link Shop bullet Link TV bullet Link Radio bullet Link More… List end
  4. 4. HIGH CONTRAST
  5. 5. HIGH CONTRAST
  6. 6. VOICE RECOGNITION
  7. 7. VOICE RECOGNITION
  8. 8. VOICE RECOGNITION
  9. 9. TRACKBALL
  10. 10. KEYBOARD
  11. 11. TRY IT YOURSELF Jaws / ChromeVox Windows High Contrast Theme Turn off your mouse Use your elbows (not fingers)
  12. 12. YOU SHOULD CARE ABOUT ACCESSIBILITY
  13. 13. 1: UX Content Information Architecture Interface Design
  14. 14. 1: UX xkcd.com/773
  15. 15. 2: HTML
  16. 16. 2: HTML Semantic HTML: When the HTML markup reinforces the meaning (aka semantics) of the information on the page.
  17. 17. 2: HTML WCAG 2.0 (Web Content Accessibility Guidelines) wave.webaim.org
  18. 18. Section508 Rehabilitation Act Americans with Disabilities Act Nat’l Federation of the Deaf vs. Netflix Inc ADA Department of Justice Advance Notice Of Proposed Rulemaking CharterofRightsandFreedoms Canadian Human Rights Act Ontarians with Disabilities Act Schedules I, I.I and II of the Financial Administration Act Title III
  19. 19. 3: CSS Don’t screw up your HTML Make small improvements
  20. 20. 4: JAVASCRIPT Don’t screw up your HTML
  21. 21. 4: JAVASCRIPT Don’t screw up your HTML ARIA Roles and Attributes (Accessible Rich Internet Applications)
  22. 22. <div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <div class="server_details"> <div>Hostname: web02.onr.example.com</div> <div>Service Tag: JCQFZK1</div> <div>Datacentre: ONR</div> <div>Rack Location: 104.6, Unit #24</div> </div>
  23. 23. <div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <div class="server_details"> <div>Hostname: web02.onr.example.com</div> <div>Service Tag: JCQFZK1</div> <div>Datacentre: ONR</div> </div>
  24. 24. <div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <dl class="server_details"> <dt>Hostname:</dt><dd>web02.onr.example.com</d <dt>Service Tag:</dt><dd>JCQFZK1</dd> <dt>Datacentre:</dt><dd>ONR</dd> </dl>
  25. 25. <div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  26. 26. <h3 class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  27. 27. <h3 class="server">Blueberry <span class="server_button"> DETAILS ▸ </span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com< <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  28. 28. $('.server_button').on('click', function() { $(this) .parent().next() .toggleClass('hide'); });
  29. 29. .server_button:hover { background-color: #000; color: #fff; }
  30. 30. <h3 class="server">Blueberry <span class="server_button"> DETAILS ▸ </span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com< <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  31. 31. <h3 class="server">Blueberry <button class="server_button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  32. 32. <h3 class="server">Blueberry <button class="server_button" type="button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  33. 33. $('.server_button').on('click', function() { $(this) .parent() .next() .toggle(); });
  34. 34. .server_button:hover { background-color: #000; color: #fff; }
  35. 35. .server_button:hover, .server_button:focus { background-color: #000; color: #fff; }
  36. 36. .server_button:hover, .server_button:focus { background-color: #000; color: #fff; text-decoration: underline; }
  37. 37. <h3 class="server">Blueberry <button class="server_button" type="button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  38. 38. <h3 class="server">Blueberry <button class="server_button" type="button"> Details ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  39. 39. <h3 class="server">Blueberry <button class="server_button" type="button"> Details ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  40. 40. <h3 class="server"> <button class="server_button" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  41. 41. <h3 class="server"> <button class="server_button" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  42. 42. <h3> <button class="server" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  43. 43. .server_button .server:after { content: 'Details 25B8’; text-transform: uppercase; speak: none; background-color: #fff; border-radius: 4px; border: 0px none; box-shadow: 0px -2px
  44. 44. .server_button:hover, .server_button:focus .server:hover:after, .server:focus:after { /* same styles as before */ }
  45. 45. Click here
  46. 46. “…the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target” FITTS’ LAW - Wikipedia FTW
  47. 47. <span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
  48. 48. <span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
  49. 49. .icon_check:before { content: '2713'; speak: none; } .icon_times:before { content: '2715'; speak: none; }
  50. 50. <span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
  51. 51. <span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
  52. 52. .offscreen { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
  53. 53. WHAT JUST HAPPENED?
  54. 54. WHAT JUST HAPPENED? - choose the right element
  55. 55. WHAT JUST HAPPENED? - choose the right element - use descriptive calls to action
  56. 56. WHAT JUST HAPPENED? - choose the right element - use descriptive calls to action - make hit areas bigger
  57. 57. WHAT JUST HAPPENED? - choose the right element - use descriptive calls to action - make hit areas bigger - add visual cues
  58. 58. WHAT JUST HAPPENED? - choose the right element - use descriptive calls to action - make hit areas bigger - add visual cues in the CSS - don’t just add visual cues
  59. 59. <h3> <button class="server" type="button"> <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  60. 60. <h3> <button class="server" type="button"> <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  61. 61. <h3> <button class="server" type="button"> <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  62. 62. <h3> <button aria-controls="raspberry" class="serve <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl id="raspberry" class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
  63. 63. <h3> <button aria-controls="raspberry" aria-expanded="false" class="server" t <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl id="raspberry" aria-hidden="true" class="ser <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  64. 64. $('[aria-expanded]').on('click', function() { var id = $(this) .attr(aria-contols); /* toggle values of aria-expanded & aria-hidden */ });
  65. 65. <h3> <button aria-controls="raspberry" aria-expanded="false" class="server" t <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl id="raspberry" aria-hidden="true" class="ser <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  66. 66. <h3> <button aria-controls="raspberry" aria-expanded="true" class="server" ty <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl id="raspberry" aria-hidden="false" class="se <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
  67. 67. .server_details[aria-hidden=true]{ display: none; }
  68. 68. .server[aria-expanded=false]:after{ content: 'Details 25B8'; } .server[aria-expanded=true]:after{ content: 'Details 25BE'; }
  69. 69. DON’T SELL IT, DO IT
  70. 70. BETTER FOR EVERYONE
  71. 71. I LIKE TO MAKE WEBSITES EVERYONE CAN USE @stephaniehobson stephaniehobson.ca
  72. 72. RESOURCES - webaim.org - wave.webaim.org - alistapart.com/article/the-accessibility-of-wai-aria - 24ways.org/2009/dont-lose-your-focus/ - blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites - filamentgroup.com/lab/bulletproof_icon_fonts.html - snook.ca/archives/html_and_css/hiding-content-for-accessibility - snook.ca/archives/html_and_css/floated-label-pattern-css

×