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)
The following table contains various HTML elements with an onClick applied and a tabIndex=”0″. The purpose is to determine when a person must provide a keyboard handler to an element that is being used as a clickable object.
Best practices for progressive enhancement demands that we use native HTML elements when ever possible. However with ARIA it is possible to use a role attribute to make any container act like a button, link or for that matter almose any type of an element.
Test the following elements for your self. Tab to one of the tests contained inside the table and press the enter key. If you see a popup alert message, the keyboard works with the element.
Example 1:
When Does onClick Work with the Keyboard Enter Key?
WCAG 2.0 SC 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)
The TABINDEX attribute can be used to control the tab order of a page.
By default, only links and form fields are tabable from the keyboard. The tab order of this elements can be controlled by using the TABINDEX attribute.
Elements with a positive TABINDEX (tabindex=”10″) will receive the first tab stops on the page. The lowest positive number will receive the first tab stop, and each number in succession will then receive focus as the user tabs through the page. Once all the positive TABINDEX numbers have been tabbed to, the tab order will continue with all the tabbable elements that have no TABINDEX value.
TABINDEX can also be used to make a non-tabbable element like a DIV able to receive focus using the JavaScript .focus() method.
Example 1:
Using TABINDEX to set Tab Order (Note: By default, the comment text area below has tabindex=4 and the submit comment button has tabindex=5, they should be the first two tab stops on this page.
Field
tabindex
Tab Order
INPUT tabindex=”10″
tabindex=”10″
1
INPUT tabindex=”20″
tabindex=”20″
2
INPUT tabindex=”50″
tabindex=”50″
5
INPUT tabindex=”40″
tabindex=”40″
4
INPUT tabindex=”30″
tabindex=”30″
3
Standards:
WCAG 2.0 SC 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)
The TABINDEX attribute can not only be used to control the tab order of a page, but can also be used to make non-focusable elements focusable with the JavaScript .focus() method and place non-tabbable items into the tab order.
By default, only links and form fields are tabable from the keyboard.
TABINDEX can also be used to make a non-tabbable element like a DIV able to receive focus using the JavaScript .focus() method.
Skip links are a requirement of Section 508. And can be accomplished in several different ways. In this method, we will use the JavaScript to create a link that surfaces when the user tabs into the control. Notice as you tab through this page, the skip navigation link appears just at the top of the AOL logo in a place where it does not obstruct the visual look and feel.
A skip link should be the first thing located at the top of the page, as the first tab stop. And it should forward focus to a location directly above the main content of the page.
Skip links are a requirement of Section 508. And can be accomplished in several different ways. In this method, we will use the CSS focusable property to create a link that surfaces when the user tabs into the control.
A skip link should be the first thing located at the top of the page, as the first tab stop. And it should forward focus to a location directly above the main content of the page.
The examples below use varius methods to create images using ASCII characters. Included are:
ACSII art which uses characters to draw pictures.
Emoticons which use printable characters to form facial expressions like a smiley face :-)
And the rather archaine leetspeak which uses letters and numbers to present words. this is often used to send email that can avoid being trapped as spam.
Example 1:
Providing text alternatives for leetspeak
Au5t1N T3x4s
WCAG 2.0 SC 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
This example shows how to provide a text alternative for an EMBED tag using NOEMBED.
Example 1:
Code
<embed src="../movies/history_of_rome.mov"
height="60" width="144" autostart="false">
<noembed>
<a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of
Rome"</a>
</noembed>
</embed>
WCAG 2.0 SC 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
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:
WCAG 2.0 SC 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
WCAG 2.0 SC 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
