Accessibility

Accessibility HTML Techniques
1) Use ALT Text for Images

Make sure all informational images use ALT text. Blind people cannot see pictures or photos, but providing ALT text
will allow the screen reader to read out a description of the picture to them. For decorative images, its best to assign
a null value (alt="").
Alt Text Properties:
The Alt attribute isn't meant to show as a tooltip on hover.
The Alt attribute is meant to show if the image isn't or can't be displayed.
The title attribute is meant to show if you hover an image or link.
If there is no title attribute, but there is an alt attribute then IE will show the alt attribute as a tooltip.
2) The tabindex Attribute, According to Specification
The tabindex is used to provide a logical tab order when the default tab order does not suffice.
3) Text altfor the area elements of image maps
<img src="welcome.gif" usemap="#map1" alt="Areas in the library. Select an area formore
information on that area." />

<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"/>
<area shape="rect" coords="34,34,100,100"href="media.html" alt="Audio visual lab" />
</map>

4) Providing a title using the title element
<head>
<title>The World Wide Web Consortium</title>
</head>

Testing procedures

Examine the source code of the HTML or XHTML document and check that a non-empty title element appears in
the head section.
Check that the title element describes the document.
5) Providing definitions for abbreviations by using the abbr and acronym elements
The objective of this technique is to provide expansions or definitions for abbreviations by using the abbr and
acronym elements.
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
<p><acronym title="World Wide Web">WWW</acronym></p>

6) Providing link text that describes the purpose of a link for anchor elements
The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the
element. The description lets a user distinguish this link from other links in the Web page and helps the user
determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.

<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>
When an image is the only content of a link, the text alternative for the image describes the unique function of the
link.
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a>

7) Providing submit buttons
The intended use of a submit button is to generate an HTTP request that submits data entered in a form, so it is an
appropriate control to use for causing a change of context.
<form action="http://www.example.com/cgi/subscribe/" method="post"><br />
<p>Enter your e-mail address to subscribe to our mailing list.</p><br />
<label for="address">Enter email address :</label><input type="text" id="address"
name="address" />
<input type="submit" value="Subscribe" /><br />
</form>

8) Supplementing link text with the title attribute
The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If
the supplementary information provided through the title attribute is something the user should know before
following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.
<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
title="Read more about failed elephant evacuation">
Evacuation Crumbles Under Jumbo load
</a>

<a href="http://example.com/subscribe.html"
target="_blank" title="link opens in new window">
Subscribe to email notifications about breaking news
</a>

9) Using a Unicode right-to-left mark (RLM)or left-to-right mark (LRM) to mix text direction inline
The objective of this technique is to use Unicode right-to-left marks and left-to-right marks to override the HTML
bidirectional algorithm when it produces undesirable results.
<p>The title says "<span lang="he" dir="rtl"> , W3C</span>" in Hebrew</p>

<p>the title is <cite dir="rtl">AN INTRODUCTION TO <span dir="ltr">c++</span></cite> in
arabic.</p>
10) Using alt attributes on images used as submit buttons
The input element is used to create many kinds of form controls.
The alt attribute on all of these, it should be used only on image submit buttons.
<form action="http://example.com/prog/text-read" method="post">
<input type="image" name="submit" src="button.gif" alt="Submit" />
</form>

11) Using alt attributes on img elements
When an image contains words that are important to understanding the content, the alt text should include those
words. This will allow the alt text to play the same function on the page as the image.
<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more.Learn
more." />

Testing Procedure:
Examine each img element in the content
Check that each img element which conveys meaning contains an alt attribute.
If the image contains words that are important to understanding the content, the words are included in the text
alternative.
12) Using caption elements to associate data table captions with data tables
The objective of this technique is to programmatically associate captions for data tables where captions are provided
in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.
The captionelement may be used whether or not the table includes a summaryattribute. The captionelement
identifies the table whereas the summaryattribute gives an overview of the purpose or explains how to navigate the
table. If both are used, the caption should not duplicate information in the summary.
Note: Summary is used for Layout tables. Caption is mainly used for data tables.
HTML Output
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

Monthly savings
Month Savings
January $100
February $50

Testing Procedure:
Check for layout tables: determine whether the content has a relationship with other content in both its column
and its row.
o If no," the table is a layout table.
o If yes," the table is a data table.
If the table is a layout table, check that the table does not include a caption element.
If the table is a data table and it includes a caption element, check that the caption identifies the table
If both a summary attribute and a caption element are present for this data table, check that the summary does
not duplicate the caption.

13) Using h1-h6 to identify headings
Heading markup will allow assistive technologies to present the heading status of text to a user.
A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some
other auditory indicator.
Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to
more quickly find the content of interest.
HTML Output
<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that
humans eat...</p>
<h2>Fruit</h2>
<p> A fruit is a structure of a plant that contains its
seeds...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple
tree...</p>

Plant Foods that
Humans Eat
There are an abundant number of plants that humans
eat...
Fruit
A fruit is a structure of a plant that contains its
seeds...
Apple
The apple is the pomaceous fruit of the apple tree...

14) Using id and headers attributes to associate data cells with header cells in data tables
The headers attribute has no visual effect in ordinary web browsers, but can be used by screen readers.
The headers attribute specifies one or more header cells a table cell is related to.
HTML Output
<table style="width:100%">
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
<th id="phone">Phone</th>
<th id="addr">Address</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone@example.com</td>
<td headers="phone">+45342323</td>
<td headers="addr">Rosevn 56,4300
Sandnes,Norway</td>
</tr>
</table>

Name Email Phone Address
John
Doe
someone@example.com +45342323
Rosevn 56,4300
Sandnes,Norway

15) Using labelelements to associate text labels with form controls
A label is attached to a specific form control through the use of forattribute.
Note: The value of for attribute must be the same as the value of the idattribute of the form control.label element
is visible.
Label is used for following elements:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
The label element is not used for the following because labels for these elements are provided via the value
attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).
Submit and Reset buttons ( input type="submit" or input type="reset")
Image buttons ( input type="image")
Hidden input fields ( input type="hidden")
Script buttons (button elements or <input type="button">)

<label for="firstname">First name :</label>
<input type="text" name="firstname" id="firstname" />

Note: The label is positioned after input elements of type="checkbox" and type="radio".
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>

16) Using longdesc
longdesc attribute is used to point to a page with a long description of an image
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132" longdesc="w3s.txt">
Note: The longdesc attribute is not supported by any of the major browsers.
The <img> longdesc attribute is not supported in HTML5.
17) Using table markup to present tabular information
Using the tableelement with the child elements tr, th, and tdmakes these relationships perceivable.
Simple tables generally have only one level of headers for columns and/or one level of headers on the rows.

Example:

Monday Tuesday Wednesday Thursday Friday
8:00-9:00 Meet with Sam

9:00-10:00

Doctor Williams Sam again Leave for San Antonio

<table>
<tr>
<td></td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:00-9:00</th>
<td>Meet with Sam</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:00-10:00</th>
<td></td>
<td></td>
<td>Doctor Williams</td>
<td>Sam again</td>
<td>Leave for San Antonio</td>
</tr>
</table>

18) Using language attributes on the html element
The objective of this technique is to identify the default language of a document by providing the lang and/or
xml:lang attribute on the html element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document crit en franais</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document crit en franais...
</body>
</html>

19) Providing heading elements at the beginning of each section of content
The objective of this technique is to use section headings to convey the structure of the content. Heading markup
can be used:
to indicate start of main content
to mark up section headings within the main content area
to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer
navigation
to mark up images of text that are used as headings
20) Providing a description for groups of form controls using fieldset and legend elements
Form controls can be grouped by enclosing them within the fieldset element. All controls within a given
fieldset are then related. The first element inside the fieldset must be a legend element, which provides a
label or description for the group. Authors should avoid nesting fieldsets unnecessarily, as this can lead to
confusion.
fieldset>
<legend>I am interested in the following (check all that apply):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>

</fieldset>

21) Using the summary attribute of the table element to give an overview of data tables
The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief
explanation of how to navigate the table. The summary attribute of the table element makes this information
available to people who use screen readers; the information is not displayed visually.
The summary attribute may be used whether or not the table includes a caption element. If both are used, the
summary should not duplicate the caption.
22) Ensuring that opening and closing tags are used according to specification
Testing Procedure:
Check that there are closing tags for all elements with required closing tags.
Check that there are no closing tags for all elements where closing tags are forbidden.
Check that opening and closing tags for all elements are correctly nested.
23) Ensuring that Web pages are well-formed
Well-formedness is checked by parsing the document with a conforming XML parser and checking if the validation
report mentions well-formedness errors.
Procedure
Load each file into a validating XML parser.
Check that there are no well-formedness errors.
24) Using meta refresh to create an instant client-side redirect
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
</head>

25) Using the target attribute to open a new window on user request and indicating this in link text
The target attribute in a link that indicates it will open in a new window.
<a href="help.html" target="_blank">Show Help (opens new window) </a>

26) Using a button with a select element to perform an action
The objective of this technique is to allow the user to control when an action is performed
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">

27) Using OPTGROUP to group OPTION elements inside a SELECT
The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form
control such as a multi-select list or a combo box.
<label for="food">What is your favorite food?</label>
<select id="food" name="food">
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>

<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>
Testing Procedure

Check the set of options within a selection list to see if there are groups of related options.
If there are groups of related options, they should be grouped with optgroup.

28) Using HTML according to spec
Testing Procedure
For each HTML or XHTML page:
Check that the page uses only elements, attributes, and attribute values that are defined in the relevant
specification.
Check that elements, attributes, and values are used in the manner prescribed by the relevant specification.
Check that the page can be parsed correctly, according to the rules of the relevant specification.

29) Indicating required form controls using label or legend
The text field in the example below has the explicit label of "First name (required):". The label element's for
attribute matches the id attribute of the input element and the label text indicates that the control is required.
<label for="firstname">First name (required):</label>
<input type="text" name="firstname" id="firstname" />

30) Using HTML form controls and links
The objective of this technique is to use standard HTML form controls and link elements to provide keyboard
operation and assistive technology interoperability of interactive user interface elements.
HTML element Role Name Value State
<a> link
'title' attribute, text within <a>
element or 'alt' attribute if image
link. Concatenated if both text and
image 'alt' attribute are provided
'href' attribute

<button>
push
button
text inside <button> element or
'title' attribute
<fieldset> grouping <legend> element

<input type = "button",
"submit", or "reset">
push
button
'value' attribute

<input type = "image">
push
button
'alt' attribute or 'title' attribute

<input type = "text">
editable
text
<label> element associated with it
or 'title' attribute
'value' attribute

<input type =
"password">
editable
text
<input
type="checkbox">
checkbox
'checked'
attribute
<input type="radio">
radio
button
'checked'
attribute
<select> list box
<option> element
with 'selected'
attribute set to
"selected"

<textarea>
editable
text
text within
<textarea> element

31) Ensuring that id attributes are unique on a Web page
Errors can be avoided by making sure the Web page does not have duplicate id values.

Accessibility CSS Techniques
1) Positioning content based on structural markup
The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets while still
maintaining a meaningful presentation when style sheets are not applied.
The margins have been set to 0 to override the default behavior.
2) Using CSS to hide a portion of the link text
The rule set for the selector places the text to be hidden in a 1-pixel box with overflow hidden, and positions the text
outside of the viewport. This ensures the text does not display on screen but remains accessible to assistive
technologies such as screen readers and braille displays.

Note: Dont use visibility:hidden or display:none properties, since these can have the unintentional effect
of hiding the text from assistive technology in addition to preventing on-screen display.

a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

3) Using CSS letter-spacing to control spacing within a word
The CSS letter-spacing property helps developers control the amount of white space between characters.
h2 { letter-spacing: 1em; }

4) Using CSS to include decorative images
Background images can be included with the following CSS properties:
background,
background-image,
content, combined with the :before and :after pseudo-elements,
list-style-image.

5) Using percent for font sizes
The objective of this technique is to specify text font size proportionally so that user agents can scale content
effectively.
strong {font-size: 120%}

6) Using named font sizes
The objective of this technique is to specify a named font size that expresses the relative font size desired. These
values provide hints so that the user agent can choose a font-size relative to the inherited font-size.
strong {font-size: larger}

7) Using em units for font sizes
The objective of this technique is to specify text font size in em units so that user agents can scale content effectively.
Since the em is a property of the font, it scales as the font changes size.

If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more
specific selector.

strong {font-size: 1.6em}

8) Using CSS to change the presentation of a user interface component when it receives focus
To provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing
device
a:hover, a:active and a:focus

9) Using CSS margin and padding rules instead of spacer images for layout design
The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can
be used on any element that is displayed as a block; they add space at the outside of an element. The padding
properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used
on any element; they add space inside the element.
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }

10) Specifying alignment either to the left OR right in CSS
This technique describes how to align blocks of text either left or right by setting the CSS text-align property.

p.left {text-align: left}

<p class="left"> Lorem ipsum dolor sit </p>

11) Using relative measurements to set column widths so that lines can average 80 characters or less when the
browser is resized
The purpose of this technique is to ensure that CSS is used in a way that allows users to view content in such a way
that line length can average 80 characters or less.
This makes it possible for users with certain reading or vision disabilities that have trouble keeping their place when
reading long lines of text to view and interact with the content more efficiently. This technique also allows for
column width to grow wider as font sizes increase, which will reduce the possibility of clipping as the text size
increases.
#main_content {max-width: 70em}

<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

12) Specifying line spacing in CSS
Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced.
Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous
one.
p { line-height: 150%; }
13) Specifying the size of text containers using em units
The objective of this technique is to specify the width and/or height of containers, that contain text or that will
accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line
with changes in text size settings.
#nav_menu { width: 20em; height: 100em }

#nav_list { font-size: 100%; }

Accessibility Client Side Scripting

1) Allowing the user to extend the default time limit
2) Using redundant keyboard and mouse event handlers
3) Using scripts to make nonessential alerts optional
4) Providing a script that warns the user a time limit is about to expire
5) Providing client-side validation and alert
6) Using an onchange event on a select element without causing a change of context
7) Using both keyboard and other device-specific functions
8) Using functions of the Document Object Model (DOM) to add content to a page
9) Using scripts to control blinking and stop it in five seconds or less
10) Using progressive enhancement to open new windows on user request
11) Inserting dynamic content into the Document Object Model immediately following its trigger element
12) Reordering page sections using the Document Object Model
13) Using an expandable and collapsible menu to bypass block of content
14) Adding keyboard-accessible actions to static HTML elements
15) Using scripts to change the link text
16) Using script to change the background color or border of the element with focus
17) Using script to scroll content, and providing a mechanism to pause it
18) Calculating size and position in a way that scales with text size
19) Making actions keyboard accessible by using the onclick event of anchors and buttons
20) Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or
area

Accessibility

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Accessibility

Transféré par

Droits d'auteur :

Formats disponibles

Accessibility HTML Techniques

1) Use ALT Text for Images

Vous aimerez peut-être aussi