This isn’t an ideal world, but too many JS developers code as if it is. We get so caught up in the wonders of what we can create that we forget that not everyone can share them.
Many developers don’t follow these practices because they assume the practices require extra work, and for the most part, they do. However, the work doesn’t have to be a burden—not when the results can increase the accessibility of your site. In addition, many companies now require that their web sites meet a certain level of accessibility. It’s better to get into the habit of creating accessible pages in the beginning than to try to fix the pages, or your habits, later.
One suggestion is to base feedback on events that can be
triggered whether or not you use a mouse. For instance, rather than
capture mouse click, capture events that are triggered if you use a
keyboard or a mouse, such as
onblur. If you have a drop-down menu, add a
link to a separate page, and then provide a static menu on the second
After reviewing the tutorial at WebAIM, you might want to spend some time at the W3C’s Web Accessibility Initiative (at http://www.w3.org/WAI/). From there you can also access the U.S. Government’s Section 508 web site, which discusses what is known as “508 compliance.” Sites that comply with Section 508 are accessible regardless of physical constraints. At the web site, you can access various tools that evaluate your site for accessibility, such as Cynthia Says (at http://www.cynthiasays.com/); convert your nonaccessible Word or Adobe PDF documents into HTML, such as the Illinois Accessible Web Publishing Wizard (at http://cita.rehab.uiuc.edu/software/office/); and help you develop accessible content from the beginning, such as the Web Accessibility Toolbar (at http://cita.rehab.uiuc.edu/software/office/).
Whether your site is located within the United States or not, you want it to be accessible; therefore a visit to Section 508 is useful regardless of your locale.
Of course, not all accessibility issues are related to those
care for it and choose to disable it. For both groups of people—those
important to provide alternatives when no script is present. One
A better technique is to provide static alternatives to the
drop-down menu, also provide a standard hierarchical linked menu; when
script to expose form
elements for editing based on user interaction, provide the more
traditional links to a second page to do the same.
The tag that enables all of this is
noscript. Wherever you need static content,
noscript element with the
content contained within the opening and closing tags. Then, if a
browser or other application can’t process the script (because
noscript content is processed; otherwise,
1-3 shows our original example with the addition of
noscript. Accessing the page with a
preferences, the page should display with the link labeled “Original
The example is just a simplified use of
noscript; you’ll see more sophisticated uses
later in the book.
As useful as
noscript is, in
a more complicated page, it can become tedious working with embedded
noscript elements scattered about.
The next section introduces an alternative approach.
A second instance in which
noscript content is processed is when a
browser or other application has scripting enabled but can’t work
with the MIME type of the scripting block. This is also a time when
the script can’t be executed, and the
noscript content should be processed.
However, many popular browsers such as Firefox and Safari don’t
noscript content in
these circumstances. This is an error, and one you should be aware
of if you depend on
The more you add to a web page, the harder it becomes to
functionality and then use
to provide alternatives, your pages could get large and
Another approach, one I recommend when you’re hiding and showing web content based on user interaction, is to design the page with static elements, and then use script to either hide these elements and provide the alternative dynamic content, or actually leave the static elements in and then provide the dynamic as an additional option.
You might as well put up a “Wow, you’re really an annoyance” sign because that’s basically what you’re saying.
Firefox also provides what it calls the DOM Inspector. These very helpful utilities allow you to inspect the DOM objects within the page, including the following very useful information (the computed style is shown in Figure 1-4):
- DOM Node
Node name, type, class, namespace URI, and value
- Box Model
Position, x and y values
- Computed style
The default styles for the object
- XBL Binding
The Extensible Binding Language (not covered in this book)
- CSS Style Rules
The CSS style rules that apply by default for an element and are given in the stylesheet