The Accessibility Verdict: HoustonTx.gov

This is a crosspost of dotgov.com.
First I looked at the District of Columbia web site and then New York City. We are looking for government (non-federal) web sites that are accessible. Both DC and NYC were disappointing, garnering a C- for accessibility with a limited assessment.

Now lets try Houston, Texas. This has to be good; Houston was honored (in 2008) as the most accessible city in the country for people with disabilities. Certainly this would apply to Houston’s Web site, right?

Above is a screen shot of the home page with the feature image, “Houston Honored as Most Accessible City for People with Disabilities” on the left below the menu. So let’s see what we have?

In-page Navigation on the Residents Page

This Houston web site home page is a beautiful example of simple headings on most of the main content sections of the page. There are three visible headings in the screen shot, on the left “City Highlights” and on the right, “City Headlines” and “Register for CitizensNet“. There are thee more of these headings on the right side of the home page that are not in the screen shot. But, surprise, they are not marked up as headings. Nothing is marked up as a heading. There are no HTML headings on this page.

To make matters worse, if that is possible, those six headings on the home page are images, which isn’t really that awful because you can have alt-text which is the same as the text in the heading. Not here. These “heading images” are background images – you cannot use alt-text on them. If, as is the case here, important content is being displayed as a background image, then other techniques must be used to convey the information, like hidden text positioned off screen. That’s not done here. Those headings are not available to anyone using a screen reader.

An important component of accomodations for in-page navigation is “skip links” which were mentioned in the report on the DC web site and I have talked about skip links on my site as well.

Images on the Home Page

I want to look at the images on the Houston home page in stages. These are the stages that I usually employ when evaluating sties for accessibility because different types of images need to be treated differently. We will consider active images, information images and decorative or formatting images.

Active Images

These are image links, image buttons or areas of image maps. The alt-text is especially important for these because screen readers will always try to speak something and if alt-text is not present it is often meaningless code that is spoken. There are 23 active images and only two lack alt-text. That’s not too bad, but one of them is an image named skiptocontent.gif which is supposed to be a link to the main content. So the alt-text should be “Skip to main content”. That would be good, but even better would be to define the target of this link at the beginning of the main content. They forgot that too.

There are some other minor errors like alt="NWS Logo" (describing the image) which should be alt="National Weather Service Forecast for Houston" or alt="NWS Forecast for Houston".

There are some other minor errors like alt="NWS Logo" (describing the image) which should be alt="National Weather Service Forecast for Houston" or alt="NWS Forecast for Houston".

Information Bearing Images

These are usually larger images which are not links. The alt-text should convey the same information as that conveyed visually by the image .Usually the text in the image works for alt-text. There are 23 larger images without alt-text including the rotating image gallery, top left, none of them have alt text. This is really kind of sad, because the alt-text for the image gallery is there as text, like, alt="Houston honored as most accessible city for people with disabilities."

Decorative and Formatting Images

There are bout 149 formatting images and most have correct alt-text, alt="". However 13 don’t have alt-text at all and four have alt="dotted line" which should be alt="".

Form Labels

There are four form controls on the City of Houston home page. None are labeled.

Keyboard Access

At the top of the page is a menu system for access to the various areas of the site. Below is a screen shot of that menu with one of the submenus open.

These so-called JavaScript fly-over menus are challenging for accessibility. I am not going to go into the various possibilities for making these accessible – for now, and for HoustonTX.gov, suffice it to say that none of those possibilities are applied here. The main menu items across the top are not in the tab order. A keyboard user cannot go to the RESIDENTS page using this menu. A keyboard user cannot use the menu system at all. It is true that a keyboard user may be able to find information on the site, using the unlabeled search form. But the menu system is not abailable to them.

Accessibility Scan of HoustonTx.Gov

As with the previous reports, I used Worldspace from Deque to perform an accessibility scan of http://houstontx.gov consisting of that home page, all houstontx.gov pages linked from the home page and all pages linked from those. The scan found 998 pages with 109,696 accessibility errors or about 110 errors per page. For NYC.gov I said 12 errors per page was a lot. This is a disaster!

When I use Worldspace for this task I tailor it to only look for errors that the testing software can be certain of. In other words I am not interested in dozens of pages of “potential violations.” There are around twelve such machine detectable errors. These include missing alt-text, empty alt-text on an image link, unlabeled form controls, no headings on the page, and no title attributes on frames.

Conclusion – F for Failure

It is truly disappointing how inaccessible the Houston web site is. It fails in every category. It may have been honored as the most accessible city for people with disabilities – but that has to be true only for people with disabilities who do not use the Houston City web site!