Pivotal Labs

Main menu

Skip to primary content
Skip to secondary content
  • About
  • Case Studies
  • Team
    • Executives
    • Locations
      • San Francisco (HQ)
      • Boston
      • Boulder
      • Denver
      • London
      • Los Angeles
      • New York
  • Community
    • Blogs
    • Tech Talks
    • Events
  • Careers
    • Lifestyle
    • Principles & Practices
    • Benefits
    • FAQ
    • Apply
  • Contact
    • Press Room
    • Press Releases
    • In The News
    • Press Kit
  • All
  • Labs
  • Standup
  • Tracker
Cameron Cundiff

How To: Use Skip Navigation Links for Better Keyboard Accessibility

Cameron Cundiff
Friday, May 17, 2013

For improved keyboard accessibility, use skip navigation links along with a coherent heading outline, ARIA landmarks, and a javascript polyfill for Webkit based browsers.

Why Use Skip Navigation Links?

It can be frustrating and fatiguing for folks with limited mobility to have to have to repeatedly tab through navigation links to get to the main content of a page. People who use screen readers face similar frustration when the page outline is not well defined. In order to address this issue, version 2.0 of the Web Content Accessibility Guidelines (WCAG 2.0) has specified a guideline for bypassing repetitive blocks of content. One technique recommended by the W3C is to include a skip navigation link at the beginning of the page, that changes focus to the first element after the repeated content.

How do I use Skip Navigation Links?

Add a link at the top of your body content whose href value points to the id of the element that wraps your primary content. Like so:

Disclaimer: The mechanism by which skip navigation links work had been broken  in Webkit based browsers for some time and has only recently been fixed. Until these browsers release the fixes, you may need to use a javascript polyfill to make skip nav links work.

What about ARIA?

Skip nav links are useful for users who use keyboard navigation only, but screen readers now support more sophisticated ways of navigating regions. Specifically, they support heading navigation and ARIA landmarks. You should take advantage of these features by using a clear heading outline and defining page regions.

Note: The last post I authored, Use ARIA Landmarks Instead of Skip Nav Links, presented a strategy that was predicated in part on the fact that skip navigation links have been broken in Webkit for the past three years. This bug has recently been fixed, so I was inspired to revisit the topic.

  • 0 Shares
  • Share on Facebook
  • Share on Twitter
Cameron Cundiff

Use ARIA Landmarks Instead of Skip Nav Links

Cameron Cundiff
Sunday, April 7, 2013

This is a followup post to Testing accessibility with RSpec and Capybara, in which I explored strategies for automated testing of skip navigation links. We needed to provide a way to skip repetitive navigation, in line with part (o) of the Section 508 accessibility standards, and we went with skip navigation links.

We’ve since taken an alternative approach to the skip navigation technique, since this technique does not change keyboard focus to the targeted content. Instead, we ended up creating an aria landmark using the role attribute with a value of ‘main’. It looks something like this:

The role attribute can be set to a variety of values to help screen readers evaluate the structure of a page. Then the user can use a combination of hotkeys to navigate to these landmarks. In Safari with VoiceOver for example, one would press the VoiceOver keys + U to activate the Rotor, and be presented with a list of page landmarks (including ‘main’) that when navigated to, will immediately get focus and be at the beginning of the read order. JAWS, ChromeVox, and NVDA have similar behavior.

Using an ARIA landmark with a role of ‘main’ is a more robust and elegant solution than using skip navigation links. This technique is also well supported across user agents, and yields disproportionate gains in accessibility compared to development time, making it an easy win for more accessible content.

  • 0 Shares
  • Share on Facebook
  • Share on Twitter
Jonathan Berger

The Journey to Using a Standing Desk

Jonathan Berger
Friday, November 23, 2012

Why a standing desk?

Ultimately the goal is to go to a treadmill desk (for reasons outlined here), but before sinking the money and effort into that endeavor, I’d been meaning to try out a standing desk. It was never really a priority and I was working at a client-site (which inhibited my ability to request furniture) and so I kept putting it off. Finally one day I snapped. After lunch I went to the copy room, started grabbing reams of paper, and in less than 10 minutes I had a standing desk from W.B. Mason.

Standing Desk #1: Improvised Standing Desk

Standing Desk #1: Improvised Standing Desk

After half a day standing I felt pretty good—my legs were a little tired, but less than I’d expected. The next day we went back to the home office for a lunchtime tech talk. The plan was to stand at the WB Mason in the morning and then sit for the rest of the day at my home office, but I found that I wanted to remain standing. I commandeered an unused metroshelf and built a desk out of it.

Standing Desk #2: Quick metro standing desk

Standing Desk #2: Quick metro standing desk

I wanted a few surfaces on the desk: a shelf for the monitor, another for the keyboard and mouse, a third for random work / storage (e.g. to set down keys or reference book or to put your cup of coffee out of accidental-spill range), and a place to rest my feet. Changing position is important if you’re going to stand for long periods of time, and resting a foot on a raised surface changes the way your body carries weight (this is why taverns often have a brass bar to rest your foot on). Its also helpful to have a shelf at the bottom which gives rigidity to the structure of the desk. Metroshelves aren’t very deep, but here’s the trick: it’s possible to hang a shelf on only 2 of the 4 poles, and thereby double the depth. The cantilevered shelf won’t bear as much weight as a shelf with 4 supports, but its sufficient for a keyboard, or even an iMac.

In order to get better foot access to the bottom shelf, I cantilevered the top shelf behind the desk, so the keyboard shelf is over the foot shelf. As a bonus, the iMac floats above the air conditioning unit, reclaiming a bit of wasted space.

It’s hard to see in this photo, but the back of the shelf directly leans against the wall. Note also that the UPSes on the bottom shelf to act as a counterweight to lower the center of gravity. This thing is secure from falling towards the window; no one wants a $2000 iMac tipping over.

Standing Desk #3: Kitchen Island

Standing Desk #3: Kitchen Island

The next day was a blizzard, and I decided to work from home. Not willing to quit my standing streak, I moved my spare monitor to kitchen island and worked from there for the day. I also experimented with using an iPad and AirDisplay as an additional monitor. Its small and suffers from high latency, but it works just fine as a Pivotal Tracker display.

Standing Desk #4: Keyboard Shelf Metrodesk

Standing Desk #4: Keyboard Shelf Metrodesk

Cantilevering an iMac scared enough people that I reconfigured the desk to put the keyboard at front. The footrest is pretty much unusable now (but the bottom shelf is still nice for rigidity and storage), but the desk definitely feels more solid. Wooden butcher-blocks are added for a nicer work surface.

Standing Desk #5: Cantilevered 48in. Metrodesk

Standing Desk #5: Cantilevered 48in. Metrodesk

Back at the client site, I finally found some metroshelves to build into a standing desk. This one followed the rear cantilever design, which worked nicely given this particular A/C unit and space constraints. This one is a 4-foot-wide desk, which is substantially nicer to pair on. Again, you can see the shelf directly leaning against the structural wall to prevent tipping over backwards. Here we use Mac Pros as the counterweight.

Conclusion

I’ve been standing at desks almost exclusively for ~24 months now, and aside from the occasional exhausted day when I grab a high stool to sit on, I doubt I’ll ever go back to sitting full-time. Standing desks have blossomed at the office too: we’ve got 5 Metroshelf standers, and another 4 or 5 Geekdesk-style adjustable desks. Since we’re a pair-programming shop, that’s ~20 people standing every day. We use bar stools and architectural drafting chairs to let a stander pair with someone who prefers to sit, and the standing Metroshelf desks have proven to be economic, ergonomic, efficient in their use of space, robust, and flexible. Now I just need to figure out how to get a treadmill desk in here…

Appendix

A NOTE ABOUT SHOES:

Don’t wear them. Your feet are perfectly built to support your bodyweight for long periods of time. Even the best running or walking shoes are less than perfect. Barefoot or socks is the way to go.

A NOTE ABOUT FITNESS:

If you’re the kind of person who’d be sitting on a balance ball at a sitting desk, try a Bosu Ball for your standing desk. It’s a great all-day workout for your core and legs, and its a lot of fun. A word of warning: for the first day or two, your vestibular system (i.e., sense of balance) will get quite a workout. I definitely felt the added cognitive load, and while it doesn’t prevent you from using the rest of your brain for work, it definitely takes a bit of concentration. By the second or third day I was used to it, and not standing on a balance ball just felt boring.

A NOTE ABOUT WHEELS:

Get them. Being able to easily relocate the desk is unexpectedly awesome and useful.

A BONUS: Tete-a-tete Pairing Desk

This could provide a standing version of Susser’s Tete-a-tete pairing configuration. We mocked it out when we ordered the second desk, but haven’t had a chance to try it out for real.

Standing Desk #6: Tete-a-tete experimental pairing standing Metrodesk

Coming Soon:

How to build a metroshelf standing desk.

UPDATE 2013-02-10: check out How to Build a Standing Desk!

  • 0 Shares
  • Share on Facebook
  • Share on Twitter
Cameron Cundiff

Testing accessibility with RSpec and Capybara

Cameron Cundiff
Tuesday, October 2, 2012

Edit 04/07/13: See the followup article for an alternative to using skip navigation links.

An exploration in automated accessibility testing

Today Grant Hutchins and I took on several stories to enhance the accessibility of a site. One of them was to add a skip-navigation link to the application.

To understand why skip-nav links are important, visit Jim Thatcher’s explanation.

Our immediate inclination was to write a request spec with Capybara to drive out the solution. We came up with the following.

The Test

require "spec_helper"

feature "Keyboard Navigation" do
  scenario "hidden skip navigation link shows when focused and jumps to content", js: true do
    login_as(users(:user))
    visit root_path

    skip_link = page.find("#skip-navigation a")
    skip_link.should have_content "Skip navigation"
    skip_link.native.location.y.should be < 0

    body_element = page.find("body")
    body_element.native.send_keys(:tab)
    skip_link.native.location.y.should == 0

    skip_link.native.send_keys(:return)
    skip_link.native.location.y.should be < 0

    current_url.should match(/#content$/)
  end
end

The Markup

%body
  #skip-navigation
    %p= link_to "Skip navigation", "#content", tabindex: 0
    ...
  #content
    ...

The Styles

body {
  #skip-navigation {
    a, a:hover, a:visited {
      position:absolute;
      left:0px;
      top:-500px;
      overflow:hidden;
    }

    a:active, a:focus {
      position:absolute;
      left:0;
      top:0;
    }
  }
}

What’s happening here?

We are asserting that the “hidden skip navigation link shows when focused and jumps to content” when clicked.

The most important aspect of what we did was emulating keyboard navigation. We’re using js: true so we have access to Selenium’s native methods and thus the send_keys method. This allows us to send keypress messages to the browser.

Since we’ve used positioning to hide the element, we also have an assertion around that property.

Problems in CI!

The application behaved as expected and the tests passed locally.

When we ran the tests in CI however, the tests failed. The reason is that _the browser must retain foremost focus in the OS in order for the :focus css pseudo-selector to fire on the skip-nav element. Without the :focus style rules applied, the skip-nav element remained invisible, and the tests failed.

We tried a workaround using within_window and forcing browser focus, but couldn’t get it to work. We’ve got a few more tricks up our sleeve that we’re going to try, and will report back here.

Edit:
We added within_window to the test to force focus on the browser. This makes the test less brittle locally (because it won’t fail if you click out of the window).

window = page.driver.browser.window_handles.last
page.within_window(window) do
  skip_link.native.location.y.should == 0
end
  • 0 Shares
  • Share on Facebook
  • Share on Twitter
Jonathan Berger

FOWD Day 2: A Closer Look At Accessible Mobile App Design – Robin Christopherson

Jonathan Berger
Tuesday, May 15, 2012

“My name’s Robin, and I can’t see.”

This is one of the most moving talks I’ve ever seen at a technology conference. Robin talks about the history of assistive technology for the blind during his lifetime, and the dramatic change that the iPhone wrought. The blind have an old joke that asks “How many blind people does it take to cross the street?”, and the answer was “Two: one to push the shopping cart full of devices for car-watching, curb-finding, direction-mapping, etc. And another to ask a sighted person for help.” An affordable pocket computer with motion sensors, an accelerometer, a camera, and a thriving app ecosystem has changed all that. Robin went on to detail what specialty apps he uses, which mainstream apps are (and aren’t) optimized for accessibility, and showed us the nitty-gritty of how technology changes his life and empowers him every day.

With technology came opportunity

  • In the 1980s, the PC revolutionized opportunities for disabled people in the home and workplace. This is how Robin got through his education.
  • Stephen Hawking Technology and adaptability allowed for great contributions from people like Hawking.
  • All you need is a single moving body part or the ability to make a sound or puff into a tube, and you can control a computer.
  • An iPhone changed the game: inclusion, power, and price. Now this power is in peoples’ pockets.

  • [* Robin plugs audio-out into computer*]

  • NB: One nice thing about being blind is that if you ask for assistance at the train, they always let you sit in 1st class.

  • Another is that I don’t know what people look like; their physical appearance has no impact on me. I don’t know whether they’re old, young, whatever.

[Video of Joshua Neely, blind].

  • single iPhone replaces multiple devices
  • two ways to navigate iphone:
    • touch item on the screen (and voice announces icon)
    • swipe left or right for previous or next
  • Once it says an item, it’s selected. double tap anywhere on screen to open it up.
  • Compass will announce direction. This is really useful for blind people who are disoriented with regard to direction, espcially in wide-open spaces like parking lots or fields.

Before iPhone

  • Specialty products at specialty prices.
  • Talking GPS was £700, talking notetaker was £2500.
  • You can get an affordable Braille bluetooth display for use with iOS devices.

Specialist Apps

  • [Robin's now using his iPad ]
  • Adjust speech rate with two fingers moving clockwise
  • Turn screen off and double battery life
  • Light detector app: there’s no talking ovens, so this is how you tell if the oven’s on.
  • Money Reader App: he’s waving a bill under the iPad camera and it announces “20 pounds”. It takes a few tries for him to get it; usually, he does this on the iPhone (better camera, flash).
  • LookTell Recognizer: similar treatment; wave objects under the app and it’ll announce.

Mainstream Apps

Apps vary wildly in their accessibility.

  • Skype: Robin can access the dialpad, contacts, calling. All of the actions speak and can be navigated by touch (without sight).

  • Adobe Connect (Skype competitor): none of the objects are exposed to accessibility. He has no idea what’s going on.

  • Pages: a working word processor, fully accessibility-enabled. It reads text, tells him what’s selected, meta information, screen content. Voice will let him navigate, read content. New iPad will allow dictation. He’ll use a bluetooth keyboard; various multi-touch gestures are available via keyboard shortcut. It’ll read his deletions and meta information around what he types. Very accessible. iPads are the tools of choice for schools in the US.

  • Facebook: lots of accessibility shortcomings. There’re other apps that do similar things to FB, but some apps capture the audience; he can’t find his FB friends anywhere other than FB.

  • Lanyrd (app for conference planning): totally non-accessible. Can’t even sign in.

  • iBooks: Everything is exposed and accessible.

  • Kindle: Lots of unlabeled images. Listen to the text. Very little meta information. There’re other Kindle readers for the blind (and the Kindle hardware is fine) but the iOS app doesn’t work.

Siri Envy

  • Accessibility is great, but its much slower than what sighted people can do. That sort of inefficiency is multiplied when you have to jump from email to calendar and back.
  • Siri lets Robin send a tweet really quickly. He just sent https://twitter.com/#!/USA2DAY/status/202360450736865280 from stage.

Evie

  • Alternative to Siri. Also available on android(?)
  • Geo search on Siri is limited to the US.
  • Ask a question, it’ll answer.
  • Answers can be rated up or down.

Accessibility on iPhone

  • This is available in the accessibility settings on iOS. Triple-click the home button to turn on the voice.

  • iOS Developer Library has an Accessibility Inspector which can help you make your apps accessible.

  • There’re lists of helpful apps, as well as non-accessible apps.
  • Android accessibility isn’t as well-developed. Large portions of the OS and many apps aren’t accessible. Blind Android users have to buy supplemental software and hardware.
  • Windows Phone 7 is a non-starter for accessibility.
  • Carsonified is doing great work at Treehouse with accessibility tutorials.

  • Mobile accessibility in mobility: using a robotic exo-skeleton to walk:

  • Claire Lonas walked the london Marathon in 16 days with a bionic suit after being paralyzed from the waist down.

  • Las Vegas is the first place that Google’s Driverless cars are legal. Steve Mahan, a blind user, gains independence. Here’s a video of Steve driving to get a taco, picking up his dry cleaning.

  • AbilityNet: consultancy, training, accessibility audits, disabled user testing, workplace assessments. robin.christopherson@abilitynet.org.uk

  • “Thanks to these tools I was able to move to where I live, meet my wife, have my two beautiful children. I owe everything to the technology.”

  • 0 Shares
  • Share on Facebook
  • Share on Twitter

Topics

  • agile (781)
  • rails (113)
  • testing (88)
  • ruby (83)
  • ruby on rails (70)
  • jobs (62)
  • javascript (55)
  • techtalk (44)
  • rspec (38)
  • ironblogger (32)
  • productivity (30)
  • activerecord (29)
  • gogaruco (29)
  • git (28)
  • nyc (27)
  • rubymine (26)
  • bloggerdome (23)
  • mobile (22)
  • process (21)
  • pivotal tracker (21)
  • cucumber (20)
  • design (19)
  • jasmine (19)
  • ios (18)
  • webos (17)
  • objective-c (17)
  • android (16)
  • tracker ecosystem (16)
  • palm (16)
  • "soft" ware (16)
  • fun (15)
  • ci (15)
  • cedar (15)
  • rails3 (14)
  • performance (14)
  • bdd (14)
  • gem (13)
  • css (13)
  • tdd (13)
  • selenium (12)
  • goruco (12)
  • bundler (12)
  • meetup (11)
  • railsconf (11)
  • nyc-standup (11)
  • capybara (10)
  • mac (10)
  • mojo (10)
  • chef (10)
  • api (10)
Subscribe to accessibility Feed
  • About
  • Case Studies
  • Team
  • Community
  • Careers
  • Contact
  • Labs
  • Events

Contact Us

contact@pivotallabs.com
+1 415-77-PIVOT
TwitterLinkedInFacebook

Pivotal Tracker

Tracker is the award-winning agile project management tool that enables real-time collaboration around a shared, prioritized backlog.
Visit pivotaltracker.com >