Strengthening Web Users for Visual Impairment

Question

I listened to a recent episode of "Hanselminutes" where Scott Hanselman discussed accessibility in web applications, and this made me think about accessibility in my own application.

We all understand the importance of semantic markup in our web applications in terms of accessibility, but what about other simple improvements that can be improved for users with disabilities?

There were several times in this episode when I hit my forehead and said: “Of course, why I didn’t?” In particular, Scott talked about a website that posted a hidden link at the top of a webpage that said "skip main content." The link will only be visible to people using screen readers, and this allows their screen readers to navigate to menus and other secondary content. This is such an obvious improvement, but it’s easy not to think about it.

There is more to access and a general user experience than just creating the right XHTML and invoking it daily.

What are some of your simple tricks to improve visually impaired user experience?

Answer 1

Check out the fangs

Fangs is a browser tool for Firefox that emulates what the screen reader sees when they visit a web page. Its function is simple: display a transcript of what the screen reader will read to the user when visiting a web page. This is a useful tool for quickly analyzing whether you have structured your content effectively so that it is understandable and accessible to people with visual impairments, without forcing you to learn how to use (and purchase) a screen reader such as JAWS or Windows Eyes.

Answer 2

Creating accessible pages is something that is hard to think about if you have never done so. However, as soon as you learn the basic concepts, it is very easy to do in 95% of cases. Basically I will repeat what others said, but:

• Use tables for tabular data only
• Make sure you use the semantic tools available to you through HTML. This means using TH with the scope attribute. Use <em> instead of <i> and <strong> instead of <b>. Use abbreviation and abbreviation tags. Use definition lists. I can expand these things if anyone wishes.

• One of the most important things is to use the label tag in the input fields. For each input field, radio button, checkbox, and text input, you must:

  <label for = "username"> Username: </label> <input name = "username" / ">

• Add "skip navigation" or "go to navigation" depending on where large pieces of text are. If you work on a government site, it should be second nature that everything you create allows you to skip duplicate information.

• Do not use colors to highlight.

• Make sure all text is changed. This pretty much means you're not using px in your CSS.

• I will emphasize this: create semantic pages. Use H tags for your titles. Use ul / li for navigation.

• Use the alt attribute for all images. If you have a spacer gif ... well .. no. Otherwise, explain what the picture is and what its significance is for the content with which it is associated. do not use the "chart" as the alt tag. Use "Chart since the beginning of the year: $ 5,000 Q1, $ 4,000 Q2, $ 8,000 Q3" or something similar.

• Provide closed captioning or decryption for all audio and video components

The key point here is to provide those who have visual, auditory and motor impairments the same experience as with standard physical abilities. If you cannot insert a field into a field, the screen reader will also not be able to. If you cannot click on the text next to the flag to select it, the screen reader does not know that the text is associated with this flag.

You should often browse your site without stylesheets (ctrl-shift-s if you have Firefox and the web developer toolbar ) to find out if the page makes sense. If this does not make sense for you, as for a sighted person, for someone using a screen reader, it makes no sense.

Answer 3

It has been some time since I was at work, where we were to adhere to section 508, but what I remember was not affected by other posters ...

• Use only tables for data. Do not use tables for layout if you can avoid this.
• When using tables for data, column headers must be nested in TH tags, and you must use the header and scope attributes. Table tags must use the summary attribute.
• Images should have a value for the alt attribute, which describes what is happening on the image, and if the image has no purpose (this is a gasket image or something like that), then the alt attribute should be set to an empty string.
• Try using a text reader and / or navigate only through the keyboard and / or disable stylesheets. I believe you need to buy JAWS, but I'm sure there are free screen readers. You need to test the site with a screen reader to really understand how difficult it is to run most web pages without the hints interpreted by screen readers.

Answer 4

"Impaired vision" includes color blindness. I worked with someone who couldn't tell red from green too well, so it was very difficult to use it for any applications that used the motion style interface. In the industry in which we worked, the warnings in the lines were color-coded, so another form of display was useful for him, such as an additional column in the line with text such as warnings ("emergency", "warning", etc.).

Answer 5

The biggest problem with screen readers is usually tables for placing things on your page. Screensavers can't handle this. Put things in a div in your html and put them in a reasonable order. Then put the div on your page using css. Use tables to display the content that should be in the table.

Answer 6

The code for many web pages is structured as:

• Headline
• Up Navigation
• Left navigation
• Content
• Footer

With this structure, a hidden link to "Skip to Main Content" is useful. However, with the CSS layout, you can reorder so you have:

• Content
• Headline
• Up Navigation
• Left navigation
• Footer

Then you use CSS positioning and floats to move these different elements on the screen to make the page look the way you want it to look.

The main advantage of structuring a web page in this way is that if the browser does not support CSS, then the content is first on the page. In addition to screen readers, this is useful for mobile devices and search robots.

Answer 7

For partially visible, we must make sure that the text is not too small and significantly contrasts with the background color. We also need to make sure that the text can be resized using relative units of measure such as em, rather than absolute units like px (although in my opinion this is becoming less of a problem, as browsers increasingly prefer scaling to resize text )

It is useful for users of screen devices to get an idea of ​​how screen devices are used. The following article provides landmarks based on the observations of blind users browsing the Internet using on-screen devices; it's a bit outdated now, but it gives you a good idea of ​​what will help users of the reading screen and what not:

http://redish.net/content/papers/interactions.html

In addition, the American Blind Foundation has a section of its website on web developer tips on how to cater for people with visual impairments .

In addition to being visually challenged, we must consider those people with disabilities who interfere with their use of the mouse, as well as people with neurological impairments. If someone could provide resources giving advice on how to serve these people, that would be great.