Archive for the ‘ARIA’ Category

« Older Entries

ARIA Log

Tuesday, July 12th, 2011

ARIA's role=log is a live region that can expect to be updated with new lines of information added to the end of the other content. In addition, the older content may disappear.

Areas with role=log always have the aria-live value of polite.

In Example 1 below, JAWS will read each new text node as it is added, but does not read the entire log file.

In Example 2 below, Jaws reads the new line because it is the only thing in the log. In this case the old log entry is overwritten with the new log line.

Example 1:

Adding a log line to the end of the area.

Code


Adding a log line to the end of the area.
<div id="livelog1" role="log" aria-atomic="false"></div>
<button onClick="ARIA_Append_Log();">Add a log entry</button>
function ARIA_Append_Log() {
  var txt = document.createTextNode(Math.random() + " A line has been appended.");
  document.getElementById('livelog1').appendChild(txt); 
}

Example 2:

Updating a log by deleting the old line and adding one new line.
This is the start of a log

Code


function ARIA_Overwrite_Log() {
  document.getElementById('livelog2').innerHTML = Math.random( ) + 
  ": another new line has been written over writing the current line.";
}
Updating a log by deleting the old line and adding one new line.
<div id="livelog2" role="log">This is the start of a log</div>
<button onClick="ARIA_Overwrite_Log('livelog2','','');">Overwrite a log entry</button>

Works With

role=log
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 5 JAWS 12 Yes.

Standards:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

ARIA Button

Tuesday, June 28th, 2011

ARIA's role="button" allows the developer a lot of options when it comes to creating an accessible button. When applied properly, the ARIA role="button" can turn any element into a button, including, p, div, span, img, and others.

Buttons support the optional attribute aria-pressed. Buttons with a non-empty aria-pressed attribute are toggle buttons. When aria-pressed is true the button is in a "pressed" state, when aria-pressed is false it is not pressed.

The JAWS screen reader will announce it as a button and announce the state as either Pressed or Not Pressed based on the value of aria-pressed.

The keyboard handler is added for the keyboard only user. At this time, with the JAWS screen reader running, you can use either the mouse click or the enter key. Without JAWS running, both FireFox4 or IE9 will action the button with the mouse but not with the Enter key.

Notice the CSS [aria-pressed="true"] { font-weight: bold; } will style the text bold when the aria-pressed="true" condition is met.

Example 1:

This may not look like a button, but it acts like one.

Code


<style>
    [aria-pressed="true"] { font-weight: bold; }
</style>

<script>
  function ARIA_Button_Key(event) {
    if(event.keyCode == 13){
      ARIA_Button()
    }
  }
  function ARIA_Button() {
    var getvalue=document.getElementById("ARIA_button").getAttribute("aria-pressed");
    if (getvalue=="false")
    {
      document.getElementById("ARIA_button").setAttribute("aria-pressed", "true");
      document.getElementById('button_alert').innerHTML = "aria-pressed has been set to true.";
    } else {
      document.getElementById("ARIA_button").setAttribute("aria-pressed", "false");
      document.getElementById('button_alert').innerHTML = "aria-pressed has been set to false.";
    }
  }
</script>

<p
    id="ARIA_button" 
    role="button" 
    aria-pressed="false" 
    tabindex="0" 
    onClick="ARIA_Button();" onkeyup="ARIA_Button_Key(event);"
>
This may not look like a button, but it acts like one.
</p>
<p id="button_alert" role="alert"></p>

Works With

role="button"
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

  • WCAG 2.0 SC 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
  • WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Posted in Accessibility, ARIA, Best Practices | No Comments »

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:

Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

Alternative Text for Images – Overview

Friday, June 3rd, 2011

Standards:

Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

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 id="name_alert" role="alert">
<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();"  />

Standards:

Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

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:

Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

ARIA-Required

Tuesday, May 31st, 2011

ARIA Required (aria-required) indicates if a form field is required. The traditional method has been to add a “*” to the end of the fields’ LABEL text, and this is still recommended until all browsers and AT support the aria-required property.

aria-required uses “true” and “false” to indicate the property. “True” makes the field required, and “false” is not required.

Example 1:

Setting aria-required to true:

Code


<form action="submit.php">
<label for="firstname">First Name*</label>
<input type="text"
	id="firstname"
	name="firstname"
	size="50"
	aria-required="true">
 </form>

Example 2:

Setting aria-required to false has no effect on the screen reader:

Code


<form action="#">
<label for="title">Title</label>
<input
  type="text"
  id="title"
  name="title"
  size="50"
  aria-required="false">
<label for="firstname">First Name*</label>
<input
  type="text"
  id="firstname"
  name="firstname"
  size="50"
  aria-required="true">
</form>

Works With

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

Standards:

Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

ARIA Selected

Tuesday, May 24th, 2011

ARIA Selected (aria-selected) Indicates the current "selected" state of various widgets. However, it is not supported at the time of this article, however it can be simulated using the aria-label attribute.

Aria-selected is supported in roles gridcell, option, row, and tab. It's possible values are true, false, undefined.

Example 1:

Code


 <ul>
	<li><a href="#" role="tab" aria-selected="true" aria-label="selected">Tab 1</a></li>
	<li><a href="#" role="tab" aria-selected="false"  aria-label="not selected">Tab 2</a></li>
	<li><a href="#" role="tab" aria-selected="undefined"  aria-label="not selected">Tab 3</a></li>
 </ul>

Works With

Using ARIA SELECTED
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 4 JAWS 12 No

Standards:

  • WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
  • ARIA1: Using the aria-describedby property to provide a descriptive label for input controls or Instructions: Labels or instructions are provided when content requires user input. (Level A).
  • Aria-selected (state)

Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

CSS Hide and Show

Friday, May 20th, 2011

The following example uses various CSS styles, dynamic Javascript and ARIA roles/properties to create an accessible accordion type hide/show area.

  • CSS hidden is used to hide the content.
  • CSS not_hidden is used to show the content.
  • CSS focus is used to highlight the current focused control with a yellow background.
  • Depending on the current state of the content (either hidden or not hidden) the Javascript setattribute method is used to:
    • dynamically change the arrow image from pointing down to right.
    • dynamically change the aria-expanded property to indicate the state of the accordion
    • dynamically change the aria-label property to indicate the state of the accordion, either open or closed (Just in case aria-expanded property is not supported in the current browser/AT).
    • dynamically change the class from hidden to not_hidden in order to hide and show the content.
    • dynamically move focus to an H tag inside the newly exposed content, causing the screen reader to speak and notify the user that content on the page has changed.
  • Other ARIA roles/properties used:
    • ARIA role is set to region.
    • ARIA role is set to button
    • Aria-labelledby is also used

Example 1:

Code


<style type="text/css">
.hidden {
    display: none;
    visibility: hidden;
}
.not_hidden {
	display: block;
	visibility: true;
}
:focus { 
	background-color:yellow;
}
</style>

<script language="JavaScript">
function ARIA_HideShow(e) {
	// Get the current class either hidden or not_hidden
	var getvalue=document.getElementById("ARIA_content").getAttribute("class");
	if (getvalue=="not_hidden")
	{
		// Set Image
		document.getElementById("arrow").setAttribute("src", "http://www.donaldevans.com/images/right_arrow.png");
		// Set the aria-label
		document.getElementById("myButton").setAttribute("aria-label","Drawer Collapsed. Click to expand.");
		// Set the aria-expanded
		document.getElementById("ARIA_content").setAttribute("aria-expanded","false");
		// Set the Class to hidden
		document.getElementById("ARIA_content").setAttribute("class","hidden");
		// Move Focus back to button
		document.getElementById("myButton").focus();
	} else {
	// Set Image
		document.getElementById("arrow").setAttribute("src","http://www.donaldevans.com/images/down_arrow.jpg");
		// Set the aria-label
		document.getElementById("myButton").setAttribute("aria-label","Drawer Expanded.  Click to collapse.");
		// Set the aria-expanded
		document.getElementById("ARIA_content").setAttribute("aria-expanded" , "true");
		// Set the Class to hidden
		document.getElementById("ARIA_content").setAttribute("class","not_hidden");
		// Move Focus to content
		document.getElementById("hTag").focus();
	}
}
</script>
<span>
<button id="myButton" 
    aria-label="Drawer Expanded.  Click to collapse." 
    aria-labelledby="myButton" 	
    onClick="ARIA_HideShow(event);" role="button">
      Drawer 
</button>
<img id="arrow" src="http://www.donaldevans.com/images/down_arrow.jpg" width="10" alt="">
</span>
<hr/>
<div id="ARIA_content" 
    class="hidden" 
    role="region" 
    aria-exanded="false" 
    tabIndex="-1">
    <h2 id="hTag" tabIndex="-1">
          Lorem ipsum
    </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum.
</p>
</div>
<hr/>

Standards:

  • WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

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:

Tags: , , ,
Posted in Accessibility, ARIA, Best Practices, WCAG | No Comments »

« Older Entries