Author: Dennis

Categories
awards

Accessibility in .Net Mag Awards

Two nominations directly related to web accessibility appeared in the .net magazine’s 2010 Best of the Web awards. This site, Web Axe, was nominated for “Podcast of the Year” and Accessible Twitter was nominated for “Best API Use”. Please make your vote and support the importance of web accessibility and the efforts of these two services!

On October 20, nominations for each category will be reduced to three. A panel of over 100 judges will choose the final winners and will be announced on November 19.

logo for dot net magazine awards 2010

Categories
alt aria html5 image podcast

Podcast #83: Fate of Longdesc in HTML5

What’s the fate of the “longdesc” attribute in HTML5? Can or should the “aria-labelledby” ARIA attribute replace it? These are some of the controversial issues discussed by Dennis and guests John Foliot (@johnfoliot), Everett Zufelt (@ezufelt), and Joe Dolson (@joedolson).

Download Web Axe Episode 83 (Fate of Longdesc in HTML5)

[transcript of podcast 83]

Related Links

Categories
browser text visual

No to Text Resize Widgets

Michael Gifford (@mgifford) recently wrote a tweet on text-resizing widgets. It said:

Is it time to scrap text resize widgets and teach people how to resize text http://bit.ly/94jNkv

I totally agree. Say no to text resize widgets. To enlarge text for users, the browser should be used (many reasons below). See this video from OpenConcept on how to text-resize in your browser.

Gifford’s tweet references an article on the subject from almost 3 years ago, Scrap text resize widgets and teach people how to resize text from 456 Berea St. This site had also blogged about the topic a while back in Don’t Use Text Resizing Widgets.

Keep in mind is the issue of misinformation. For example, the very recent article A quick Web Accessibility Checklist actually encourages the use of text resize widgets, or in their words a “Font re-size option”.

Gifford’s tweet sparked many responses with many very good points, which all support why not to implement text-resizing tools on a website. I’ve summarized some reasons from very respectable professionals including @v, @alxp, @johnfoliot, and @ppatel. (Bonus! See slide 12 of Web Accessibility Gone Wild by WebAIM which also discourages the use.)

  • Implementers need to stop setting font to 80% (or lower!) in the default CSS.
  • Text resize widgets only add another layer of complexity on top.
  • Text resize widgets don’t resize text in images.
  • Text resize widgets are site-specific. There’s no standard; each site implements differently.
  • Text resize widgets causes confusion, clutters up the interface.
  • Text resizing is the responsibility of browser; browsers should do this natively. Browsers need a better way to expose this functionality to the user.
  • Users who regularly need larger text have figured this out already on all the sites that lack such a widget.
  • Interface design is not graphic design. Tyrannical control over font size & colors in UI is doing a huge disservice to users.
  • Text resize widgets make the author feel like they are doing good, but only solve problems created by the designer/developer in first place.
  • Not many users I’ve spoken to (@ppatel) use the widgets.
Categories
links lists

Link Roundup – July 2010

Categories
analysis gov law

Critique – New Section 508 Web Site

Below are suggestions for improving the web accessibility of the new United States government Section 508 web site. Well, from analyzing the home page at least. This is basic stuff and I’m very disappointed that the site leaves so much to be desired. The site, which is U.S. government law with rules for web accessibility, should itself be an example of an accessible web site. And with the recent ADA anniversary, this was a great opportunity to move forward in the field of web accessibility. But instead, unfortunately, this was a failed attempt. The U.S. government has a lot of work to do.

Core Issues

  • No headings! Not one. Need headings in markup, period. There are many headings indicated visually, but inappropriately coded such as using strong or div tags.
  • Labels for text inputs are incorrect; there’s a label tag, but no text label! See the search text and email address for news signup.
  • Alternative text for many images need improvement such as removing “Graphic for”. Better yet, do not use a graphic when it’s not needed; text is fine in the following two cases. (Losing the inline style would also be good.)
    • Example 1:
      Graphic for how do I get my 508 questions answered
    • Example 2:
      Graphic for An Official Website of the United States Government
  • No keyboard focus to match mouse hover effect. In addition, a hover & focus could be added in several places to make it more usable, such as the first-level items in the left/main navigation menu.
  • The “AddThis” social media feature requires JavaScript and in either case is not keyboard accessible.
  • No ARIA implemented, not even landmark roles to help with navigation.
  • Links such as “read more >>” have no context; not unique. Also recommend removing the “>” character (better to use CSS for these types of markers/symbols).
  • Text links are not clear. The underlines are removed and dark blue not distinct enough from black text.
  • Poor progressive enhancement. With JavaScript off, the menu options do not fully display and the content of the slider feature is not displayed.
  • Redundant title attributes must go! I’m so tired of seeing this. It’s not useful but on the contrary gets in the way; and it creates code bloat. Example: Link Policy
  • The placeholder email content is confusing. The example is not even a valid email address (missing the top-level domain). The feature can be done with unobtrusive JavaScript and even use the label text, if it existed.

Other Issues

  • Horizontal scrollbars in 1024 resolution. Need better resizing/width design.
  • Lots of CSS in header (and inline); much better to use external file.
  • The attribute language=”JavaScript” not needed in XHTML.
  • Why display the date? Just adds to cluttered screen.
  • Print button not needed. Just adds to cluttered screen. Requires JavaScript.
  • Conditional comment for IE6 CSS should be in head, not body.
  • Text resizing tool not needed; let the browser do this! And clutters screen.
  • Some navigation items use lists while others do not.
  • Image need better optimization/compression. One image alone in the slider feature is over 150k and can easily be compressed to 35k.
  • 67 XHTML validation errors.