Sr. Accessibility Analyst
The primary goal of Accessibility is to make certain that Information Systems can be used by people with disabilities. A properly implemented system will provide access to information to people that use assistive technologies and it will increase usability for everybody. This is due to the fact that most accessible rules one way or another make the system friendlier for use by all.
Accessibility techniques ensure equal access to information for disable and non disable users. Content and functionality can become fully accessible to people with one or more disabilities including visual, audio, kinetic, speech, and cognitive impairments.
To address these needs the accessibility guidelines are organized around four principles:
The principles above are purposely not specific to any guideline in order to include all needs. These constitute the general idea of what accessibility should cover. In general terms, accessibility is a subjective topic while compliance on the other hand is an objective one that abides with specific guidelines. There are guidelines that provide specific directives on what an information system should contain to be compliant.
The Rehabilitation Act, section 508 contains specific provisions that do address specific needs and has become law in the US. Although section 508 does not cover all needs it is a functioning methodology that is considered a significant progress in accessibility and there are continuous improvement efforts.
The following topics are addressed on the provisions of the section 508
A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
Non text elements are often used to communicate messages. The alt attribute provides textual information on images, graphical representations of text (including symbols) may communicate information for the displayed object. Textual information may be used on maps, animations, applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons etc.
The “longdesc” attribute is another textual presentation technique that is offered for more complex structures that need a longer explanation such as graphs.
The alt attribute should not be misused for lengthy descriptions. It should be short and precise and communicate the information as intended by the author without over-explanations.
The empty alt “” attribute is used when there are transparent spacers or other no information objects.
When picture and sound are used in any system equivalent alternatives are required.
Multimedia presentations involve audio and video and require the audio portion to be closed captioned. The closed captioned subtitles need to be synchronized with the video in real time. Multimedia files when played need to include easy to use control buttons for keyboard manipulation, including a mute option. The latest may be necessary for screen readers that read the captioning. In this case the original audio may conflict with the narration of the close caption.
Equivalent alternatives on multimedia imply that closed captioning and audio description of visual information needed for the presentation to be considered compliant.
Information should not be conveyed with color alone. Information that is conveyed with color should also be available without color. This provision not only affects people that are blind and color blind but is also a poor usability practice. Poor color usage affects all visitors in several ways such as perception of the message that the color conveys, readability on the screen by people with color deficiencies, and on black and white printouts.
A directive that relies on color may not be perceived by all users. For example, a form that instructs the user that labels on red font are mandatory will not be seen by people that are blind, color blind, or use special display methodologies that alter the font (CSS). In addition, it is a good usability practice to launch this directive with a feature that is perceived by all. An asterisk may resolve this problem, since the screen readers will read it and people with all vision abilities will view it and make the association that the field is mandatory.
Color contrast between background and foreground affects the readability of the content. An acceptable contrast between the font and the background it lays on is about 400 RGB difference. This refers to colored font, colored background or both. The furthest contrast is between black and white. The contrast may look adequate in bright colors but in reality this may not be the case; bright green or bright red for example, will not be readable in a black and white printout, and people with color blindness will not be able to read it. Dark and light contrast shall be used on all occasions.
The readability of content relies on fonts and how they are used to present text. Size, color, type, and spacing of the font affect the readability of a script. Style sheets are often used to adjust these properties.
Style sheets are often recommended for use in accessibility. Style Sheets are considered to have less accessibility barriers. However, the provision about readability indicates to stay independent of style sheets.
To clarify this discrepancy first we need to take into account the users. Frequently, people with severe visual impairment use their own style sheets to adjust on their screen and become readable. To do that they need to overwrite the existing style sheets but content that is heavily altered with style sheets may become unreadable. Therefore, the readability provision of section 508 calls for a style sheet independent authoring to the degree that the content becomes unreadable.
A good way to test and understand this guideline is to disable the style sheets and see the result.
Server-side images maps are not friendly to assistive technologies and constitute a problem with accessibility. On the other hand Client-side image maps can easily be accessible so they are preferred heavily.
The server-side image maps do not take text but instead use coordinates of the active region to send information to the server. This makes it inaccessible since no meaningful information is read by the screen readers.
If a server side image map cannot be avoided there is a way to make it accessible. This solution will require redundant links displayed with readable text. This is not a desired solution because any redundant element will require redundant work to be updated and quite often in real life, redundant items are not updated at all.
Client-side image maps are accessible taken that they contain they corresponding alternative text (alt tag) that provides the link’s information.
Unlike server-side maps, client-side maps do take textual information thus they provide the opportunity to the assistive technologies to read the assigned information loud. This is making the active region accessible since it becomes an understandable link, provided of course that meaningful text has been assigned to the link.
Data tables present a hurdle for people with visual disabilities. Assistive technologies read in linear mode thus there is not any direct association of the cell with the header. People with full vision can quickly browse a table and associate the header horizontal or vertical with the cell of interest.
To make tables available to screen readers programmatically the headers and the cells have to be marked appropriately. Table headers, horizontal and vertical, should be marked with the <th> tag and table cells with the <td> tag. The <th> tag makes the font bold and it will put it on the center of the cell; this is the reason why we see it often where it does not belong, namely on data cells. A <th> tag will make quick adjustments for visual presentation but it will not work with assistive technologies. On the other hand because of its visual properties (bold, center) it may not be used at all by programmers.
As a correct practice, the table headers should be used where they belong and not randomly for their visual properties.
When information is presented in a table format appropriate table tags shall be used. Preformatted tags <pre> create accessibility barriers. Appropriate markup language includes the table header and table cell tags and these cells are to be associated.
There are two ways to associate header and data cells.
The implicit solution uses the scope attribute to indicate row or column properties. On the top header column cell the scope=“col” is used.
Similarly, on the first heading row cell of each table the scope=“row” attribute is added.
The explicit solution requires more work but is considered more reliable for complex tables and works well with assistive technologies. Header cells are marked with the id attribute and data cells are marked with the header attribute. The header id attribute is assigned a code name (id=“code_name_here”) and the corresponding cells is marked with the same code name (header=“code_name_here”). The next header cell will be marked in a similar manner but with another code name (id=“another_code_name_here”) that will associate it with their data cells (header=“another_code_name_here”) and the same technique will continue to mark the entire table.
All header cells are assigned a code name that will associate them with the corresponding data cells so people that access the table with non-visual means will have full access to the data.
Frames are distinct areas that divide the page to segments. Although frames are not widely used when they are present they present an accessibility problem. Users of assistive technologies may become lost if the frames are not identified.
The title attribute may serve the identification purpose and provide some clarification between the navigational and fixed portions of the screen.
Flicker may cause seizure to people suffering from photosensitive epilepsy. Flicker, flash, or blink especially in high frequencies may cause seizures. The International Code Council (ICC) has identified the frequency limit of 2Hz.
Portions of the page that used to attract attention may be hazardous. Advertisements, fast moving objects, blinking of images are commonly seen items that fall into this category. Motion and blinking above 2Hz present a problem.
Marquees and moving text are usually on borderline (about 1.5 Hz) however they fall out of favor among users and may present a problem with epileptic individuals.
If everything else fails to make a page accessible, then a text only alternative may be used as a last resort. This is not really an option but rather a desperate way out. It creates additional work and is very difficult to maintain the text only page. Frequently when a page is update the text only page remains neglected.
The text only page should be equivalent in content and functionality as the main page. In addition, the text only page should be defined and easily accessed from the main page.
When scripting languages are used the display or function that the scripting provides should be read by assistive technologies and the function should also be activated with the keyboard.
A script with meaningful text on it will indicate the purpose of the script. In addition, many scripts provide mouse only functionality. The same function should be enabled with the keyboard.
A good example involves the dropdown menus with the “onchange” function. Using the mouse you can make the selection easily by point and click but to activate the same function with the keyboard you need to use the up and down arrows. Let’s assume now you need to select the third line option on the dropdown menu. The mouse may jump directly to the third line option and select it but the keyboard using the arrows will start from the first, then second, and then the third. The problem here is that the function is activated when a selection is made so when the keyboard is still on the first option the “onchange” function will be activated. Although your intention is to activate the third option you can do that only using the mouse and not the keyboard. Thus a different keyboard friendly script should be used that the function may be activated using the enter key.
Web pages have content, such as multimedia or specific displays like PDF, that a special technology is required to interpret it. When a web author requires a specific applet this applet has to be accessible by assistive technologies. This includes both public and proprietary plug in technologies, and they need to satisfy the accessibility standards.
In addition to accessible applet and plug ins, a concise and explanatory link has to be provided so the user will be able to download it.
Plug ins can be detected by the <applet> or <object> tags.
Web forms present a challenge to people with disabilities. The forms can be filled accurately, speedy, and correctly if they are properly coded and the cues are provided.
Electronic forms are consisted of two elements: a) the label and b) the input box. The label indicates what information should be entered on the input box and the input box receives the entry; for example a label will indicate “Last Name” and then the user will type his last name on the corresponding input box. A person with full visibility will have no problem locating these two related items but this is not necessarily the case with assistive technologies. To resolve the issue the label needs to be “tied” with the input box.
To associate the two elements the label will take the “Label For” attribute and the input box the “id” attribute. Specifically, in the code example below the label that indicates the Last Name will be:
<LABEL FOR=”lname”>Last Name:</LABEL>
and the input box will be:
<input type="text" id="lname" name="txtUserLastName"
In the image below, there are the examples of the first name, the last name, and the submit button. The input boxes will take the Label For attribute to establish their relationship with the corresponding input box respectively. The submit button will require above the “alt” attribute to make the entry accessible.
The solution discussed above is the explicit label approach. The implicit label approach has also been used on occasions however it was proven unreliable therefore it will not be presented in this discussion since its use is not recommended.
The navigation of a document relies heavily on the headings. Many assistive technologies display the headings in order to help the user to reach a special section without having to go through the preceding content.
Keyboard navigation is a linear process and the only way to speed up reading is to skip content that the user does not need at that time. Therefore, proper headings provide not only a proper way to display text but a navigating and orientation tool as well.
The HTML headings are read by screen readers to separate heading from text and interpret the hierarchical structure of the document. Appropriate markup will make a document readable in correct order by a screen reader. The H tags <H1> through <H6> are universally used to make available this feature. However, the H tags in most cases are used out of order because of their visual properties. It is commonly seen in web site to use the heading tags randomly and solely for visual presentation. An H1 tag may not produce the desired font thus they are used out of order disturbing the hierarchical structure of the document. A way to address this issue is to use Cascade Style Sheets (CSS) to produce the desired visual effects and still create a compliant document that will render properly with screen readers.
In addition, when a search engine is indexing a website the heading tags are given precedence and allow proper classification of the page, and in this matter the site, based on headings. Headings are to be used as a page process tool and not a mere visual presentation shortcut.
Proper headings will improve navigation and provide meaningful divisions in the page. User friendly and accessible navigation however is not limited to headings. The linear approach that many assistive devices use may be time consuming as well as frustrating.
To avoid unnecessary navigation, section 508 of the Rehabilitation Act introduced the skip navigation feature. Specifically, this provision is calling for a method that permits the user to skip repetitive navigation links. Compliant pages utilize a link that will land the user to the content area. This link is keyboard activated and it may or may not be visible.
A visible link may contain informative text or the link may be invisible. An invisible link is still read by assistive technologies and is keyboard activated. Additionally, the link may contain the same foreground and background color, or a small image that blends with the background. The display preferences will not affect the announcement of the screen reader.
People with disabilities may require more time to interact with a screen than the average user. Systems that require timed responses, such as filling a web form, should warn the user that time is about to expire and provide means to extend the allocated time.
A form that is timed out will clear all entered data frustrating the user. A pop up message with the option to extend the time is an easy and very efficient way to address the issue.