White House main banner

President Barack Obama’s approach to information transparency is admirable. His connection to the public through the major media channels of the digital age: the White House web site, Facebook, Twitter, YouTube, and other social media methods is impressive. It’s a great way for the public to keep up to date on the activities of their government.

Unfortunately, the accessibility level of these web resources is — all in all — not really up to the levels one would hope for.

Obviously, the government has no control over the accessibility of the external resources they’re using to help promote their agenda and communicate with the public. These social media sharing sites are what they are, and regardless of their independent accessibility levels, I agree with the administrations choice to use them — to connect with their strong user bases — rather than attempt to build an expensive and potentially abandoned project to imitate the functionality.

However, the government does have direct and complete control over their own web presences, and would truly have wished to see a more thorough approach to web accessibility from the extensive network of new information-bearing web sites created by the Obama administration.

Obama’s network of web sites includes The White House and Recovery.gov as of May 2009. These sites exhibit a common set of problems; indicating a fairly straightforward set of issues which have been overlooked by the development team.

What’s Right?

In many respects, the accessibility of the Obama web resources is actually quite strong — the basics are well covered:

  • Headings use appropriate HTML (HyperText Markup Language) markup, providing strong navigation cues for visual and screen reader navigation.
  • Most images provide appropriate and useful alternate text.
  • Videos are captioned and transcribed.
  • Parts of the web site are available in Spanish. (Only a very small part, however — this is definitely not equivalency.)

In other respects, however, the site is wretched.

What’s Wrong?

The principle offender — hands down — is keyboard accessibility. (Yes, that was an intentional pun. Sorry.)

According to Section 508 of the Rehabilitation Act, which covers the accessibility of government web properties, keyboard accessibility is a requirement, and one which neither of these web sites actually pass successfully.

In my accessibility consulting business, I rarely address Section 508, since these rules are relatively feeble compared to their more modern standards covered in the Web Content Accessibility Guidelines, but in the case of a government entity, Section 508 of the Rehabilitation Act applies specifically and is legally binding, unlike other accessibility standards. As such, it’s critical to address the specific points of Section 508 when considering government web sites.

Subpart B — Technical Standards

ยง 1194.21 Software applications and operating systems.

(a) When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.

(c) A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes.

Official Section 508 web site (emphasis added)

Who are keyboard users?

Keyboard-only navigators tend to include people with conditions such as Cerebral Palsy or Parkinson’s, which can make mouse use very challenging. In general, any condition which limits the use or maneuverability of the hands is likely to result in an in

The White House and Recovery web sites are particularly offending in the area of keyboard focus. When navigating either of these sites, there is no indication outside of the browser default available at any point; and in some areas, not even this indicator is present.

In addition, the drop down navigation menus throughout both sites are unavailable to a keyboard operator. Although these navigation elements have been duplicated in an area in the footer, that footer is not readily available to a keyboard navigator — a skip link has been provided to skip from the top of the page to the main content, but not to jump to the navigation, requiring keyboard users to manually tab all the way through the main content.

With no keyboard focus, this is a very difficult task, requiring you to observe very, very carefully to attempt to identify where you are on the page — let alone distinguish which link you’re activating when you finally do reach this footer area.

On the home page of WhiteHouse.gov, there is a set of featured items; usually in a video format. Using a keyboard, it is only possible to trigger the initially featured video, since the links to trigger other features are completely inaccessible to a keyboard user.

Once a video has actually been reached, the keyboard user will be unable to play the video without downloading it (although these options are available, fortunately.) The video player used has a very common accessibility problem: although the player itself can be navigated using a keyboard, this is only true if you can successfully navigate focus into the player, which is not actually possible using standard keyboard navigation — it requires mouse activation to move focus to the video player.

All in all, a disappointing experience for the keyboard-only internet visitor.

Other Problems

Although I haven’t conducted a complete accessibility survey of these sites, there are a few other issues which stand out immediately. I’m just going to mention these in passing, but this doesn’t make them any less important:

  • Links in some contexts are not highlighted (no differentiation by color or by decoration.) Figure 1
  • Because some links aren’t highlighted, anything placed in a position which seems like a link might be; this causes some difficulty with breadcrumbs, since there is an area towards the top of each document which looks like breadcrumbs Figure 2, although the actual breadcrumbs are found below the content area. Figure 3
  • Footer links have insufficient contrast (2.73 according to the WCAG (Web Content Accessibility Guidelines) 2 luminosity contrast ratio.) These links include key references not represented elsewhere, including the link to the Spanish language version of the site and, ironically, the link to accessibility information. Figure 4
  • Comment forms are woefully inadequate — there are no label, legend, or fieldset elements. Although some fields are required, the only indication of this requirement is shown using a background image, and that information is therefore not available to anybody except a normal visual user. Figure 5
  • With images disabled, some additional color contrast problems are shown. The contrast level in some text-bearing images (including the header graphic) is well below acceptable accessibility levels.

How much work is this to solve?

None of these problems are really challenging to solve; there are web video players which offer much stronger accessibility than the default YouTube player currently in use (Easy YouTube by Christiann Heilmann or Accessible JW Player (no longer available) for self-hosted video, for example.)

Solving the keyboard accessibility issue is easy, as well. Including some basic CSS (Cascading Style Sheets) to provide a strong indicator for keyboard focus will immediately render keyboard navigation significantly easier. Something like the following will provide all that’s really needed:

a:focus {
outline: 2px solid #58b; 
background: #9cf!important;
color: #000!important;

Though the drop down navigation isn’t keyboard accessible, the web sites have already included all the links within the drop down set up at the bottom of the page. Adding a simple skip link which links to the bottom of the page (“Skip to keyboard-accessible navigation,” or something to that effect,) would quickly remove the bulk of that challenge.

This is the core of the accessibility problem on both web sites: a few very simple changes could eliminate a significant array of accessibility problems. Taking into consideration the change process in a government entity, it’s probably not a one hour solution; but it’s certainly not something that will cost taxpayers a significant sum.

Supplementary Figures

Unindicated navigation region
Navigation is not indicated by color or decoration.

These look like breadcrumbs
Figures which appear to be breadcrumb navigation.

The actual breadcrumbs
These are the real breadcrumb navigation links.

Low contrast text
Low contrast text.

Comment form on WhiteHouse.gov
Comment form on WhiteHouse.gov