Universal Design for Web Applications

Links

This is a link:

<a href="/about">About this site</a>

This is not:

<span onclick="javascript:location.href='/about';">About this site</span>

Universal design dictates that you must use the tools that you have available to you in a consistent manner. JavaScript-based pseudolinking breaks both mobile and accessible usage scenarios, and confuses users with an inconsistent user interface.

In previous sections, we discussed semantic markup and the need to separate presentation from structure. In this case, we need to separate semantics from behavior. In Chapter 8, you’ll learn about Unobtrusive JavaScript—how to use JavaScript as an enhancement rather than out of necessity. With the second example, a browser, screen reader, or search engine will not identify this as a link—therefore you lose all of the benefits of the semantic markup.

In Chapter 9, we will teach you about WAI-ARIA—a specification to make Ajax accessible through additional HTML markup. Even if the earlier example were identified using the ARIA role of “link,” the ARIA Best Practices guide recommends, “Use the native markup as well as possible.”

You may have a really great reason to use this markup, but before you do, please read about Unobtrusive JavaScript (Chapter 8) and ARIA (Chapter 9).