Last month (March 2012), Disability.gov (@DisabilityGov) relaunched its website; there is an announcement in its newsletter. I discovered this actually by coming across an article posted on Twitter, A Look behind the Scenes – Part I: Making Disability.gov Accessible which discusses considerations made when developing an accessible website.
Naturally, this peaked my curiosity and was compelled to investigate. I found mixed results. Every website, no matter how great the foundation, is a work in progress and could use improvements. Disability.gov is no exception. Here’s my review of the home page.
- Heading usage needs improvement. Currently no H1 and only two H2 elements, nothing else. Besides the H1, suggest at least adding headings for the featured/slide content and the Connect section at bottom.
- In very top section, the elements are keyboard accessible which is great, but the visual placement of print button is out of tab order which makes it a little confusing. (On other pages, three added text links in this area compound the problem.)
- The “Skip to Page Content” link is good, but needs a JavaScript enhancement for browsers that don’t support the functionality. The fix is explained at end of article Back to Basics: Skip to Main Content Links by @TerrillThompson (which I implemented on Easy Chirp). (Skip-to link is the first of three main features listed on the site’s accessibility statement.)
- I like the implementation of the search form (besides the 1 extra span in the markup). It uses a visually hidden label and an HTML5 placeholder attribute.
- High contrast controls are good as the input label and submit button are included. But there are a few issues; the first two mesh with usability. (High contrast is the second of three main features listed on the site’s accessibility statement.)
- It seems that “Full Graphics” is a poor choice of words for the default state. After all, both states have the graphics.
- There are only two options, so why have a select dropdown? Unless more options are planned, I suggest using two simple radio options or a single checkbox option.
- While in high contrast mode, text links in the featured/slide content are unreadable (yellow on white).
- About the feedback modal/overlay window:
- After opening, the focus is managed and the feature is keyboard accessible, which is super. But the “Save” button is misleading and confusing. It should simply be “Submit”; the user is not saving the selection for later, but actually submitting his or her response.
- After closing the feedback modal/overlay window, the keyboard focus is lost. When closing, suggest placing focus on control that opened it (the button “Tell us what you think”).
- In the non-JavaScript use case:
- The feedback is missing a submit button (and the button “Tell us what you think” should not be present).
- The featured/slide content doesn’t degrade well. Most of the slide sections are still visually hidden with no controls to view.
- There is a visual hover/focus indicator for text links, which is great, but should be more prominent (more obvious, too subtle); it’s currently dark blue text which changes to purple text.
- The links under Information by Topic have a lot of content in the title attribute. If the content is that long, and especially if it’s important to the user (not “supplementary”), then title attributes are not the best solution.
- Under News and Events, a title attribute is fine for links in new window, but also need visual indication (icon) and/or include “new window” in anchor (and possibly hide off screen).
- It’s good practice to declare a language in the HTML element with the lang attribute, in this case, lang=”en-us”.
- The text-resize widget works, but I see two issues (this is the third of three main features listed on the site’s accessibility statement):
- The text-resize widget doesn’t resize text specifically; it makes the whole design larger, which is basically the same as browsers’ page zoom feature. So why have the widget? Recommend replacing with real text-size functionality since browsers bury this feature or don’t provide it at all anymore.
- The hover/focus state of the options in the text-resize widget is so subtle (purple instead of black) that it’s very difficult to notice the change.
- The options in the “Add This” flyout provides visual feedback with the mouse hover, but is missing keyboard focus.
After completing this review, I unfortunately wouldn’t agree with the claim in the footer that the Disability.gov website adheres to WCAG 2 level AA.
The site’s accessibility statement states:
If you experience any technical problems or have issues with accessibility, please contact dgovdeveloper AT devis DOT com with your feedback, and we’ll do our best to respond to your concerns.
I have emailed a link to a link to this blog and hope more improvements can be made soon. -Dennis
