Archive for the ‘Accessibility’ Category

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:

ALT attributes on IMG elements

Tuesday, June 7th, 2011

The HTML IMG 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.

All HTML IMG tags MUST have an ALT attribute. Images that convey meaning should use an ALT attribute that conveys the meaning of the image. Images that do not convey meaning, like a corner.gif, should use ALT=”" (null). The null ALT tells the screen reader to ignore the image.

Example 1:

Using the ALT and TITLE attribute on an IMG tag.
Mobile phone video of recent funeral procession in Jisr al-Shughour

Code


<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="http://donaldevans.com/images/example_alt.jpg">

Example 2:

Be sure to capture all the text in the image as alternative text. Although you may use the TITLE for other purposes, in this case it in not necessary for accessibility.
Mobile phone video of recent funeral procession in Jisr al-Shughour

Code


<img width="304" height="171" 
alt="Summer Sale.  Save up to 60% during our largest sale of the season.  
Shipping for free.  Guaranteed to last. L. L. Bean.  Shop Now" 
title=""
src="example_alt_2.jpg">

Example 3:

An image that has no meaning, like this corner image, can use ALT=”".

Code


<img alt="" title="" src="http://www.donaldevans.com/images/corner1.jpg">

Works With

ALT and TITLE attributes in the IMG tag
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:

Accessible Forms – Overview

Monday, June 6th, 2011

WCAG 2.0 SC 3.3.2 is designed to help users avoid making mistakes when entering information in to data fields. This is done by providing labels for form fields that can be programmatically determined; providing good instructions and ques; and by providing meaningful and easy to find error messages.

Standards:

Alternative Text for Images – Overview

Friday, June 3rd, 2011

Standards:

Alert Role=”Alert” and ARIA-Invalid

Wednesday, June 1st, 2011


The ARIA role alert (role="alert") is a great way to make error messages accessible. Or for that matter any type of user message. When the role is used correctlly, the JAWS screen reader will automatically read the alert text that is dymanically created.

ARIA-Invalid (aria-invalid) is also used to indicate the field is either correct or incorrect.

Values for aria-invalid include:

  • aria-invalid=”grammer” – a grammitical error has occured.
  • aria-invalid=”true” – The value is invalid
  • aria-invalid=”false” – The value is valid. No error was detected.
  • aria-invalid=”spelling” – A spelling error has occured.

Works With

Role=”alert” Works with
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes
aria-invalid Works with
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 4 JAWS 12 No

Example 1:

Instructions: This will validate a form field and present an error message.
Use the “Check My Data” button to hear the alert, and use the Clear Field button to reset the message.



Code


function ARIA_Role_Alert_On() {
  document.getElementById('name_alert').innerHTML = 'Here is an error message!';
  document.getElementById("name_text").setAttribute("aria-invalid","true");
}
function ARIA_Role_Alert_Off() {
  document.getElementById('name_alert').innerHTML = '';
  document.getElementById("name_text").setAttribute("aria-invalid","false");
}
<p class="input">
<label 
  id="name_label" 
  for="name_text">
    Enter your name:
</label>
<input type="text" 
  id="name_text" size="15" 
  aria-labelledby="name_label" aria-invalid="false"/>
</p>
<p id="name_alert" role="alert"></p>
<p class="input">    
<input 
  id="data_check" 
  type="button" 
  value="Check My Data"  
  onClick="ARIA_Role_Alert_On();"  />
<input 
  id="data_clear" 
  type="button" 
  value="Clear Field"  
  onClick="ARIA_Role_Alert_Off();"  />
</p>

Standards:

ARIA-Landmark

Tuesday, May 31st, 2011

ARIA Landmarks are a good substitute for skip links, and allow the user to skip not just over repetitive navigation but to move directly to the various parts of a web page. The typical screen reader user must start reading at the top left of a page and continue line by line until the bottom right is reached. By using this simple convention, you can provide easy access to the main pieces of your page. And the syntax is very simple to use. This is one easy thing you can do to increase accessibility for the screen reader user.

ARIA landmarks are actually ARIA roles. And can be used like: role=”banner”.

JAWS provides several keyboard shortcuts for using ARIA Landmarks:

  • Move to Next Landmark – SEMICOLON.
  • Move to Previous Landmark – SHIFT+SEMICOLON.
  • Select a Landmark Item – INSERT+CTRL+SEMICOLON.
  • The following screen shot shows the JAWS window used to list all of the landmarks found on a page:
    Screen Shot of the JAWS Landmark List Window.

ARIA Landmarks available:

  • application – A region declared as a web application, as opposed to a web document.
  • banner – An area that contains things such as the logo or identity of the site sponsor, etc.
  • complementary – A supporting section of the document, designed to be complementary to the main content. Example: Sports News and Business News on a typical news page.
  • contentinfo – A region that contains information about the parent document. Example: copyrights and links to privacy statements.
  • form – A region of the document that represents a collection of form elements.
  • main – The main content of the document.
  • navigation – A collection of navigational elements. Example: A left navigation area.
  • search A region used to create a search widget.

ARIA Landmark Syntax: <div id=”content” role=”main”>

Example 1:

Code


<div id="doc"">
  <div id="header" role="banner">
    Banner/Header Area
  </div>
  <div id="search" role="search">
    Search Area
  </div>

  <div id="nav" role="navigation">
    Navigation Area
  </div>
  <div id="main_content" role="main">
    Main Content Area
  <div id="second_content" role="complementary">
      Complementary Content Area
  </div>
  <div id="footer" role="contentinfo">
    Content Info/Footer Area
  </div>
</div>

Works With

Using ARIA Landmarkd
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards: