Consistency

When designing an entire site, creating a site that is consistent from page to page is perhaps one of the best things we can do for all visitors. The concept is quite simple. Design each page so that visitors will know what to expect from one page to another. An example of this would be the navigation system in your site. If the navigation system is located in the same spot on each page, the blind user will know what to expect as he or she moves through the site.

There is no specific technique for consistent page layout other than building in a certain amount of predictability throughout the site.

Headers(h1, h2...h6)

Imagine looking at a news paper. There is a lot of information on each page. Most people scan the page for bold text above each column to get a sense of what is on the page. We can think of a Web page in much the same way.

Web designers just starting out probably don't understand the importance of using headers when designing their pages. A lot of them will simply highlight some text and make it a larger font size and bold to draw attention to a section of the page. Screen readers do not recognize the difference in the bold text and regular text on the page. Screen readers DO recognize the difference between headers and regular text.

Screen readers can be made to speak all the headers on a page before the user even starts to surf the page. Just as we can scan a news paper (or Web page) visually for bold (header) text, so can the blind user if we used headers on the page.

All Web page editors are capable of applying headers to text. Headers are HTML tags. There are six header tags:

header size 1

header size 2

header size 3

header size 4

header size 5

header size 6

As you can see, header 1 is larger than header 2. This is opposite of how we think of font sizes; however, if we think of headers in terms of "importance" of information on a page, it begins to make sense. Imagine the following as a Web page:

An "h1" tag is used at the top of the page because it is the most important header on the page. Lower numbered headers would fall under it.

Using headers is perhaps one of the easiest things we can do to help organize information for screen readers, and make them more accessible to a blind user. The screen reader will speak the header number to show the importance of the information, and it can be made to jump to specific headers (h1, h2, etc.).

Layout Using Tables

A screen reader reads table rows and cells in a particular order from left to right just as we would read a page in a book. Look at the following table.

If a screen reader were to read this table, it would read in the following order:

Row 1, Column 1; Row 1, Column 2; Row 2, Column 1; Row 2, Column 2

The reader would read left to right across the first row and columns, and then across the second row and columns.

A lot of Web designers use tables to position text, images and other elements on a Web page. Tables were never intended for layout, but Web developers discovered early on that they could achieve a better look on their sites if they bent the rules a little and used tables to position elements on a page. By using tables, you can create a page that is laid out like a newspaper with columns. Look at CNN's page, and notice how the information is in columns.

This is achieved by using an invisible table with columns. The problem associated with this type of layout is that older screen readers would read a Web page from left to right through all the columns making nonsense out of the text as shown in the example that follows.

Here is an example of text in two columns:

This is how the text would sound in older screen readers:

"There is a 30% chance of Classes at the University of Wisconsin rain showers this morning, but they will resume on September 3rd. should stop before the weekend."

Ideally, a screen reader would read all the information in each column from top to bottom in order, i.e., column 1 then column 2. Newer screen readers can be made to read a columned page, but the older ones cannot.

This is NOT to say that you cannot use columns to organize your page, but to make you aware of the accessibility issues involved when presenting information in tables. If you use tables, try to keep them simple, and avoid using nested tables. To a blind user using a screen reader, a complex table used for layout is like a maze, and it's easy to get lost on the page if you cannot SEE where you are going. Test you pages in Lynx in the Tools section to see how the information on the page will be read by a screen reader.

The recommendation from the W3C is:

"Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version)."

For example, the information in the table above would be laid out in logical paragraph format (linear), one on top of the other:

"There is a 30% chance of rain showers this morning, but should stop before the weekend."

"Classes at the University of Wisconsin will resume on September 3rd."

Let me reiterate here that you CAN use tables with rows and columns on your pages, but keep them simple.

Tablin - A table Linearizer

In the Tools section of this site, there is an online service offered by the W3C called "Tablin". This tool will linearize content from tables and display it in a logical, linear format so that screen readers can read it in the correct order. The linear format can be placed on an alternate page, or used in lieu of tables on the original page.

Summary Attribute

A table can have a summary=" " attribute that can be added to the <table> tag. The summary attribute is a message that only a screen reader can read; it is not seen by visual users. In the summary attribute, you can indicate what the table is used for, and how it is laid out so that a blind visitor will have a sense of how to navigate the table.

Although some resources suggest that the summary attribute does not work with all screen reading devices, it wouldn't hurt to add it to your tables. Here is an example of how the summary attribute would look in your code:

<table summary="This table has two columns and three rows. Navigation is located in the left column.">

CSS for Layout

With HTML, we use tags like font, font size, bold, italic, font color, blockquote, page background color and others to give pages and text visual appeal. The HTML tags are not always friendly to assistive technology such as screen readers. Older screen readers would read out loud some of the html tags in the background. It is desirable to NOT use HTML tags.

The use of Cascading Style Sheets (CSS) is another, newer way to do the same thing, and it is the preferred method of styling text and pages in your HTML documents. By using Cascading Style Sheets, you can remove most of the HTML tags from your documents. CSS is a lot easier to use than HTML, and it is less time consuming than using HTML. Most commercial (and many private) Web sites are already using some part of CSS.

Some people with visual disabilities choose to use their own style sheets in lieu of the Web author's styles. For example, they might need to view the text in a bigger font size or different color contrast.

If you use style sheets, test your pages in different browsers, and test them without the style sheet information. The object of turning off the styles in you pages is to see if they are still legible. If your pages "degrade gracefully" (you can still read them) when you test them in different browsers or remove the styles, then you can be fairly assured that visitors to your site will have a similar experience.

If you are interested in learning more about cascading style sheets (CSS), contact us at the Accessibility Office at the Center for Excellence in Teaching. Use the Contact Us link on the left navigation bar.

Relative Sizing vs. Fixed Sizing for Fonts and Tables

Typically in a word processor, we have to decide what size we want our text to be. For the main header of a page, we might decide on a 32-point font, and for the body of the document, we might choose an 11 or 12-point font. Many Web designers practice the same when designing their pages. In Web editors, though, you have more options for sizing; you can use points, pixels, percent or nothing! Points, pixels and other units of measurement are considered "fixed" sizes. Percent and nothing are considered "relative" sizes.

One of the disabilities is low vision. A person with low vision might have to increase the font size on their screen in order to read the text. If the fonts and tables are set with fixed sizes, the low vision user might not be able to increase the font size on their screen. If the fonts and tables are set to relative sizes (either percent or none), the user will have control over the sizing on their screen.

Each browser (Internet Explorer, Netscape) has a control panel in it that allows any user to set the font size on their screen. If you do not specify a fixed font size on a page, that page will look for the font size set in the users' browsers. In other words, if you don't control the font size in your Web pages, the users' browsers will.

The same is true for tables; you can use fixed or relative sizing. Some Web designers might set their tables to "600 pixels", which means that the table would be 600 pixels on all monitors. You can also set your tables to percent. You could set your table to 50%, which would fill up half of the users' monitors, or you could set the the table to 100%, which would fill up the entire screen.

To recap, using relative sizing for fonts and tables allows the end users to have more control over the visual presentation of your pages.

Back to top

Navigate to other How To pages with the links below.