DAN STORM

• previous
• next

JavaScript and AJAX

JavaScript must be used in a way that it is not device-dependent. That is, it must work with a mouse, keyboard, and other pointing devices. The onmouseover and onmouseout event handlers are obviously device dependent, and thus should only be used if the function is not essential, such as when a graphic is swapped for another for purely cosmetic reasons. Do not user these event handlers to show and hide critical information unless you also supply event handlers for the keyboard, such as onfocus and onblur.

Along the same lines, it is best not to use the onchange event handler, often used in a drop list, because a keyboard user may find that perusing the list will trigger an event with each move of the mouse. It is best to have a submit button next to the list.

Do not use a hash sign or the JavaScript pseudo-protocol as a hyper-reference. Instead use a legitimate link in the href attribute. An old school technique is to place your function in the onclick event handler, and then call the same function with the onkeypress event handler for keyboard users. Users with JavaScript turned off can go to an alternate page, or a page instructing them how to turn JavaScript on. But a better technique is to write unobtrustive JavaScript that is device independant.

The last example might be a link used with jQuery, which can assign a function to an element, class or ID, thus more cleanly separating content from event handling.

Avoid auto redirects and auto refreshes, since they are a means of commandeering a browser, and take control away from the user where it should remain. If data is time-sensitive, a prompt can be introduced to authorize the redirect or refresh, or it can be updated with AJAX.

The Link Tag

The LINK element is commonly used to assign a style sheet to a page. But this element indicates other page relationships which can aid in accessibility. The rel attribute indicates the relationship of the file. The following example indicates that the CSS file referenced has a relationship of style sheet to the file that contains it.

Here is a list of other attribute values for the rel attribute.

• style sheet refers to the most commonly used link type, this refers to an external style sheet
• alternate refers to substitute versions of the page. These can be in other languages (such as French or Spanish) or other media types (such as PDF or PostScript), or alternative style sheets used for style sheet swapping
• start refers to the first document in a series of documents, of which the current page is a member
• next refers to the next document in a series, following the current page
• prev refers to the previous document in a series, preceding the current page
• contents refers to a document that acts as a table of contents for the pages
• toc refers to an alternate reference to a table of contents, not all browsers support this type
• index refers to a document that acts as an index for the current page
• glossary refers to a document that provides a glossary of terms related to the current page
• copyright refers to a copyright statement for the current page
• chapter refers to a document serving as a chapter in a collection of documents
• section refers to a document serving as a section in a collection of documents
• subsection refers to a document serving as a subsection in a collection of documents
• appendix refers to a document serving as an appendix in a collection of documents
• help refers to a document that provides help about the current document
• bookmark refers to a bookmark or key entry point within an extended document

The W3C states, "The rel and rev attributes play complementary roles-the rel attribute specifies a forward link and the rev attribute specifies a reverse link." The rev attribute has the same possible values, complementing the rel attribute, but defines related links with regard to the previous document in the series. These examples come from the W3C.

The following two statements are identical in effect.

Here are some additional examples.

The LINK element supplies metadata, and thus the screen reader will better be able to orient its user.

Site maps and Search Fields

Since "findability" is a key to usability and accessibility, it is best to supply an easy-to-find link to a site map page. This puts most content within easy reach of all users. A search feature also helps a user to find content without listening to, or tabbing through, all the content on a page. Ensure that the text field has a label. Without the label, only a sighted user is likely to know what the field is for.

Frames

Frames-based sites are becoming a thing of the past, but sometimes they are useful, especially in web-based manuals where the left pane serves as a table of contents. If you are going to use frames, you should give each frame a title, use the frameset doctype, and use the NOFRAMES element to specify alternative content for the user who cannot or will not use frames. If marked up correctly, frames can be accessible.

Iframes too can be accessible, and are in fact sometimes necessary if content is coming from an external source. If frames and iframes are not necessary this author recommends not using them. One way to dispense with iframes is to use the overflow property. The use of fixed positioning can create locked down menus similar to a left pane in a frameset. However, fixed positioning is not supported by IE6.

Session Timouts

WCAG 2.0 (2.2.5) specifies that "when an authenticated session expires, the user can continue the activity without loss of data after re-authenticating." The timeout property specifies the timeout period in minutes assigned to the session object in an application. If the user does not refresh or request a page within that period, the session ends. Many users with motor disabilities have difficulty completing a task, such as making a purchase, within the confines of a session. It is therefore recommended that a mechanism be provided to users to extend the session length, and retain all data so that the user need not start all over.

Security concerns are minimal because this would be a user-initiated action, though it is doubtless a further drain on site resources.

Miscellaneous Issues

Do not ever use scrolling or blinking text since it is too hard for many to read. Moreover, it is almost universally seen as bad design. Animated GIFs are also deemed unnecessary most of the time, though may perform the same function as Flash on a homepage or landing page.

The DEL and INS elements convey strikeout and insert text to indicate changes being made to a legal document. Unfortunately, screen readers do not yet support these elements.

• previous
• next