Accessibility - Web Standards: Mastering HTML5, CSS3, and XML - page 372

JavaScript Accessibility
Hidden content, navigation, and strange user control behavior provided by scripting can cause confusion and
accessibility problems. For example, the onblur event used for checking user input can override the default behavior
of user agents and maintains focus until the correct answer is given, which makes it impossible for screen readers
to access any other parts of the page (including the feedback text provided elsewhere) without entering the correct
answer. Not all event handlers are device-independent, and some rely on the mouse ( onmouseover , onmouseout ,
ondblclick ) or keyboard ( onkeydown , onkeyup ), and cannot be triggered on all devices. If device-independent event
handlers are used (such as onfocus , onblur , onselect , or onchange ), content and functionality provided through
scripting are accessible, full keyboard control is provided, and the scripts do not cause confusion by modifying or
overriding normal browser functionality, then scripts can be accessible [46]. When JavaScript cannot be made natively
accessible, an accessible alternative must be provided.
Drop-down and fly-out menus are commonly used throughout the Web. However, the onmouseover and
onmouseout event handlers cannot be made directly accessible to keyboard users. Thus, an alternative must be
provided.
The onfocus and onblur event handlers can be inconvenient or inaccessible for keyboard users to trigger.
The onclick event handler is a device-independent event handler; however, some applications rely on the
mouse. In contrast to links or form controls, where the onclick event handlers can be triggered by pressing the Enter
key, plain text and table cells cannot gain focus while navigating with the keyboard. Consequently, keyboard users
cannot activate the onclick event for elements other than links or form controls. If this event is used with a form
element (for example, for form validation), it is not a problem, and the Submit button using the onclick event can be
activated by both pointing devices and keyboards.
The ondblclick event handler is generally mouse-dependent, because it is associated with the double-click of
the mouse, and there is no equivalent event on some other input devices such as on keyboards.
Drop-down selection lists such as language selectors usually apply the onchange event handler. Going directly to
the corresponding version by selecting an option from the list with a single click is very convenient for mouse users.
However, these lists are not accessible for keyboard users who cannot select anything else but the first option (after
pressing the cursor down key on the keyboard, the first option is selected immediately). One possible solution for the
problem is to add a button to be the trigger of the onclick event handler. However, in this case all users should press
the button after selecting the desired option to trigger the event handler.
The onselect event handlers can also be applied in a device-independent way.
Certain event handlers such as onkeydown and onkeyup can be triggered exclusively by the keyboard. The actions
associated with them cannot be accessed by the mouse.
Dynamic content, such as the current time presented by document.write , cannot be read by screen readers.

■ some features of dynamic web pages can also be achieved by pure Css (especially Css3) and some Javascript
code block eliminated (for example, transitioning effects or transforming menu items). however, screen readers
can handle certain Css features poorly, for example, elements hidden by display: none; or visibility: hidden; .

Note

PDF Accessibility
Adobe Acrobat and Adobe Reader provide accessibility (Figure 10-11 ) as well as screen reader options. They are
available under Edit ➤ Preferences or directly with the shortcut Ctrl+K. You can find the screen reader option under
View ➤ Read out loud.