JavaScript Accessibility Summit Recap

Share on FacebookShare on LinkedInShare on Twitter
Javascript Accessibility Summit

Javascript Accessibility Summit

The following post is from Paul Bohman, Deque's Director of Training.

On October 10 and 11, 2013, Deque hosted the first JavaScript Accessibility Summit in partnership with the jQuery foundation. Admittance to the summit was purposely limited, in order to facilitate interaction and dialog between attendees, presenters, and jQuery representatives. In all, about 70 people attended, and the room was filled to capacity.

Feedback from attendees has been very positive. We learned together, dined together, made valuable contacts in the accessibility and tech community, wrote jQuery code together, and even spent some time simulating different kinds of disabilities in everyday situations. We came away with a greater appreciation for the importance of accessibility, and with a greater understanding of how to accomplish accessibility with a dynamic, interactive JavaScript framework.

Save the Date for the Next Javascript Accessibility Summit!

We're hosting a continuation of this series, starting with our next event on January 16-17, 2014. Be sure to join us! Make sure to sign up for the Deque newsletter to learn when registration begins.

Javascript Accessibility Summit Day 1

As the conference began, I asked attendees how many of them considered themselves JavaScript programmers, and a solid majority of the 70 or so attendees raised their hands. When I asked how many considered themselves accessibility professionals, a sizable number raised their hands. And when asked how many of the accessibility professionals felt very comfortable using a screen reader, most of them kept their hands raised. This was not a group of technology lightweights or web accessibility newbies. People came to learn the nuts and bolts of intermediate and advanced web accessibility techniques, and the presenters delivered.

Talk 1 - Jared Smith: Web Accessibility Fundamentals

Jared's talk was the only talk of the summit geared toward those with minimal exposure to web accessibility. He talked about disability types, laws and guidelines, assistive technologies like screen readers and screen magnifiers, and the principles of accessibility outlined in the Web Content Accessibility Guidelines: Perceivable, Operable, Understandable, and Robust. He gave practical examples of accessibility in the real world, and made the point that web accessibility matters a lot to the sizable minority of web users who live with disabilities.

Talk 2 - Joseph Scheuhammer: Overview of ARIA, JavaScript, and Interactive Web Accessibility

Joseph has contributed to the specification for ARIA (Accessible Rich Internet Applications), so he was in a unique situation to give us valuable perspective on why the specification exists, what ARIA is for, what it accomplishes, and how it can help people with disabilities. ARIA allows web developers to create accessible interactive HTML content in ways that were either very difficult or impossible before. By exposing names, roles, states, and properties of elements, and by making any necessary changes on the fly as the content changes, web developers can communicate the dynamic nature of content to assistive technology users in ways that make the overall interaction accessible and usable.

Talk 3 - Paul Bohman: HTML 5 Accessibility

This was my talk. I gave an overview of the new features available in HTML 5 that have the potential to improve web accessibility and make it easier for web developers to use native widgets (date-pickers and media players, for example), insert multimedia content, specify data types for form input fields, and so on. I talked about the importance of semantics and structure, including the new landmark roles (header, nav, main, footer, etc.) that allow screen reader users to jump directly to the parts of the content they are most interested in. I showed working examples of many HTML 5 features in action and gave cautionary advice about the incomplete implementation of many HTML 5 features, and of the accessibility problems with many of the native HTML 5 widgets.

Talk 4 - Dylan Barrell: Accessible Interactive Forms and Form Validation

Dylan's talk was a gold mine of advice for web developers creating dynamic forms. He showed many working examples of best practices, using ARIA , semantically-correct HTML, and universal design that takes into account the nuances of screen readers, screen magnifiers, and other accessibility concerns. Dylan's detailed advice dove into the bugs and quirks of browsers and screen readers to present information that was practical for robust enterprise development, and not just theoretical.

Keynote and Dinner: Preety Kumar (Deque CEO)

Preety helped inspire us to make accessibility a higher priority in our web development cycles by speaking about the vast need as well as the vast potential of technology to accommodate the needs of people with disabilities. She then invited the audience to participate in some humorous games that helped to reinforce some important web accessibility concepts. One of the games emphasized the need to pay attention to the underlying order of the text in the DOM. Another game helped draw attention to the purpose of ARIA, which is to expose the name, role, states, and properties of objects. We then moved to the dining room, where we experienced what it is like to eat with a visual disability or with a motor disability, using some simulations and assistive technologies that were distributed to the participants.

Javascript Accessibility Summit Day 2

Talk 1 - Paul J. Adam: Web Accessibility Testing Techniques

Paul Adam is one of the most thorough web accessibility testers at Deque. He uses a number of different tools and techniques to discover and report accessibility issues on web pages. Paul walked us through the basics of detailed tools like FireEyes and WorldSpace, and showed us how he uses other toolbar-based tools or web-based tools to help shine a light on the accessibility challenges presented on a web site. He talked about the importance of evaluating the DOM, and not just the source code, because the source code can be misleading in cases of dynamic content.

Talk 2 - Birkir Gunnarsson: Testing with Screen Readers

Birkir is a master screen reader user. Why? Because he uses a screen reader every day. He has to - he has been blind since age 5. Birkir used his easy-going humor to explain to us what it's like to access content with only an audio interface. He talked about structure, headings, links, and a host of other issues that most web developers probably don't ever think about. He gave us valuable insight into why we are concerned about accessibility, who benefits, and how to design so that screen reader users can fully access content.

Talk 3 - Paul J. Adam: Mobile Web Accessibility

Paul Adam came back to give us a second presentation, this time about mobile web accessibility. Mobile web is an emerging area of web accessibility. Very few people fully understand it or pay much attention to it. But with so much moving to the web, and with so many people carrying around smart internet-capable devices, it's time to take mobile web accessibility very seriously. Paul talked about the accessibility features in iOS and Android: how to turn them on, how to use them, how to change the settings, and so on. He talked about the way that Apple pioneered a whole new way of thinking about accessibility by introducing a touch screen that was actually reasonably accessible to blind users. This topic is going to continue to grow in importance.

Talk 4 - Ian Kelly: Amaze Demonstration

Ian demonstrated the way that Deque's Amaze can make web content more accessible by introducing an accessible JavaScript overlay on top of existing web content without having to touch the underlying source code. Some of the use cases for Amaze include: making portals of content with third-party contributors accessible without forcing the third party to fix accessibility problems; fixing large-scale web sites quickly and efficiently without having to coordinate large-scale re-writes of templates, databases, files, etc. Basically, a couple of the main strengths of Amaze are agility (quick development cycle) and universality (the ability fix the accessibility of all content, even by third-party contributors).

Talk 5 - Hans Hillen: jQuery Accessibility Hot Spots

Hans gave us an overview of some of the main weaknesses in the jQuery methods and widgets. His talk was a way to prepare the group for the jQuery Accessibility Face-Off at the end of the day.

jQuery UI Accessibility Face-Off!

The last half of the day was spent in small workgroups as we hammered out some solutions to a few accessibility problems within jQuery.

  • Challenge 1: Asynchronous AJAX Tooltips. When using AJAX, the information for tooltips is not a part of the DOM when the page is loaded. If the element referred to with aria-describedby is empty when the DOM loads, screen readers are not made aware of any changes to the DOM if a tooltip is added dynamically to the aria-describedby element. To overcome this, the team created an aria-live region and populated it on the fly from the AJAX call.
  • Challenge 2: Announcing Keyboard Actions and Shortcuts for ARIA Widgets. One of the biggest challenges with ARIA widgets is that people don't know how to use them. The keyboard methods are quite different from standard HTML keyboard methods because the ARIA widgets act more like OS application widgets. Web users generally don't expect that kind of interaction on a web page. The participants in this group added a tooltip that is visible to sighted users and announced properly to screen reader users.
  • Challenge 3: Add ARIA to Slider. The Slider in the ARIA toolkit does not include ARIA markup. The slider team added ARIA markup so that the button labels, dynamic states, and properties would be announced properly to screen reader users.

The Winner:

The group that worked on the ARIA slider beat out the strong efforts of the other groups to take first place, as judged by the elegance and universality of the solution. The group working on AJAX tooltips took second place. Congratulations to the winners, and congratulations to all participants for coming up with solutions that will help to make jQuery a more accessible platform for all users!

Find Out More About JavaScript Accessibility

Interested in attending the next JavaScript Accessibility Summit in January or in future months? Subscribe to the Deque Newsletter to get details and to keep up with Deque.

[hs_action id="6657"]

About 

For over fifteen years, Deque has been helping major corporations, government agencies, and other organizations ensure that their websites and mobile apps are accessible to everyone. We have more than fifteen years of history of serving the federal government, including undertaking the biggest accessibility program that's occurred in the United States government or anywhere. Deque also works with .edu's and mission-focused nonprofits to ensure that their materials and systems are usable and barrier free for users with disabilities. The company invented the first accessibility plug-in software, the first web-based testing platform, and the first server-based accessibility solution. All of these have been created in the service of helping our customers become accessible, advance the goals of their organization, and remove barriers for all users on the web.

3 comments

  • Accessible Dynamic Forms and Form Validation with jQuery | careernewly.com Permalink

    […] find forms that have the most basic accessibility issues. That is why, when we hosted our recent jQuery Accessibility Summit, I insisted on having a session on forms and form validation and when nobody else stepped up to […]

  • Accessible Dynamic Forms and Form Validation With jQuery Permalink

    […] find forms that have the most basic accessibility issues. That is why, when we hosted our recent jQuery Accessibility Summit, I insisted on having a session on forms and form validation and when nobody else stepped up to […]

Leave a Reply

You can use these HTML tags:

<a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>