It's likely that many of the accessibility problems on your site affect all or many pages. The process of solving these general design problems may require you to take a step back to rethink how you do some of the things you do.
Responsive Design Trumps the One-Display-for-All Design
Often web designers make decisions with the intention of establishing as fixed and reliable a display as possible. They use elements that they hope will give all users the same experience. They may specify fonts, font sizes, colors, and set large sections of their pages into graphics to establish an aesthetic effect or a positional relationship among page sections: They always want the headlines on the left, the advertisements on the right above the links to news sections, etc.
Build in Flexibility and Learn to Love It
Web designers are frustrated by differences among browsers, mobile devices, and operating systems, and the options that users might choose that could damage or destroy the look of their pages. Users might use an alternative color scheme and cause form controls to appear in funny colors. They might change their screen resolution, or a new monitor driver might do it for them, and suddenly the right edge of your company logo gets pushed off the screen.
Users who come to the website using assistive technology already come with a different experience. They may be seeing only a small part of the page at a time or they may read the page one line at a time without knowing what will come next. And, what they experience as a line is not what you have carefully displayed as one line.
It is important to understand that no matter how fixed your page is, users do not all experience it the same way. The changes users make shouldn't damage your page, just make it different. For the user who has made those changes, this is the improved version of your website.
Images of Text versus Text
While it is true that modern screen readers read the alt-tags of your images, there are many reasons to avoid the temptation to use images of text rather than text formatted using style sheets.
First, the image-and-alt-tag approach requires double maintenance. If it becomes necessary to change the image, it is also necessary to change the alt-tag. It is not uncommon to find web pages with "Contact Us" visible on the screen and "Shopping Cart" in the alt-text, or something just as misleading. If your website provides an option for users to change the language of the interface, not only must someone painstakingly create all those images in all those languages, someone must also provide all the alt-text in all the languages and code the system to insert them.
If you are using styled text links, then users with low vision may be able to read your page simply by changing the colors and font sizes in the browser to a higher-contrast combination. But even after making that adjustment, images will remain the same illegible size and color. The all-important site navigation links are the very thing they cannot see.
Elements that Prevent Wrapping of Text
Developers tend to develop for the display they are using. They often place a wide image across the top of the page or a table somewhere on the page that will fix the with and cause other items such as paragraphs of text to fill the width of the screen according to those wider components. When a user sets the system to a lower resolution, however, that wide item extends off the right side of the web page, disappearing from view. Worse, the paragraphs of text, the links down the right side, and many other useful components disappear from view.
Users with low vision are especially confounded because they are already only seeing one part of the screen and must now, if they realize the problem, scroll left and right on the page as well as scrolling with the screen magnification software. It is likely that these users will not know they are missing the right-most items.
Solution: Make sure all banners and tables expand and contract.
Consider the reasons you want the banner across the top. It may be that the main reason was to set the width of the display so that all users would see the same positional relationship among page elements. If so, refer to the section above.
Break up your image. Set two images into sides of a table with the background color set to match. Allow the table to fill 100 percent of the width of the screen. The two images will appear to be one (to those users looking at the screen with mainstream browsers) but will be wider or narrower depending on the user's resolution.
Navigation Links: Top, Bottom, Right, or Left?
Users who navigate your site using the keyboard, especially those using a screen reader, can find repetitive groups of links confusing or tedious. Inexperienced web users will select an item on your home page and then believe that they have not arrived at a new page, because the first several seconds or minutes of reading will be exactly what they heard on the previous page. Experienced users may recognize these repetitive links as navigation bars, but are frustrated by constantly having to move through them or past them to the main content of the page.
The Skip Link
If you must have links across the top or down the left side, provide a link that allows users to skip over the repeated material to the page-specific content. See the Tips and Tricks to Improve Accessibility article for more details.
Placing Navigation Out of the Way
Although the skip link allows the keyboard user to jump over pesky unwanted material, it does not stop that material from being read by the screen reader. Using the skip link on a large web page can cause a several-second delay, also frustrating to users. A better solution, from the screen-reader-user's point of view, is to put the navigation links at the bottom or down the right side of the page.
Placing the links across the bottom has the obvious disadvantage, in some cases at least, of placing them out of the immediate view of sighted mouse users. So, unless your pages are extremely short and you are sure that the bottom row of links will almost always be on the screen, you must choose whom to annoy: keyboard users or mouse users.
Placing the navigation links down the right side has only one small disadvantage: if your page has a rigid design and your user's display is smaller than that for which you've designed, those items on the right get pushed off the screen. See the section "Elements that Prevent Wrapping of Text" for the solution to this problem.
Letting the User Choose
If your website has some sophistication, you can let users decide where the links should go. (See the "Navigation Bar Position" interface on AFB's website for one approach.) Mouse users can have them at the top, keyboard users at the bottom, and mobile visitors could see the now-ubiquitous "hamburger icon"—those three stacked lines, usually in the top left- or right-hand corner of a website, which people can select to see a menu of pages on the site.
