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

476 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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

×