Web accessibility standards overview

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.

Test
Firefox 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.

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


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

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

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

Test
Using 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">

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

Test
• 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.

Test
• 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 / %).

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

Test
Check 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> Name Department Extension Room
    <td>Peter Johnson</td>
Peter Johnson DPI 7.1234 S-1001
    <td>DPI</td>
    <td>7.1234</td> Wei Zhang DPKO 3.9876 DC2-534
    <td>S-1001</td>
  </tr>
  <tr>
    <td>Wei Zhang</td>
    <td>DPKO</td>
    <td>3.9876</td>
    <td>DC2-534</td>
  </tr>
</table>


TEXTUAL CONTENT

Data tables e.g. #2
1. If the table has more than one logical level


TEXTUAL CONTENT

<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

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

Test
Go to Outline > Outline block elements.


TEXTUAL CONTENT

Use header elements to convey document structure
Why?
• 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>
  <h2>sub topic 1</h2>
  ... text of the section ...
</div>
  <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>

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

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

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

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

Test
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

Test
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

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

Test
Check 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.com
Web accessibility tools consortium
(www.wat-c.org)


THANK YOU!
Mayank Jain


Web accessibility standards overview

Recommended

Recommended

More Related Content

Similar to Web accessibility standards overview

Similar to Web accessibility standards overview (20)

Recently uploaded

Recently uploaded (20)

Web accessibility standards overview