Category: analysis

Google Plus Keyboard Accessibility

Social media in general has major accessibility problems. Twitter, LinkedIn, and Facebook all certainly need improvement.

Google’s latest attempt at social media, Google Plus, launched a short time ago. This time, Google says they “considered accessibility of Google+ from day 1“. Although it’s a much better attempt at accessibility than the ill-fated Google Wave, Google Plus still has a lot of room for improvement.

I’ve only come across one Google+ accessibility review, Will Blind Users Be +1ing?, by a visually impaired user. So I decided to do some more testing myself. Once I got started, it quickly became apparent that only keyboard access checks were needed to determine how much more work needs to be done, as there were many, unfortunately.

Below are some of the web accessibility issues I found on Google Plus, all keyboard access issues.

Home/stream page

  • Tab into “Share” flyout but couldn’t get out without mouse. Strange since you can use Escape key to close the Notifications and Options flyouts.
  • In right column under “Suggestions”, can tab to “Add to circles” button but can’t activate it. Also, unable to tab to “Show all” link.
  • Under stream in left column, the circles links do not have visual focus state.

On a profile page

  • Unable to open Circles options.
  • Can open “Send an email” dialog, but upon closing, focus is lost and returned to top of page.
  • The text and image links in left column have no visual focus indicator, (how frustrating!): People in common, In [username] circles, Have [username] in circles.
  • On posts, no visual focus on “limited” link.
  • On posts, options are not keyboard accessible.

Photos page

  • After selecting a page number or prev/next, focus is lost and returned to top of page.
  • Image hover event not available with focus.
  • Can open image view, but upon closing, focus is lost and returned to top of page.
  • After opening image view, no visual focus on almost everything, I’m lost.
  • After opening image view, unable to select arrows to go to prev/next image.

Circles page

I give up. None of the main content on this page is keyboard accessible. No wonder why screen reader users can’t add people to circle; requires mouse-only drag-and-drop. I guess Google missed Opera’s article on accessible drag-and-drop using ARIA.

Global

  • No visual focus on footer links: Terms – Content Policy – Privacy

Summary

Google+ is more accessible than most Google apps, especially for a new one. But that’s not saying much; there are still many issues to resolve. And again, the list of problems on this post are only a subset of issues. It’s sad the such a huge, powerful, rich technology company can’t get the basics of web accessibility, even when they planned it from the start.

PS: When setting up Google voice and video chat, I quickly came across two “click here” links, yuck!

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.

Web Accessibility Articles not Accessible

Call me picky, but it sure bothers me when web page articles about web accessibility are not accessible themselves. Talk about bad credibility…

For example, the article Web Accessibility. . . Making your Pages Friendly to People with Disabilities is dreadful. Just by glancing at the main text, several issues are apparent:

  • Insufficient color contrast. That dark gray text on a black background just don’t work!
  • Text size is too small; text may be difficult to resize in some browsers. Absolute sizing (pixels) are used in the CSS instead of relative sizing (ems, percentage).
  • No sub headings in the content, and the content is not divided into “manageable groups”.
  • The links are not linked–just written out; and with obnoxious spaces also. For example: Academy of Web Specialists (http://www . onlinewebtraining.com / courses.html)

Actually, I think this article is just a bunch of advertising and SEO garbage. I left a comment saying so; let’s see if they approve it…