| Up to this point we've concentrated heavily on designing to meet the needs of people who use screen readers and talking browsers people who don't see the screen and who use the keyboard, not the mouse or some other pointing device, to interact with the Web and other applications. This is important because many other kinds of assistive technologies, including voice recognition systems, switches, and other alternative input devices, are "mapped" to the keyboard. That is, the user's actions are "translated" into keystrokes and then carried out. But of course the Web is an intensely visual environment, and most people including most people with disabilities interact with it visually. In this chapter, we'll talk about some of the visual aspects of accessible design. We'll pay special attention to the needs of people with low vision and people with cognitive disabilities such as dyslexia, Attention Deficit Disorder (ADD), and Traumatic Brain Injury (TBI). These disabilities are often called "invisible" because they can be difficult for even trained observers to detect, but they may have a significant impact on the way individuals use computers in general and the Web in particular. You may be wondering what it means to be encouraged on the one hand to "use style sheets to control presentation and layout" (WCAG 1.0 Checkpoint 3.3) at the same time that you're required, on the other hand, to ensure that "documents . . . are readable without requiring an associated style sheet" (Section 508, paragraph (d); also WCAG 1.0 Checkpoint 6.1). Once you understand the idea of separating content and structure from presentation and layout, however, you'll recognize that these requirements aren't as contradictory as they may seem at first glance. Content and Structure versus Presentation and Layout The separation of content and structure from layout and presentation is an important concept that applies to all aspects of Web authoring. Here's how WCAG 1.0 defines structure and content as well as presentation and layout: The content of a document refers to what it says to the user through natural language, images, sounds, movies, animations, etc. The structure of a document is how it is organized logically (e.g., by chapter, with an introduction and table of contents, etc.). An element (e.g., P, STRONG, BLOCKQUOTE in HTML) that specifies document structure is called a structural element. The presentation of a document is how the document is rendered (e.g., as print, as a two-dimensional graphical presentation, as [a] text-only presentation, as synthesized speech, as Braille, etc.) An element that specifies document presentation (e.g., B, FONT, CENTER) is called a presentation element. Consider a document header, for example. The content of the header is what the header says (e.g., "Sailboats"). In HTML, the header is a structural element marked up with, for example, an H2 element. Finally, the presentation of the header might be a bold block text in the margin, a centered line of text, a title spoken with a certain voice style (like an aural font), etc. This means that the HTML document should include only the document content words, sentences, paragraphs, images, sounds, scripts, applets, and so on and the markup that describes their logical or structural functions and relationships. Content consists of both block-level and inline elements. Blocklevel elements usually begin on a new line in the document. Some examples of commonly used block-level elements include Headers (<h1>, <h2>, <h3> . . . <h6>). Divisions (<div> elements). Paragraphs (<p> elements). Ordered and unordered lists (<ol> and <ul>, respectively) and the items that belong to them (<li> elements). Forms (<form> elements) and the elements they contain ( <input> elements, <select> elements, and so on). Data tables (<table> elements and their constituents, such as header cells (<th> elements) and data cells (<td> elements)).
These are all examples of structural elements. Inline elements such as strong or emphasized text (<strong> and <em>, respectively) occur inside block-level elements. Text that has been tagged as <strong> is usually boldfaced, while words and phrases tagged with the <em> element are usually italicized. The visual effect is identical to the effect produced by the bold (<b>) and italic (<i>) tags. The difference is that bold and italic are purely presentational elements and purely visual ones at that whereas <strong> and <em> indicate the logical or rhetorical force of the word or phrase they embrace. Using markup to provide information about the structural and logical dimensions of your document is important because in each of these cases, the browser (Microsoft Internet Explorer, Netscape Navigator, Opera) or other user agent determines how each element will be rendered (displayed, printed, and so on) that is, unless the author overrides the built-in rendering instructions with a style sheet. Individual users may also override both the default renderings and the style sheets associated with the Web pages they're reading by telling their browsers to ignore author-defined fonts, colors, and style sheets in favor of a style sheet that the user specifies. If you are prepared to accept the default rendering, you don't need to do anything at all once you've created the content and tagged its structural and logical components with the appropriate HTML elements. But if you were prepared to accept the defaults, you probably wouldn't have read this far. So let's talk about how using style sheets can help you. There are definite advantages both for Web design in general and for accessibility in particular. |
