Keyboard Accessibility with the Space Bar

Keyboard accessibility is critical for your users that depend on voice recognition, onscreen keyboards, screen readers, ergonomic accessories, and your power users that prefer to avoid grabbing the mouse for every task. Most people test to make sure every interactive element can receive focus via the tab key and that buttons and links work with the enter key. We’ve gotten pretty good at making sure links have href attributes and using role=”button” on our pseudo-buttons.

But this doesn’t cover a significant portion of keyboard accessibility: the space bar. This page includes various interactive elements to see which ones will work with a space bar.

As developers, you don’t have to worry about whether an element works correctly with a spacebar if you use the proper, semantic tag. But if you find yourself re-assigning roles with ARIA than you may need to listen for the space bar key.
Continue Reading Keyboard Accessibility with the Space Bar

Accessible Dropdown Menus

Slender SuckerfishTen years ago, web developers were introduced to a light-weight dropdown menu system that seemed like a perfect solution for complex, nested navigation. Suckerfish Dropdowns used the :hover state to show/hide children of the top nav element. It didn’t take long for people to realize :hover didn’t work without a mouse, meaning a large portion of a web site’s users could not activate: the submenus.

Patrick Griffiths and Dan Web introduced Son of Suckerfish, which fixed the :hover issue by placing a class on the top navigation item when it received focus or hover. This allowed it to be used by mouse and keyboard users.

Fast forward to 2013 and dropdown menu options haven’t changed much. Unfortunately, there’s also been a resurgence of :hover based navigation, thanks to the popularity of some inaccessible jQuery plugins and coding examples.

Accessible Alternatives

There are plenty of options for making your dropdown menus accessible. Terrill Thompson researched the options extensively for her presentation and article Accessible DropDown Menus.

Menu example from YUIDropdown and flyout menus on websites are great for reducing clutter, simplifying page content, and providing a consistent navigation structure that (if done well) makes it easy to find content from anywhere on the site. Unfortunately, very few of the dynamic menus in use today are fully accessible:

  • Most dynamic menus depend on users being able to use a mouse. Mousers hover over menu items, which makes dropdown menus appear. If non-mousers tab to those same top-level menu items, they typically can’t make the dropdown menus appear.
  • Most dynamic menus depend on users being able to see. Dropdown menus are typically hidden with display:none in CSS, and revealed by changing that to display:block using JavaScript (triggered, as noted above, by a hover event). If screen reader users can somehow trigger the change from hidden to visible, that change is not likely to be communicated to them, so even if the dropdown menu is visible it isn’t necessarily accessible.

Accessible DropDown Menus – Terrill Thompson

Thompson introduces the importance of keyboard accessibility, allowing users to escape menus, the use of arrow keys, and adding ARIA attributes. The suggested pattern that comes the closest to most jQuery sites is the DropDown Menu from Simply Accessible. Another great option is the menu component from the Yahoo! User Interface Library. YUI components have accessibility baked in, so developers don’t have to worry about keyboard control or ARIA.

Adobe Mega Menu

If you are looking for something more complex than a dropdown menu, look at the recently released Mega Menu from Adobe. They’ve just released their code as open source. It incorporates full keyboard accessibility and ARIA support. It allows you to include nested navigation within your topnav hierarchy.

Testing Your Menu

How does your site navigation measure up? It’s easy to test. Just push your mouse to the side and try tabbing through your web page. Are you able to navigate the submenus? What happens when you focus on a top level menu item and hit the enter key? What happens when you use the arrow keys? The escape key?

If your answer is nothing, you will need to update to an accessible drop down menu.

Force the screen reader to announce digits

There are times when we want the screen reader to announce individual letters in a string. This is sometimes up to the interpretation of the screen reader with an acronym, such as NASA. There are other times when we need to force the digits, for instance in a confirmation code IXbib. This page will test options for making a screen reader announce this confirmation code: IXbib
Continue Reading Force the screen reader to announce digits

Tech on the Edge: iOS Accessibility Apps

Victor and I on the set of Tech on the EdgeVictor Tsaran and I recently visited Tech on the Edge, a community channel production in Palo Alto, to discuss accessibility applications for the iPhone. We had a great time and felt like we could’ve easily filled a whole hour. That’s what happens when you point a camera at two hams like us.

The program was produced by Zbigniew Stanczyk and filmed at the lovely studios just outside of Palo Alto.

Featured Apps

Typography and Microformats: adding small-caps to your state abbreviations

Robert Bringhurst’s book The Elements of Typographic Style: Version 4.0: 20th Anniversary Edition [Paperback]The Elements of Typographic Style is overwhelming me with typography details. Today I came across a description of using small caps for abbreviations, which inspired me to come up with this snippet for state abbreviations.

For abbreviations and acronyms in the midst of normal text, use spaced small caps

Many typographers prefer to use small caps for postal abbreviations (San Francisco, CA, 94119, and for geographical acronyms longer than two letters. Thus, the USA, or in Spanish, los EEUU, and Sydney, NSW.
The Elements of Typographic Style – Robert Bringhurst page 48

Continue Reading Typography and Microformats: adding small-caps to your state abbreviations