Archive for the ‘Best Practices’ Category

Text Alternative for APPLET

Tuesday, June 7th, 2011

This example shows how to provide a text alternative for an applet.

Example 1:

Code


<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
   tic-tac-toe game
</applet>  

Works With

Alternative Text for APPLET
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Alternative Text for an OBJECT

Tuesday, June 7th, 2011

This example shows a text alternative for a Java applet using the object element.

Example 1:

Code


As temperature increases, the molecules in the balloon…


<img src="pie_chart.gif" alt="a complex chart" longdesc="pie_chart.html"/>

Works With

Alternative Text for OBJECT
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Using LONGDESC

Tuesday, June 7th, 2011

The LONGDESC attribute of the HTML IMG tag is used to link the image to a full description of the image itself. If the ALT attribute gets over 150 characters it is usually a good idea to create a long description of the image and place it into an HTML file. The LONGDESC attribute then points to that HTML file.

LONGDESC is used to provide access by some assistive technology like the JAWS screen reader to a simple HTML file that describes the image. It does not create link to the HTML file on the image. In the example of JAWS, the screen reader announces, “Press Enter for Long Description”.

Example 1:

Notice the use of the ALT attribute and the LONGDESC in the following IMG tags.


Code


<img src="/images/PieChart.png" alt="a complex chart" longdesc="PieChart.html"/>

PieChart.html:
<body>
 A Pie Chart Representing the percentage of death attributed to various catastrophes:
 <ul>
 <li>Volcano 0.1%</li>
 <li>Epidemic 19.8%</li>
 <li>Famine 9.2%</li>
 <li>Storm 3.2%</li>
 <li>Earthquake 1.0%</li>
 <li>War 66.8%</li>
 </body>


Works With

Using Long Description
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Text Alternatives for the HTML AREA attribute of Image Maps.

Tuesday, June 7th, 2011

The AREA element uses an ALT attribute to convey the meaning of each AREA in the MAP.

Example 1:

Notice the use of the ALT attribute in the following IMG and AREA tags.

href="reference.html" alt="Reference" />
href="media.html" alt="Audio visual lab" />

Code


<img src="welcome.gif" usemap="#map1" 
    alt="Areas in the library. Select an area for
        more 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>   

Works With

Alternative Text for the AREA element
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

HTML BUTTON Tag

Tuesday, June 7th, 2011

The HTML BUTTON tag uses the text of the button as it’s accessible name. Nothing more is needed.

Example 1:

Code


<button>Help</button></form>

Works With

HTML Button
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Buttons of Type Image

Tuesday, June 7th, 2011

The HTML BUTTON tabIMG tag has an ALT attribute and a TITLE attribute. The ALT attribute is used to convey the meaning of the image to assistive technology like the JAWS screen reader.
On the other hand, the TITLE attribute is used to create the visual flyout tool tip. A magnifier users sees this tool tip. Therefore it is important to use both the ALT and TITLE, even if they are exactly the same.

Example 1:

Using the ALT attribute on the INPUT TYPE=”image”.

Code


<form action="#" method="post">
<input type="image" name="submit" 
src="Example_Help.jpg" 
alt="Help" />
</form>

Works With

Using INPUTs of type IMAGE
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Using an image (IMG) as Link Text.

Tuesday, June 7th, 2011

When an image is used as a link, the ALT attribute provides the link text to assistive technology like the JAWS screen reader, and the title attribute can be viewed by the user of a a magnifier. Both are important to convey meaning to people with disabilities.

In the example below, the image is used as a link to a movie clip. When creating link text with an image, imagine you are speaking the link text to a friend over the phone. If the friend can understand the purpose of the link, you have successfully created accessible link text.

Example 1:

Using an image as link text IMG tag.

Mobile phone video of recent funeral procession in Jisr al-Shughour src="http://donaldevans.com/images/example_alt.jpg">

Code


<a href="story.html">
<img width="304" height="171" 
alt="Mobile phone video of recent funeral procession in Jisr al-Shughour"
title="Mobile phone video of recent funeral procession in Jisr al-Shughour"
src="example_alt.jpg">
</a>

Example 2:

Using text and an image as a link.


src="http://donaldevans.com/images/example_alt.jpg">

Mobile phone video of recent funeral procession in Jisr al-Shughour

Code


<a href="story.html">
<img width="304" height="171" alt="" title=""
 src="http://donaldevans.com/images/example_alt.jpg">
<br/>
Mobile phone video of recent funeral procession in Jisr al-Shughour
</a>

Works With

Using an Image as Link Text
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

HTML H Tag

Monday, June 6th, 2011

A screen reader like Jaws and some browsers like Firefox allow the use of the H key to navigate the page. The user simply presses the H key and focus is moved to the next H tag on the page. Jaws will read the contents of the H tag, and if the user is interested in this content, s/he can simply use the arrow down key to begin reading the content below the H tag on the page. This is similiar to the way we used skip navs in the past, but is much better and replaces the need for skip links. So you can imagine that H tags are used to wrap around the titles of main areas of content.

When: H tags are needed on every page. When a screen reader user hits a web page, the first thing s/he hears is the number of H tags on the page. H tags are used by screen reader users to quickly navigate to the pages main areas of content, and when hearing that H tags are located on the page, the user immediately knows that the page is screen reader friendly. Also, remember, that all major search engines index on H tags, making your page much easier to find.

So, the question soon becomes, “How many H tags do I need, and where should they be placed?” You need enough to make navigation easy. Realize, the screen reader user can press the H key and move from one H tag to the next, or s/he can bring the H tags up into a popup window that lists all the H tags on a page to make it easy to navigate to any H tag on the page. So the key is to create enough of them to make it useful, but not so many as to make it cluttered.
Where: H tags should be wrapped around all the titles of main content on the page. This example from the BBC is very good. Notice how the titles are very visual. They are bolded text, or they are have blue background colors and white text. It is easy for the visual person to take one glance at the page and know where the main areas of content are. It is our job it make it just as easy for a screen reader user or search engine. Can you see some places where H tags could be added? I would think “Explore”, “News”, “Sport”, “Don’t Miss”, “Learning English”, “Country Profiles”, and “BBC Services” could all use H tags.

screen shot showing placement of H tags

How: H tags are very simple. They take the form of:

Code:


    <H1>Title of Content</H1>

The number of the H tags is not really all that important. It is more important to have them then to worry about the proper numbering. Having said that, the W3C requires that an H2 tag be preceeded with an H1 tag, and an H3 tag should be preceded by an H2 and an H1 tag. In our world of agregated content, it is not always possible for us to do this, but if you can, it is helpful.

H tags can be formated with CSS:

Code:


    <style type="text/css">
      h1,h2,h3,h4,h5,h6{
      font-family: arial, 'sans serif';
      color:saddlebrown;
      font-size: 100%;
      margin-top: 0pt;
      margin-bottom: 0pt;
      margin-left: 0pt;
      margin-right: 0pt;
      display: inline;
    }
    </style>

We generally do not use H tags around links. The SR user can get to this places on the page by using the Links List window in JAWS.

You can use H tags around an image that is being used to denote a title if the image has an adaquate ALT attribute.

Example 1:

Top News of the Day

‘Mrs. Anthrax’ Out of Prison.

Sports News

For Lions Fans, Enough is Enough.

Business News

Feel Trapped By Your Job?

Entertainment News

The Holiday Duet You Have to Hear.

Code:


<h1>Top News of the Day</h1>
<p>'Mrs. Anthrax' Out of Prison.<p>
<h2>Sports News</h2>
<p>For Lions Fans, Enough is Enough.<p>
<h2>Business News</h2>
<p>Feel Trapped By Your Job?<p>
<h2>Entertainment News</h2>
<p>The Holiday Duet You Have to Hear.<p>

Works With

Using H Tags
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

HTML FIELDSET Tag.

Monday, June 6th, 2011

The HTML FIELDSET tag is used to group form fields together. As an example, if you have a series of checkboxes or radio buttons that all share the same label, you can use the LEGEND tag to associate one text label with all of the fields. See Example 1 below.

Another example of use is when you have several form fields on the page with the same label. If you have a shopping cart on which there is both a shipping address and a billing address both have first name, last name, street address, city, state, etc. In this case a LEGEND is read along with each form fields label. See Example 2 below.

Example 1:

Eye Color

<fieldset id="eyeColor">
<legend>Eye Color</legend>
<ul>
<li><input type="radio" name="eye_color" id="blueEyes"/> <label for="blueEyes">Blue</label> </li>
<li><input type="radio" name="eye_color" id="brownEyes"/> <label for="brownEyes">Brown</label></li>
<li><input type="radio" name="eye_color" id="greenEyes"/> <label for="greenEyes">Green</label></li>
<li><input type="radio" name="eye_color" id="otherEyes"/> <label for="otherEyes">Other</label></li>
</ul>
</fieldset><div id="code" class="code">

Example 2:

Shipping Address



Billing Address




<fieldset id="shipping">
<legend>Shipping Address</legend>    
<label for="fName1">First Name:</label> <input type="text" name="first_name" id="fName1"/>
<label for="lName1">Last Name:</label> <input type="text" name="last_name" id="lName1"/>
</fieldset>
<fieldset id="billing">
<legend>Billing Address</legend>    
<label for="fName2">First Name:</label> <input type="text" name="first_name" id="fName2"/>
<label for="lName2">Last Name:</label> <input type="text" name="last_name" id="lName2"/>
</fieldset>

Works With

FIELDSET and LEGEND
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

HTML LABEL tag

Monday, June 6th, 2011

The HTML LABEL tag is used to programmatically associate a piece of text on the screen with an HTML FORM field like a text input box or a drop down select box.

Example 1 below shows how to use an HTML LABEL. The LABEL’s FOR attribute points the the INPUT’s ID.

Example 2 below shows how to use a TITLE attribute to create a programmatically determinable label where the is no text on the screen.

If there is no onscreen text available you can also use a CSS technique to hide label off the screen.

Example 1:



<label for="firstname">FirstName*</label>
<input type="text" id="firstname">

Example 2:

Expense Month

<table>
<tr>
<th>Expense Month</th>
</tr>
<tr>
<td>
<select title="Expense Month" name=month>
<option>January</option>
<option>February</option>
</select>
</td>
</tr>
</table>

Works With

HTML LABEL ELEMENT
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards: