Accessible user interfaces

Open platforms and communities lead to a more inclusive world

For readers in a digital age, interaction with content is ubiquitous. We no longer interact with content through paper, e-readers, or tailored apps alone, but via millions of digital products and web properties designed to streamline our consumption. In recent years there has been much effort allocated to ensuring that content can be accessed by the broadest possible audience, including readers with disabilities. At TOC 2013 a panel presented Born Accessible: An up-to-the minute update on the tools, standards, techniques and developments that support ‘Inclusive Publishing’ practices, focusing on tools and techniques for ensuring that digital content is accessible to as many readers as possible. It’s important to ensure that digital content is accessible and well as ensuring the accessibility of the platforms and systems that deliver this content.

Drupal is an open source content management system (CMS) used to power over 850,000 web properties, including such popular sites as  and The Drupal development community is committed to ensuring that sites built with Drupal are inclusive to all users. Although simply using Drupal will not ensure that a particular site is accessible, the Drupal community has put forth extensive effort to ensure that the functionality built into the core product works for users with disabilities.

Recently members of the Drupal community came together for a day in Toronto to focus on solving some of the remaining accessibility challenges in Drupal 8, to be released late 2013 / early 2014. One of these challenges was the need to ensure that the new mobile / responsive administrative toolbar would perform well for users who cannot use a pointing device like a mouse, and for those users who use software that reads the content of web pages aloud.

The administrative toolbar is the mooring of a site administrator’s experience with Drupal. We committed to building controls that blind and sighted users will find equally useful. Part of that effort involved styling changes that adapt the toolbar layout to varying screen sizes. On small screens a user will simply see icons.

An administrator can toggle the orientation of the menus to vertical and dock it to the side of the page.

Elements of the toolbar change with interaction: collapsed menus open to reveal additional options and buttons toggle interaction modes such as quick content edting or a mobile layout previewer. Such state changes require aural cues in addtion to the visual queues expressed through icon and color changes.

We have developed two utilities that make the aural expression of page state simple for module developers. These are the announce utility for rendering spoken text and the tabbing manager utility for controlling page element tabbing within controlled workflows. For example, when opening the People menu, the following text would be spoken: “The overlay has been opened to the people menu. Tabbing is constrained to the administrative toolbar and the overlay.” In this way the page content changes and interaction modifications are simultaneously expressed both visually and aurally.

The emergence of new digital technologies and new uses of technology can create barriers to information access for persons with disabilities. Open platforms and open communities like Drupal will continue to pave the way for a more inclusive world for all.

Everett Zufelt works as a Tech Lead and Scrummaster at Myplanet Digital, a rapidly growing design & technology company specializing in the process and practice of envisioning, designing and building digital products. This article was written with the help of Jesse Beach. Jesse is a front end developer at Acquia, and is currently part of Dries Buytaert’s Spark team, a group of Drupal domain experts tasked with bringing cutting-edge UX patterns and functionality to Drupal Core.

tags: , , , , , , ,