Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Setting Up a Test
With aDesigner, you can run two kinds of tests on a web page. The first is a test that tells you how the page will work for those who are blind. The second test tells you how the page will work for those with various visual problems, such as color blindness or low vision. As people age, their eyes tend to require more help to see things. Fortunately, aDesigner also helps you see how a page will look to someone who is 50, even if you aren't that old. A page that looks great to you might not work all that well for someone who has older eyes.
Begin with the blind test. Click Settings to display the configuration for this test, as shown in Figure 2. The default setup provides visual cues about problems on your web page. You can also set the program to test how long the user needs to visualize the page. Sometimes, a long or complex page can take long enough to visualize that, even with the proper tags and cues, the user won't be able to understand it.
)
Figure
2 Modify the blind test setup as needed to ensure that aDesigner tests your
page properly.
You can also test this page using the voice browser output mode. This option is very important because it gives you a true feeling of what the page is like to use. When you select this mode, close your eyes and try to visualize the page based on the voice cues you receive. Even though you know what the page looks like, you'll find it's harder to visualize than you might imagine.
Once you set up the test, click Apply and Visualize. aDesigner will perform an analysis of the page. The output reflects a number of accessibility factors, such as how difficult it is to reach specific areas of the page and the use of graphics. aDesigner will mark up the page to show areas you can improve; you'll receive an overall rating for the page and a line-by-line analysis of the code, as shown in Figure 3.
)
Figure
3 The test output provides both overall and specific results that you can
use to improve accessibility.
The upper-right pane contains the markup for this page. As the colors get darker, for example, the reading time increases. By looking for areas with dark highlights, you can reduce the visualization time for the page. Move the content to other pages or create new pages to hold the excess information. The idea is to make the pages short enough to visualize and understand. The lower-right pane provides an overall score for this page and indicates areas in which it could improve (navigability, in this case). The bottom center page provides line-by-line code analysis. Selecting a different error marks the page to show that particular problem. When an error affects a specific line, aDesigner automatically moves to that line.
The low-vision test comes next. Select the Low Vision tab in the upper-right pane and click Settings. The Set the Parameters (Low Vision Mode) dialog box appears, as shown in Figure 4. This test actually performs three tasks. Often, it's better to test one item at a time first, to reduce the complexity of any modifications. Afterward, you can perform all three tests to obtain a better idea of how your web page works in certain low-vision setups.
)
Figure
4 Test the various low-vision modes individually and then together to get
the best results.
The eyesight test checks everything from slightly nearsighted to slightly farsighted. Although you can't claim any responsibility for the user's vision or lack thereof, the ranges of vision deficiencies help you to understand how the page will appear if the user has these problems. You might decide to use larger text, for example, once you see how the page looks.
When working with color blindness, test all three settings. A page that looks fine with one color deficiency might not work at all with another. aDesigner detected color problems in different areas of the test web page, depending on which form of color blindness the test checked.
The crystalline lens transparency check is something I haven't seen in other programs designed to test accessibility. This test attempts to simulate the yellowing of the eye lens that occurs as someone ages. Because this test affects color in a different way than a color-blindness test does, you need to run it at several age groups. Someone who can see your page quite well at 40 might experience problems at 50.
The output for the low-vision test works the same as for the vision test. Choose an error in the bottom middle pane to see the markup in the upper-right pane. To understand a vision problem, you need to check as many modes as possible. This is one time when automated page generation and technologies such as Cascading Style Sheets (CSS) really help, because you can make changes in one place, rather than many.