Web Accessibility
What you need to know
Accessibility Goals

•

An accessible website should allow a disabled
person to get the same value as a non-disabled
perso...
Accessibility Technologies

The Carroll Center for the Blind
Accessibility Challenges
•

Vision - Screen readers	


•

Motion - Special keyboards	


•

Hearing - audio subtitles
Accessibility Law
•

Every website servicing Israeli population must be
accessible to an AA grade	


•

Existing websites ...
Technical
Details
Complete guide:	

http://www.w3.org/TR/WCAG20/	

!

Hebrew guide: 

http://www.nagish.org.il/?
page_id=1...
Agenda
•

Alt text for images	


•

Motion Control	


•

Audio and Video	


•

Text images	


•

Structure and flow	


•

F...
Alt Text for Images
<img src="happy_elephant.png" />

<img src="happy_elephant.png" alt="A happy elephant" />
Alt text for images
•

All <img /> tags should have an alt attribute	


•

Alt text should specify content and function	

...
Alt text for images

•

Alternative Captchas must be provided for visually
impaired users
Audio & Video
•

Provide alternatives to voice channel (subtitles)	


•

Provide alternatives to visual channel (audio
des...
Subtitles Format
•

Subtitles can be provided as Open Captions or
Closed Captions	


•

Youtube guide:

http://www.youtube...
Audio Highlights
•

If you want to play long
sounds (over 3 seconds):	

•

Provide a way for users
to stop it	


•

Provid...
Audio Highlights

•

Don’t use audio as a sole indication	


•

Visual aids must also be provided
Structure and Flow
•

Screen readers don’t use CSS
Structure and Flow

•

Use semantic markup	


•

Use meaningful flow
Semantic Markup
Usage

Tag

Headers

H1-H6

Lists and menus

UL, LI

Paragraph

P

Emphasize

EM, STRONG

Citations

CITE
Semantic Markup
•

Don’t style with tables	


•

Don’t link with onclick	


•

Don’t use inline css
Text

size

and colour
Contrast Ratio
•

Ranged 1-21	


•

Required: 4.5, except when:	

•

Large text can have contrast ratio 3	


•

Disabled U...
Text Size

•

Website should be usable if resized by up to 200%
Contrast Checking Tool
•

http://www.snook.ca/technical/colour_contrast/
colour.html
Keyboard Navigation
Keyboard

•

All content and functionality must be accessible
using keyboard only	


•

Keyboard focus should never be tra...
Keyboard
•

Keyboard focus order (tab order) should preserve
meaning	


•

Visual indication for keyboard focus is require...
Skipping To Content
•

Add a link to main content at the head of every
page	


•

Add links to each content area (navigati...
Skipping To Content
•

Recommended access keys:	

S - Skip navigation	

1 - Home page	


5 - Frequently Asked Questions (F...
Time Based
Actions
What Is Time Based Actions
•

Every action that happens automatically after a
given time frame	


•

Examples:	

•

Conten...
Guidelines
•

User should be able to block time based events
before they occur	


•

User should be able to change time li...
Examples

•

Pause button for auto scroll texts	


•

Control time frames in user’s preferences
Movement Control

•

User can control all moving or blinking elements
on screen	


•

Same applies for self-updating infor...
Textual Images
•

Don’t use text-in-images unless	

•

User can visually customise the text	


•

Image is inseparable fro...
Language Guidelines
•

Use lang attribute on HTML
<html lang="en">
<html lang="he">
Language Guidelines
•

Specify language change inside the document, if
changing from english to another language
<p>Access...
Forms
Link form element to its
description
<label for="firstname">First name:</label>

<input type="text" name="firstname"
id="f...
Use title when label is not
appropriate




<fieldset>

<legend>Phone number</legend>

<input id="areaCode" name="areaCode...
Required Fields
•

Use clear textual indications for required fields	


•

Explain in the beginning of the form what indica...
Grouping Fields
•

Group fields in a fieldset when you 

have > 10 form fields




<fieldset>

<legend>address</legend>

<lab...
Error Messages
•

Group error messages in form beginning, each line
indicates a single error	


•

Each error line links t...
Tables

50%

$200

70%

$215
Use Caption to Describe the
Table

<table>

<caption>Table 1: Company data</caption>

Use th for table headers
<table>

<caption>Table 1: Company data</caption>

<tr>

<th>Name</th>

<th>Email</th>

</tr>



...
Use cell headers for complex
tables

<tr>

<th
<td
<td
<td
</tr>


id="acme">ACME Inc</th>

headers="acme employees men">7...
Writing By Standards
•

Start and end tag to each element	


•

Elements are nested by spec	


•

No duplicate attributes	...
Q&A
Thanks For Listening
•

Ynon Perek	


•

ynon@ynonperek.com	


•

http://ynonperek.com
Photos From

•

http://placeit.net	


•

http://123rf.com
Upcoming SlideShare
Loading in...5
×

Accessibility

285

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
285
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Accessibility

  1. 1. Web Accessibility What you need to know
  2. 2. Accessibility Goals • An accessible website should allow a disabled person to get the same value as a non-disabled person
  3. 3. Accessibility Technologies The Carroll Center for the Blind
  4. 4. Accessibility Challenges • Vision - Screen readers • Motion - Special keyboards • Hearing - audio subtitles
  5. 5. Accessibility Law • Every website servicing Israeli population must be accessible to an AA grade • Existing websites must be accessible by: 25/10/2016 • New websites must be accessible upon launch
  6. 6. Technical Details Complete guide: http://www.w3.org/TR/WCAG20/ ! Hebrew guide: 
 http://www.nagish.org.il/? page_id=107
  7. 7. Agenda • Alt text for images • Motion Control • Audio and Video • Text images • Structure and flow • Forms • Text size and colour • Tables • Keyboard operation • Navigation • Skipping content • Error messages • Time limits • Language definitions • Using standards • Roles
  8. 8. Alt Text for Images <img src="happy_elephant.png" /> <img src="happy_elephant.png" alt="A happy elephant" />
  9. 9. Alt text for images • All <img /> tags should have an alt attribute • Alt text should specify content and function • Decorations should get alt="" (an empty alt) • Meaningful photos cannot be placed as background-image
  10. 10. Alt text for images • Alternative Captchas must be provided for visually impaired users
  11. 11. Audio & Video • Provide alternatives to voice channel (subtitles) • Provide alternatives to visual channel (audio descriptions of important visual information) • Alternatives must be in sync with video • Player must be accessible
  12. 12. Subtitles Format • Subtitles can be provided as Open Captions or Closed Captions • Youtube guide:
 http://www.youtube.com/watch? v=WkQjYHx3NY8
  13. 13. Audio Highlights • If you want to play long sounds (over 3 seconds): • Provide a way for users to stop it • Provide volume control
  14. 14. Audio Highlights • Don’t use audio as a sole indication • Visual aids must also be provided
  15. 15. Structure and Flow • Screen readers don’t use CSS
  16. 16. Structure and Flow • Use semantic markup • Use meaningful flow
  17. 17. Semantic Markup Usage Tag Headers H1-H6 Lists and menus UL, LI Paragraph P Emphasize EM, STRONG Citations CITE
  18. 18. Semantic Markup • Don’t style with tables • Don’t link with onclick • Don’t use inline css
  19. 19. Text size and colour
  20. 20. Contrast Ratio • Ranged 1-21 • Required: 4.5, except when: • Large text can have contrast ratio 3 • Disabled UI control or decoration • Logo
  21. 21. Text Size • Website should be usable if resized by up to 200%
  22. 22. Contrast Checking Tool • http://www.snook.ca/technical/colour_contrast/ colour.html
  23. 23. Keyboard Navigation
  24. 24. Keyboard • All content and functionality must be accessible using keyboard only • Keyboard focus should never be trapped
  25. 25. Keyboard • Keyboard focus order (tab order) should preserve meaning • Visual indication for keyboard focus is required • Keyboard focus change should not change context
  26. 26. Skipping To Content • Add a link to main content at the head of every page • Add links to each content area (navigation links) • Start each content block with a header • Organize links in lists
  27. 27. Skipping To Content • Recommended access keys: S - Skip navigation 1 - Home page 5 - Frequently Asked Questions (FAQ) 6 - Help 7 - Complaints procedure 2 - What's new 8 - Terms and conditions 3 - Site map 9 - Feedback form 4 - Search 0 - Access key details
  28. 28. Time Based Actions
  29. 29. What Is Time Based Actions • Every action that happens automatically after a given time frame • Examples: • Content refresh • Page transitions
  30. 30. Guidelines • User should be able to block time based events before they occur • User should be able to change time limits before they occur • User should be able to take an “extension”, when facing a time limited action
  31. 31. Examples • Pause button for auto scroll texts • Control time frames in user’s preferences
  32. 32. Movement Control • User can control all moving or blinking elements on screen • Same applies for self-updating information
  33. 33. Textual Images • Don’t use text-in-images unless • User can visually customise the text • Image is inseparable from the text 
 (Example: logos)
  34. 34. Language Guidelines • Use lang attribute on HTML <html lang="en"> <html lang="he">
  35. 35. Language Guidelines • Specify language change inside the document, if changing from english to another language <p>Accessibility for all “ <span lang="he" dir="rtl">‫ ,נגישות לכל‬W3C</span> " in Hebrew.</p>
  36. 36. Forms
  37. 37. Link form element to its description <label for="firstname">First name:</label>
 <input type="text" name="firstname" id="firstname" />

  38. 38. Use title when label is not appropriate 
 <fieldset>
 <legend>Phone number</legend>
 <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" > 
 <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" > </fieldset>

  39. 39. Required Fields • Use clear textual indications for required fields • Explain in the beginning of the form what indicates a required field • fields marked with(*) are required
  40. 40. Grouping Fields • Group fields in a fieldset when you 
 have > 10 form fields 
 <fieldset>
 <legend>address</legend>
 <label for="city">City</label>
 <input id="city" name="city" type="text" />
 <label for="street">Street</label>
 <input id="street" name="street" type="text" />
 
 </fieldset>

  41. 41. Error Messages • Group error messages in form beginning, each line indicates a single error • Each error line links to the field it relates to • When possible, suggest a correction
  42. 42. Tables 50% $200 70% $215
  43. 43. Use Caption to Describe the Table <table>
 <caption>Table 1: Company data</caption>

  44. 44. Use th for table headers <table>
 <caption>Table 1: Company data</caption>
 <tr>
 <th>Name</th>
 <th>Email</th>
 </tr>
 
 <tr>
 <td>Bob</td>
 <td>bob@gmail.com</td>
 </tr>
 </table>
  45. 45. Use cell headers for complex tables <tr>
 <th <td <td <td </tr>
 id="acme">ACME Inc</th>
 headers="acme employees men">700</td>
 headers="acme employees women">300</td>
 headers="acme founded">1947</td>

  46. 46. Writing By Standards • Start and end tag to each element • Elements are nested by spec • No duplicate attributes • Unique IDs
  47. 47. Q&A
  48. 48. Thanks For Listening • Ynon Perek • ynon@ynonperek.com • http://ynonperek.com
  49. 49. Photos From • http://placeit.net • http://123rf.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×