- Where's the Logic?
- Purposeful Web Page Construction
- Alternative Text Descriptions
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Purposeful Web Page Construction
HTML makes up the underlying structure of a Web page. HTML uses tags to define elements in a document. Each tag provides information about what that element is, rather than how it looks. For example, with HTML tagging, you indicate that an element is a Level 1 heading, not that the element is formatted in a particular way.
We are all guilty of using HTML as a formatting tool. When was the last time you used an H1 or H2 HTML tag to indicate a Level 1 or 2 heading? Only your screen reader knows for sure.
HTML has been and continues to be a document-structure description language, and that's what a screen reader depends on when reading a Web page. This leads to the first point about accessible Web pages.
Using structural elements correctly in Web page development makes all the difference to those accessing your Web content with a screen reader or other device.
Header Tags <H1>
Whenever possible, keep Web page content organized with header tags. HTML supplies you with six levels of headers. All six levels of headers are displayed exactly the same, regardless of what browser you are using. For example, <H1 is a Level 1 header tag, and is displayed as Times New Roman bold-face 24 point. More important, <H1 tells the reader that this is the first-level section in a Web page. <H2 indicates that this is a subsection of the first-level section. You get the idea. Listen to your Web page, and see if it makes sense in terms of structure.
If you have been using structural elements to produce visually pleasing Web pages, why not switch to using style sheets to achieve the same effect? You can then use structural elements to produce logically structured Web pages that make sense to someone "listening" to your Web page and still enjoy visually pleasing pages.
Cascading style sheets (CSS) were developed by W3C as a way to provide more formatting control over certain elements within HTML. For example, with cascading style sheets, you can define all H1 headers <H1 to be displayed as blue—using the Helvetica font face rather then the default black, Times New Roman. For each element in HTML, you can define a particular font size, face, or color.
Cascading style sheets are not complicated, and taking the time to learn how to use them is well worth it!
Quoting Passages of Text
Usually, in any type of document, passages of quoted text are set off from the main text by indenting the passage text within a paragraph. In HTML, the block quote tag <BLOCKQUOTE> works quite well for quoted text passages. The trouble is that the block quote tag is often used to format text in Web pages that is not intended to be a quote at all, as shown in Figure 1.
){kind=link}
Figure 1 Block quotes in HTML are often used to format text rather than set off a quote.
The interpretation of such a Web page is confusing to a screen reader user. The entire Web page would be taken as a quote and not make much sense at all.
Tagging elements with the intended tag use works best for accessible Web content.
The Power of Table Markup
Like other structured elements, we often use HTML table markup to force a Web page to look more appealing. We use it for formatting more often than its intended purpose—an orderly arrangement of information or data.
If you plan to use tables for their intended purpose, it's a good idea to be more explicit with table markup so that screen reader users can grasp a better understanding of the information set forth in the table.
Table markup is simple to use to create a matrix of rows and columns. The following example shows you the HTML markup for a table with four columns and three rows:
<TABLE BORDER=1> <TR> <TD>Heading1</td> <TD>Heading2</td> <TD>Heading3</td> <TD>Heading4</td> </TR> <TR> <TD>R1C1</td> <TD>R1C2</td> <TD>R1C3</td> <TD>R1C4</td> </TR> <TR> <TD>R2C1</td> <TD>R2C2</td> <TD>R2C3</td> <TD>R2C4</td> </TR> <TR> <TD>R3C1</td> <TD>R3C2</td> <TD>R3C3</td> <TD>R3C4</td> </TR> </TABLE>
This HTML markup produces the following result when viewed in a browser such as Microsoft Explorer or Netscape:
| Heading1 | Heading2 | Heading3 | Heading4 |
| R1C1 | R1C2 | R1C3 | R1C4 |
| R2C1 | R2C2 | R2C3 | R2C4 |
| R3C1 | R3C2 | R3C3 | R3C4 |
If you were to "listen" to this table with a screen reader, here's what it might sound like:
Listening to the information in a linear fashion like this can be very confusing. You have to remember the beginning of the information and keep track from there in order to understand it well.
It would be more helpful if the same information sounded something like this:
As you can see, hearing the header information along with the corresponding column and row information makes it easier on the listener.
Changing a few HTML markup tags transforms the table so that header information is linked to columns and rows for screen reader output.
The following example shows you how the same table uses additional HTML markup to link header information to column and row information. Notice that instead of defining the header information within the <TD> element that defines a regular table cell, we place header information within the <TH> tag that specifically defines a header cell.
Taking this a step further, each header cell can be identified with "id=" within the <TH> tag. Each regular table cell is then linked to a particular header cell. The key to linking this information is the "headers=" within the <TD> tag. The "headers=" corresponds to the id set within a particular <TH> tag. For example, if a header cell is set up as <TH id="t1">, the markup to link a regular table cell to that header cell is <HD headers="t1">.
Here is what the HTML looks like:
<TABLE>
<TR><TH id="t1">Heading1</TH>
<TH id="t2">Heading2TH>
<TH id="t3"Heading3</TH>
<TH id="t4">Heading4</TH></TR>
<TR><TD headers="t1">R1C1</TD>
<TD headers="t2">R1C2</TD>
<TD headers="t3">R1C3</TD>
<TD headers="t4">R1C4</TD> </TR>
<TR><TD headers="t1">R2C1</TD>
<TD headers="t2">R2C2</TD>
<TD headers="t3">R2C3</TD>
<TD headers="t4">R2C4</TD> </TR>
<TR><TD headers="t1">R3C1</TD>
<TD headers="t2">R3C2</TD>
<TD headers="t3">R3C3</TD>
<TD headers="t4">R3C4</TD> </TR>
</table>
Although the table looks the same when viewed in a browser, the underlying structure is more defined, making it easier to for a screen reader user to follow.