web accessiblity standards guidelines

WEB ACCESSIBILITY STANDARDS

By Mayank Jain

Friday, January 27, 12

FOR WHOM?

People with following disabilities:

• Visual (blind, color blind)

• Auditory (deaf)

• Physical (unable to use mouse)

• Speech

• Cognitive

• Neurological (epilepsia)


VISUAL ELEMENTS

Provide a text equivalent for every non-text element

Why?• Images can't be seen

• Audio can't be heard

How?"alt" and "longdesc" for every non-text element.

TestFirefox Web Developer's Toolbar (plugin):

• Go to Images > Outline images without "alt" attribute

• Go to Images > Replace images with "alt"


VISUAL ELEMENTS

Color alone should not convey information

Why?• One in twelve people suffers from some sort of color deficiency. Some cannot distinguish red, green or

blue. Others have difficulties distinguishing foreground from background, if the contrast is insufficient.

How?Give other visual or textual clues.


• Go to Disable > Disable page color

• Go to Images > Disable all images


VISUAL ELEMENTS

Foreground and Background contrast

Why?• For partially blinded or color blind

How?• Use color validation tools

Test• Juicy studio color contrast analyser (Firefox add-on)

• www.vischeck.com


http://www.vischeck.com

http://www.vischeck.com

VISUAL ELEMENTS

Use markup rather than images

Why? Visually impaired • Cannot see images

• Cannot increase font size

• Cannot modify level of contrast

• Images don't convey structure of information

How?• Use CSS


• Go to Images > Disable Images > All images


VISUAL ELEMENTS

No flickering, moving or blinking (unless user allows)

Why? • Trigger epileptic seizures

• Older screen readers

How?• Use CSS


• Go to Images > Disable Images > All images


CODING

Organize HTML so that it is possible to read without style sheets

Why?• Users can override style sheets with their own or disable them

How? Use• Heading tags in order <h1>, <h2> etc

• List tags in order <li>

• Quotations in <blockquote>

TestUsing the Firefox Web Developer's Toolbar (plugin):

• Go to CSS > Disable styles> All style


CODING

Create documents that validate to published formal grammars.

Why?• Consistent interpretation of pages by different browsers and devices.

How?HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">XHTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">


• Validate the HTML: Go to Tools > Validate HTML.

• Validate the CSS: Go to Tools > Validate CSS.


CODING

Use style sheets to control layout and presentation

Why?• Webpage can get bulky

• Content is separate from presentation. Good for manageability, portability and accessibility

• Facilitates device independence

• Users can impose their own CSS

How?• Use CSS for presentation of content


• Go to Outline > Outline deprecated elements.


CODING

Do not use tables for layouts, if you do so, do not use the "summary" attribute, the <caption> tag or

the <th> tags in the table.

Why?• The screen reader linearizes the content, which means that it reads it row by row. Sometimes,

content loses its coherence when read in this manner, especially when there are a lot of nested tables on a page.

How?• Use CSS to position elements on your pages.


• Go to Miscellaneous > Linearize page.


CODING

Use relative rather than absolute units

Why?• User can't scale the text in order to facilitate legibility

How?• Use CSS to format elements with relative units (em / %).


• Go to CSS > View CSS.

Success criteria: All sizes are set in "%" or "em"


CODING

Identify primary language of the document

Why?• Screen readers need to know the natural language of a document in order for the

words on the page to be pronounced correctly.

How?The natural language should be identified in the <html> tag with:

• HTML 4.0: the "lang" attribute

• XHTML 1.0: "lang" and "xml:lang" attributes.

• XHTML 1.1: "xml:lang" attribute

TestCheck the source code


TEXTUAL CONTENT

Clearly identify changes in the natural language of a document's text

Why?• Screen readers and Braille devices need to identify changes in the natural language so they can present it

with the correct pronunciation.

How?• Use the "lang" attribute in the relevant tag to identify text in another language

Test• Check page manually


TEXTUAL CONTENT

Simple and clear language

• Sentences are short.

• The text is broken down into short paragraphs.

• Favour the active voice.

• Do not use jargon, slang or idiomatic phrases.

• There are links to definitions of technical terms.


TEXTUAL CONTENT

Data tables• Identify row and column headers.

• Tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

• Provide summaries for tables.

Why?• Complex environment for blind or visually-impaired users because they cannot

visualize it globally,

• Will guide screen-reader users in the navigation of the table


TEXTUAL CONTENT

Data tables e.g. #1

"summary" attribute used within the <table> tag to describe the elements and structure of the table.

1. If the table has one logical level

<table summary="List of staff members with Department, extension and room number"> <tr> <th>Name</th> <th>Department</th> <th>Extension</th> <th>Room</th> </tr> <tr> <td>Peter Johnson</td> <td>DPI</td> <td>7.1234</td> <td>S-1001</td> </tr> <tr> <td>Wei Zhang</td> <td>DPKO</td> <td>3.9876</td> <td>DC2-534</td> </tr></table>

Name Department Extension Room

Peter Johnson DPI 7.1234 S-1001

Wei Zhang DPKO 3.9876 DC2-534


TEXTUAL CONTENT

Data tables e.g. #2

1. If the table has more than one logical level


<table summary="This table presents the costs of meals, hotels and transports for two trips in San Jose and Seattle"> <tr> <td> </td> <th id="meals">Meals</th> <th id="hotels">Hotels</th> <th id="transport">Transport</th> <th id="triptotals">Trip Totals</th> </tr> <tr> <th colspan="5" id="san_jose">San Jose</th> </tr> <tr> <td id="aug-25-07" headers="san_jose">25-Aug-07</td> <td headers="san_jose aug-25-07 meals">37.74</td> <td headers="san_jose aug-25-07 hotels">112.00</td> <td headers="san_jose aug-25-07 transport">45.00</td> <td> </td> </tr> <tr> <td id="aug-26-07" headers="san_jose">26-Aug-07</td> <td headers="san_jose aug-26-07 meals">27.28</td> <td headers="san_jose aug-26-07 hotels">112.00</td> <td headers="san_jose aug-26-07 transport">45.00 </td> <td> </td> </tr> <tr> <th id="sub" headers="san_jose">Subtotals </th> <td headers="san_jose sub meals">65.02</td> <td headers="san_jose sub hotels">224.00</td> <td headers="san_jose sub transport">90.00</td> <td headers="san_jose triptotals">379.02</td> </tr>

TEXTUAL CONTENT


TEXTUAL CONTENT

<tr> <th colspan="5" id="Seattle">Seattle</th> </tr> <tr> <td id="aug-27-07" headers="Seattle">27-Aug-07</td> <td headers="Seattle aug-27-07 meals">96.25</td> <td headers="Seattle aug-27-07 hotels">109.00</td> <td headers="Seattle aug-27-07 transport">36.00</td> <td> </td> </tr> <tr> <td id="aug-28-07" headers="Seattle">28-Aug-07</td> <td headers="Seattle aug-28-07 meals">35.00</td> <td headers="Seattle aug-28-07 hotels">109.00</td> <td headers="Seattle aug-28-07 transport">36.00 </td> <td> </td> </tr> <tr> <th id="sub2" headers="Seattle">subtotals</th> <td headers="Seattle sub meals">131.25</td> <td headers="Seattle sub hotels">218.00</td> <td headers="Seattle sub transport">72.00</td> <td headers="Seattle triptotals">421.25</td> </tr> <tr> <th id="grandtotals">Totals</th> <td headers="grandtotals meals">196.27</td> <td headers="grandtotals hotels">442.00</td> <td headers="grandtotals transport">162.00</td> <td headers="grandtotals triptotals">800.27</td> </tr>


TEXTUAL CONTENT

Mark up quotations. Do not use quotation markup for formatting effects such as indentation.

Why?• screen readers identify text that has been correctly marked as a quotation differently

• gives people who use these technologies important information about the context of the text

How?Short quotations of 10 words or less should use the <q> tag for markup. Long quotations of 11 words or more should use the <blockquote> tag.

TestUsing the Firefox Web Developer's Toolbar (plugin): Go to Outline > Outline block elements.


TEXTUAL CONTENT

Use header elements to convey document structureWhy?

• Categorizing the information makes it easier to scan content

• Breaking up the text into smaller sections and sub-sections allows screen-reader users to scan the page

• Screen readers can bounce from title to title, enabling the user to skim through the information rather than having to go through all of the content word by word

Example<body><div class="section2"> <h1>Welcome to the United Nations!</h1> … some text here ...</div><div class="section2"> <h2>sub topic 1</h2> ... text of the section ...</div><div class="section3"> <h2>sub topic 2</h2> ... text of the section ...</div></body>


TEXTUAL CONTENT

Mark up lists and list items properly.

• Should be used only to create lists not indentation

• If not, information can be lost on non-visual user agents particularly in nested lists

Example<ul> <li>Our mandate</li> <li>Documents </li> <li>News <ul> <li>News Centre</li> <li>Press Releases</li> <li>Radio</li> </ul> </li> <li>Links</li> <li>UN Home</li></ul>


TEXTUAL CONTENT

Specify the expansion of each abbreviation or acronym in a document where it first occurs.

Why?• Aids understanding by novice users and facilitates reading by screen readers

How?HTML<p>The Intergovernmental Panel on Climate Change has been established by <acronym title="the World Meteorological Organization">WMO</acronym>.</p>

<p><abbr title="Mister">Mr.</abbr> Ban Ki-moon, <acronym title="United Nations">UN</acronym> Secretary-General</p>

TestUsing the Firefox Web Developer's Toolbar (plugin):Go to Information > Display abbreviation.


NAVIGATION

Clearly identify the target of each link.

Why?• Screen-reader users will often review the list of links

• Helps to optimize the content for search engines

How?• Use the title of the target page as link text instead of using generic wording such as "read more" or "click

here".

• Where possible, do not place the link only on a document symbol, but include the document title too.

TestUsing the Firefox Web Developer's Toolbar (plugin):Go to Information > View Page Information and click on the link tab.


NAVIGATION

Provide a Sitemap

Why?• Makes navigation easier

• Helpful for people using assistive technologies, such as a screen reader.

How?Have a sitemap if pages cannot be accessed from the navigation bar's default state or the homepage.


NAVIGATION

Do not generate Pop-Ups

Why?• Can be annoying

• Problems for screen-reader users because they change the focus without warning

• Screen reader begins reading the content of the new window, usually without warning the user that a new window has opened

How?If you open a link a new window, add a warning in the link title, e.g.HTML<a href="un.org" target="_blank">United Nations homepage (this link will open in a new window)</a>

TestUsing the Firefox Web Developer's Toolbar (plugin):Go to Information > View Link Information.


NAVIGATION

Use consistent navigation mechanisms

Why?• Avoid confusion or disorientation

How?• Consistent visual presentation

• Constant sequential order

• Consistency in language and terminology

• Consistency in location of navigation controls

• Breadcrumbs


NAVIGATION

Logical tab order

Why?• Many users are unable to use mouse

• Ease of navigating the website with a keyboard

How?Example

<form action="submit" method="post"> <label for="field1">Field1:</label> <input tabindex="2" type="text" name="field1" id="field1"> <label for="field2">Field2:</label2> <input tabindex="1" type="text" name="field2"> <input tabindex="3" type="submit" name="submit"></form>

TestUse the "tab" key to navigate the site.


NAVIGATION

Provide information about documents

Why?• User should be able to know the size and type of document they are downloading

How?• Specify file type

• Provide alternative links

• Record user preferences and configure the server to choose document preferences automatically


SCRIPTS

Page are usable when programmatic elements are not supported

Why?• Some browsers and organisation turn off client-side scripting

• Dynamic drop downs cause problems for people with motor and visual impairments

How?• Avoid Javascript for link target

• Use <noscript> tag

• Use server-side scripts instead of client-side

• Provide up to date text equivalent on an alternative page

TestUsing the Firefox Web Developer's Toolbar (plugin): Go to Disable > Disable JavaScript > All JavaScript; then select Disable Java


SCRIPTS

Accessible Dynamic Content

Why?• Not all can view rapidly moving content due to visual impairments

How?• Write scripts that transforms gracefully even when scripts are turned off

• Should provide and alternate page where users can get information in accessible format

TestUsing the Firefox Web Developer's Toolbar (plugin): Go to Disable > Disable JavaScript > All JavaScript; then select Disable Java


SCRIPTS

No auto-refresh

Why?• Not all users are comfortable with computers and wouldn't know what is happening

• People read at varying speeds and may not have finished before auto-refresh

• Particularly for screen-readers that may re-read beginning even when it is somewhere half way during auto-refresh

• Some screen readers cannot handle auto-refresh and may not read the page at all

How?• Do not use <meta> element to auto refresh

Testcheck the page code


SCRIPTS

No client-side redirects

Why?• Confusing for users not familiar with internet

• Disorienting for screen readers

• If browser does not support client-side redirects, user cannot access new content

How?• Configure web server to redirect

• Configure redirects with server-side scripts

• Replace redirecting page with static page that has link to new page

TestCheck the page code


FORMS

Associate Labels explicitly with their controls

Why?• So that visual relationship with corresponding form is clear

• Older browsers may not understand the form and purpose of each field

Does not apply on hidden fields

How?e.g. XHTML

<label for="fname">Name</label><input type="text" name="name" id="fname" tabindex="1" />


FORMS

Ensure user interfaces are device-independent and use logical event handlers

Why?• Screen readers rely entirely on keyboard

How?The following example illustrates how to provide a redundant input mechanism in JavaScript.

HTML

<form> <p>You will you go <label>back to the previous page <input name="Back to Previous Page" type="button" id="Back to Previous Page" onClick="JavaScript:history.go(-1)" onKeypress="JavaScript:history.go(-1)" value="Back to Previous Page"></label> if you PRESS (keyboard) or CLICK (mouse) on the button.</p> <noscript> <p><a href="index.html">Go back to previous page</a></p> </noscript></form>


TOOLS

Validator• http://validator.w3.org/

Web Accessibility Tools• Web Developer toolbar (Firefox Add-on)• Web Accessibility toolbar for Opera (The Paciello group)• Web Accessibility toolbar for IE (The Paciello group)

Color Contrast Analysers• Juicy Studio color contract analyser (Firefox Add-on)• www.vischeck.com• Contrast analyser (The Paciello group)• Color Contrast Analyser (Vision Australia: in different languages)

List of all accessibility tools maintained by WAI - http://www.w3.org/WAI/RC/tools/complete


RESOURCES

Web Accessibility Guidelines(http://www.w3.org/TR/WAI-WEBCONTENT/)

Paciaellogroup.comWeb accessibility tools consortium

(www.wat-c.org)


http://www.wat-c.org

http://www.wat-c.org

THANK YOU!Mayank Jain


web accessiblity standards guidelines

Technology

visual blind

coding use style sheets

visual elementsprovide

visual elementsforeground

visual elementscolor

color blindhow

toimagesoutline images

toimagesreplace images