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.
Sometimes, alternative descriptions for complex images like a chart are best done with data tables. These can be either on screen directly under the image or even as a popup page that is linked to the image.
Example 1:
A Pie Chart Representing the percentage of death attributed to various catastrophes
Catastrophes
%
Volcano
0.1%
Epidemic
19.8%
Famine
9.2%
Storm
3.2%
Earthquake
1.0%
War
66.8%
Code
A Pie Chart Representing the percentage of death attributed to various catastrophes
Catastrophes
%
Volcano
0.1%
Epidemic
19.8%
Famine
9.2%
Storm
3.2%
Earthquake
1.0%
War
66.8%
Works With
Using a Data Table as Alternative Text
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)
CSS Background images do not have an ALT attribute like the HTML IMG element. For this reason, they can not convey their meaining to assistive technology like the JAWS screen reader.
Generally speaking, it is recommended to only use CSS Background Images for decorative images that convey no meaning. Something like a corner gif or perhaps an icon graphic that is associated with HTML LINK text and does not convey any meaning that is not already conveyed in the text.
I have seen some novel uses where HTML text is styled with a background image overlaying the text. This allows the screen reader to read the text, while the sighted user only sees the image and not the underlying text. Although it would be better from several points of view to use an HTML IMG and the ALT attribute in this case. HTML images will be cashed when downloaded. CSS images are not. So there is a performance benefit. Also consider the SEO implications. CSS images are not indexed by the search engines.
Example 1:
Uses a background image to create an image that conveys no meaning.
Code
Example 2:
Uses a background image to create an image which has an alternate description as LINK text on the screen.
At the time of this writing, the HTML5 specification is still in draft form. And the CANVAS element is not showing any promise of being accessible. This could change, but for now it is up to the developer to provide alternative text for CANVAS.
Example 1 below shows the use of “Fallback Text”. HTML5 does provide this in case the browser does not support CANVAS. However, at this time, it it not readable by the JAWS screen reader so I doubt it will be helpful.
Example 2 below shows the best way to provide alternative text at this point in time. Using Alternative Text that is part of the HTML and not the CANVAS tag.
Example 1:
Using CANVAS’s fallback text.
Alternative text: a Red and Blue solid box about 1 inch square.
Code
function draw(id) {
var canvas = document.getElementById(id);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
Works With
Using CANVAS’s fallback is NOT RECOMMENDED to create Alternative Text
Browser
Screen Reader
Results
IE 9
JAWS 12
No
FF 4
JAWS 12
No
Example 2:
Using the HTML to create Alternative Text
Alternative text: a Red and Blue solid box about 1 inch square.
Code
function draw(id) {
var canvas = document.getElementById(id);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
Alternative text: a Red and Blue solid box about 1 inch square.
Works With
Using the HTML to create Alternative Text
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)
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
Example 1:
Code
;
Works With
Alternative Text for EMBED
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)
This example shows how to provide a text alternative for an applet.
Example 1:
Code
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)
This example shows a text alternative for a Java applet using the object element.
Example 1:
Code
Works With
Alternative Text for OBJECT
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)
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
PieChart.html:
A Pie Chart Representing the percentage of death attributed to various catastrophes:
Volcano 0.1%
Epidemic 19.8%
Famine 9.2%
Storm 3.2%
Earthquake 1.0%
War 66.8%
Works With
Using Long Description
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)