Posts Tagged ‘Accessibility’

Understanding How to Use CSS for Accessibility (Hiding Stuff)

Thursday, May 19th, 2011

For the most part screen readers don’t care about CSS. After all if you are a blind user, why do you want to know what color something is or where it is placed on the screen. This goes back to using HTML to mark up content, and using CSS to style the page. The screen reader generally only cares about the content.

There are a few exceptions. display: and invisible: are the two that stand out.

Example 1:

How to hide content from both screenreaders and visual users.

CSS Code


.hidden { 
display: none; 
visibility: hidden;
}

Example 2:

Hide only the visual content and let it be visable to the screen reader

CSS Code


.visuallyhidden { 
position: absolute; 
clip: rect(1px 1px 1px 1px); /* for IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
border: 0; 
padding: 0; 
width: 1px;
height: 1px ; 
overflow: hidden;
}

Example 3:

Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard. Great to create a skip nav that is usable by the keyboard only user as well as the blind user.

CSS Code


.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { 
clip: auto; 
height: auto; 
margin: 0; 
overflow: visible;
position: static; 
width: auto;
}

Standards:

ARIA Drag and Drop

Wednesday, May 18th, 2011

Drag and Drop operations have traditionally been very difficult for users who are blind, or otherwise cannot use a mouse. The ARIA Drag and Drop group of properties has solved the problem, although it is a bit cumbersome to implement.

ARIA uses aria-grabbed and aria-dropeffect to accomplish the task.

The Development Process

1. The developer must identify the draggable objects by setting the aria-grabbed to either true or false. Setting it to true indicates the object is grabbed. Setting it to false indicates it is draggable. Setting it to “” or “undefined” indicates it is not grabbable. Roles that support drag and drop are listitem and treeitem. The object must have a role declared for ARIA to work.

2. The developer must provide a way to select the draggable objects with the keyboard by setting the object’s aria_grabbed state to true. The JavaScript event onKeyDown can be used to detect if the user has selected an object by pressing the space key. Documentation also recommends using the Shift + Space to add a range of contiguous objects to the selection and control + shift to add non-contiguous items to the selection.

3. The developer must indicate the objects that can be drop targets using the aria-dropeffect. There are a number of properties that can be used to set aria-dropeffect:

  1. copy: A copy of the source object will be dropped on the target.
  2. move: The source object will be moved to the new location and removed from the orginial location.
  3. link: A shortcut link will be created.
  4. execute: the source is executed when it is dropped on the target.
  5. popup: Uses a popup menu that will let the user choose one of the other operations.
  6. none: No drop operation is supported. This is the default.

4. The developer is required to implement his/her own keyboard handlers to accomplish the dropping of the object. It is recommended that you follow the guidelines set out by the ARIA DHTML Styleguide. As an example, Control + M is used to drop once focus is on a droppable object. And ESC is used to cancle the operations.

5. After the operation the developer must:

  • Set all aria-dropeffect properties to “none” or remove them altogether.
  • Set all aria-grabbed of draggable objects to “false”.
  • Set all objects that are not grabbable must either omit the aria-grabbed property or have an aria-grabbed property set to “undefined”.
  • Set focus on the appropriate DOM element, and its role must also be determinable.

Note: The developer may want to consider adding a CSS style for the sighted keyboard only user to indicate visually what is draggable and where the drop points are located.

Alternative Method

The above steps are not for the faint of heart, and it takes a good knowledge of JavaScript to accomplish. So it may be appropriate to use an alternative approach. In fact, the alternative may be easier for screen reader users and keyboard only users.

As an example, if the task at hand envolves moving a picture to a album folder, you may want to provide a list of the pictures with check boxes that can be used to select all the images you wish to move. And then provide a drop down select list of the possible destination folders. This can be much easier in the long run.

Example 1: Creating a Draggable Object

Picture 1
Picture 2
Picture 3
Picture 4

Code


<div role="treeitem" aria-grabbed="false">Picture 1</div>
<div role="treeitem" aria-grabbed="true">Picture 2</div>
<div role="treeitem" aria-grabbed="undefined">Picture 3</div>
<div role="treeitem" aria-grabbed="">Picture 4</div>

Example 2: Creating a Drop Spot

Album 1
Album 2

Code


<div role="treeitem" aria-dropeffect="move">Album 1</div>
<div role="treeitem" aria-dropeffect="move">Album 2</div>

Example 3: Alternative

Picture 1
Picture 2
Albums:

Code


<input type="checkbox" id="picture1" aria-label="Select to move Picture 1">Picture 1 
<input type="checkbox" id="picture2" aria-label="Select to move Picture 2">Picture 2 
Albums:
<select aria-label="Select an Album in which to move the Pictures">
<option>Album 1</option>
<option>Album 2</option>
</select>
<input type="submit" value="Move Pictures">

Standards:

ARIA LABEL, LABELLEDBY and DESCRIBEDBY

Tuesday, May 17th, 2011

ARIA DescribedBy (aria-describedby), aria-labelledby and aria-label are all very similar and all can be used to communicate with the screen reader.

Example 1:

Aria Label
Aria Labelled By
Aria Described By

Code


<table>
<tr><td><span id="my_desc1">Aria Label</span></td><td><button aria-label="Aria Label">submit</button></td></tr>
<tr><td><span id="my_desc2">Aria Labelled By</span></td><td><button aria-labelledby="my_desc2">submit</button></td></tr>
<tr><td><span id="my_desc3">Aria Described By</span></td><td><button aria-describedby="my_desc3">submit</button></td></tr>
</table>

Standards:

ARIA DescribedBy

Tuesday, May 17th, 2011

ARIA DescribedBy (aria-describedby) is used to associate descriptive information to HTML elements. In doing so, the browser makes it available to assistive technology through the MSAA Description value. The aria-describedby points to a unique id or list of unique ids. It is very useful when providing a additional descriptions, and as an example, can point to a paragraph or a span encompassing a group of paragraphs. aria-describedby is very similiar to aria-labelledby

At the time of writing this document, I am not sure how well it is supported. Try the following example and find out.

Example 1:

Aria Described By

Code:


<span id="my_desc3">Aria Described By</span></td><td><button aria-describedby="my_desc3">submit</button><br />

Example 2:

Rublev's Trinity

This is a long paragraph containing the long description for the image.

It includes as much description as you need.

Code:


<img src="http://www.donaldevans.com/images/trinity.jpg" 
    aria-labelledby="long_alt" 
    aria-describedby="long_alt2"  
    alt="Rublev's Trinity" />
<div id="long_alt">
<p>
This is a long paragraph containing the long description for the image.
</p>
</div>
<div id="long_alt2">
<p>
It includes as much description as you need.
</p>
</div>

Standards:

ARIA LabelledBy

Monday, May 16th, 2011

ARIA LabelledBy (aria-labelledby) is used to associate descriptive information to HTML elements. In doing so, the browser makes it available to assistive technology through the MSAA Name value. The aria-labelledby points to a unique id or list of unique ids. It is very useful when providing a “label” for an input field, although it can be used to label almost anything.

The HTML label tag has traditionally been used to associate a text label with an HTML input tag; although, best practice is to provide either a label or a title attribute on the input field itself. And it is still recommended to accomodate older browsers and assistive technology.

Example 1:

Provide the info as it appears on your credit card:




Code


<div id="LabelInstructions">
Provide the info as it appears on your credit card:
</div>
<input type=text id="firstname" aria-labelledby="LabelInstructions FirstName">
<span id="FirstName"><label for="firstname">First Name</label></span>
<input type=text id="lastname" aria-labelledby="LabelInstructions LastName">
<span id="LastName"><label for="lastname">Last Name</label></span>

Example 2:

Search the Category

Code


<button id="searchbutton" aria-labelledby="searchlabel">
Search
</button>
<span id="searchlabel"> Search the Category </span>
</pre>
<p>

Standards:

ARIA Label

Monday, May 16th, 2011

ARIA Label (aria-label), is used to create a label from a text string. It takes the form of aria-label="text string". This could be useful when there is no on screen text to use for a label.

Example 1:


<button aria-label="Aria Label">submit</button>

Example 2:


<input type="text" aria-label="Aria Label">

Example 3:

Code:


<button aria-label="ARIA Label"><img src="http://www.donaldevans.com/images/trinity.jpg" alt="Rublev's Trinity" /></button>

Standards: