Universal Usability of Dynamic Content:
Three Case Studies in Making DHTML, Ajax, and Flash Accessible

Report by Peter McNally

June 2008

On June 5, 2008, at Fidelity Investments in Boston, Marguerite Bergel and Ann Chadwick-Dias presented a talk entitled, "Universal Usability of Dynamic Content: Three Case Studies in Making DHTML, Ajax, and Flash Accessible". In this presentation, Margi and Ann described three Fidelity case studies highlighting different Rich Internet Application (RIA) challenges and their solutions.

As more and more businesses move functional, rich applications to the Web, they are opting to use the latest interactive technologies to allow for a rich user experience. However, these Rich Internet Applications (RIAs) present new accessibility challenges that cannot be addressed with traditional web accessibility standards (WCAG 1.0 and Section 508).

Margy and Ann presented three Fidelity case studies highlighting different RIA challenges and their solutions. They emphasized that in some cases, the solutions chosen were not ideal. As with many commercial development projects, schedule and other project constraints limited the solutions.

Margy and Ann began with an overview of the user experience team at Fidelity and how accessibility affects Fidelity today. For example, out of Fidelity's 22 million customers, statistics would suggest that roughly 1 million have significant vision impairment, while about 100,000 are likely to be legally blind. For Fidelity, accessibility is not an abstract concept, but an important business driver for its customers.

With the stage set, each case study was described in detail.

Back to top

Case Study #1 – Alt Text Emergency (DHTML)

Challenges

• The team had one day to recommend changes to make a page accessible that contained two images representing large data tables.
• Each complex chart was presented as one large graphic. Each chart referred to a lengthy footnote which was also part of the graphic.
• Team was asked to turn around a solution in less than 24 hours.
• A third-party design firm was developing the page; the team did not have web accessibility expertise.

Solution

Provide alt text representing the graphical content. This was not the ideal solution. It would have been better to use HTML tables to hold the data. But given the timing, it was the most feasible and accessible solution.

Back to top

Case Study #2 – Trade Ticket Tumult

Ajax was used to make a web page more interactive and dynamic. An action on one part of the page caused another part of the page to change. Entering a stock symbol in the upper left corner of the page caused real-time stock quote information to appear in the lower-right corner of the page.

Challenges

The general challenge was how to signal a page change to the user, whose focus is elsewhere. Users did not see the real-time quote due to placement and treatment.

Specific challenges included:

• The project schedule and design requirements did not allow for the page to be redesigned to bring related content closer together.
• The change was triggered when the user tabs off a symbol field (using the onblur event handler).
• Screen readers announce when a new page loads, not when information changes on the current page.
• Screen magnifier users are likely not see changes due to their magnification level.
• Sighted users may have difficulty noticing subtle changes (especially when focusing elsewhere on the page— or typing.).
• Users using monitors at lower resolutions may also not see all changes.

Solutions

General

• Changes should occur very close to where a user's focus already is.
• Changes should occur downstream of the user's focus.

For Screen Readers

• Provide a hidden page summary giving users an overview of key functionality and the structure of the page.
• Use meaningful iframe titles (also referenced in the summary).
• Consider providing offscreen text in labels of dynamic form fields to tell users how to successfully navigate them.

Keyboard Support for Everyone

• Use onclick events (rather than onmouseover and onmouseoff events), since they work for both mouse and keyboard users.
• Ensure that everything can be tabbed to.
• Verify that the tab order makes sense.

Consider Alerting Users When Information is Updated

• Alert boxes pull focus and inform the user about what just happened (for example, see the Alert Box Calculator).

Inform Users of Dynamic Updates to Pages

• This is especially important for screen reader users and will help them decide when to re-read the page.
• Use the "Lightbox effect".
  • Use animation and color to indicate changing areas.
• Consider including audible tones.

Back to top

Case Study #3 – Do Blind Users Really Want Flash Movies?

Challenges

Flash movies are increasingly used to provide rich content— but understanding how to make Flash movies fully accessible is not always considered in budget planning.

• Many designers and developers assume that blind users prefer to avoid Flash movies.
• Blind user assume that Flash movies are not accessible and are "fluff" or "eye candy".
• Making Flash accessible not as straightforward as HTML.
• Keyboard access is absent by default.

Solutions/Design Recommendations

• Build a standard, accessible player that all demos launch in:
  • Provide keyboard access for users with or without Assistive Technology (AT). Ensure that users can tab to all actionable elements on the page.
  • Label all controls.
  • Provide large font tooltips for controls.
  • Ensure screen readers automatically read the controls after the movie loads.
  • Inform the user that the movie launches in a new window on the parent page.
• Provide a visible link to transcripts for all users. Ideally, this link is in close proximity to the link that launches the video.
• Keyboard access should be coupled with a clear, visual indication of where the user's focus is (for example, a yellow outline) as he or she tabs through the elements on a page.
• Support different cognitive styles (for example, providing transcripts can also help users with cognitive disabilities or different learning styles).
• Watch for potential flicker with video. Make sure flicker is not in the range to trigger a seizure.

Back to top

© 2008 Peter McNally. All rights reserved.

Photograph of Fidelity Investments, © 2008 Peter McNally. All rights reserved.

Back to top