Gold’s Gym Class Schedule

Another accessibility challenge! I like trying to use websites with just a keyboard, which rarely works. The Gold’s Gym class schedule page is no exception. It has so many elements that respond to clicks only that it’s basically useless to a keyboard. I’m going to address the three issues that make this page unusable.

  1. Week selector
  2. Day selector
  3. Class information details

screenshot of the class schedule page with multiple areas highlighted

These  examples suffer from the same issues:

  • Mark up that prevents keyboard focus
  • JavaScript that does not include key press functionality

The class schedule defaults to the current week and current day to display information. If you want to look at a different week’s schedule, you have to use the tiny forward and backward arrows next to the week dates.

screenshot showing arrows next to the week April 23, 2018 - April 29, 2018

While each arrow is marked up as <a>, it does not get keyboard focus because there is no href attribute.

<a class="display-table-cell text-left" ng-click="vm.changeWeek(-1)"> <i class="material-icons">chevron_left</i> </a>

I solved that issue by adding tabindex="0"

(That’s the recurring theme for this post!)

However, even though the arrows now gain keyboard focus, they do not respond to key presses. Looking at the code I noticed the ng-click attribute, searched to find that’s AngularJS syntax and found there are others such as ng-keypress. I tried using that via the Chrome inspector but it didn’t work. There’s probably more to it to support key presses.

Each day of the week has a similar issue. Let’s look at the code:

<div class="border border-thin" ng-click="vm.setSelectedDay(day)">...</div>

The days are not marked up as buttons or links so again, no keyboard focus and they use the ng-click attribute only. tabindex="0" to the rescue.

screenshot showing three boxes for days of the week Monday April 23, Tuesday April 24, and Wednesday April 25

The last major issue is accessing the details of a class. For a mouse user, clicking a class opens a modal window. (Once on the modal window, keyboard tabbing resumes on the parent page but that’s another issue.)

screenshot of a modal window with close button and class details

For keyboard users, at this point you’re skipped from the “All instructors” select box, passed all the class details, to a form at the bottom of the page.

The whole class details area is marked up as a table. For a mouse user, an entire table row is a hotspot, not just the word Details.

<tr ng-repeat="scheduledClass in vm.filteredSchedules" ng-click="vm.openClassModal(scheduledClass)" class="ng-scope">...</tr>

tabindex="0" to the rescue.

All of these could benefit from using the :focus pseudo class to emulate the hover states for better visibility of what’s in focus.

screenshot of a row from the classes table showing the first row highlighted and in focus

With just a few tweaks, this page would be far more accessible.

Course: Developing with Empathy

Today I finished another free web accessibility course. This one is from Google and hosted by Udacity: Developing with Empathy

I find it hard to explain to other developers about having empathy for all web users, not just those who resemble ourselves. Courses like this are a great place to point those who might not be convinced that accessibility is important, especially those of us who work on projects that have little to no legal accessibility requirements.

This course is designed around four concepts:

  1. Providing and managing focus of elements for keyboard and switch users
  2. Constructing pages with good semantics and understanding the accessibility tree in the DOM
  3. A basic look at ARIA features
  4. Putting these together with style

I enjoyed learning about ChromeVox which emulates using a screen reader. The controls take some learning but it’s a useful way to test some of the hidden features of accessibility like aria-required on a form field.

Another helpful accessibility tool from this course is the Accessibility Developer Tools available through Chrome. It lets you perform an accessibility audit on a page and provides tips for improvements.

Here’s an audit of this blog’s front page.

screen shot of the results from an accessibility audit of the Fishy UX front page showing a score of 95
Fishy UX accessibility audit

AccessNow App

A new app out of Canada, AccessNow, aims to crowdsource the accessibility of communities. Maayan Ziv, a wheelchair user, has made it her life’s work to help others know which places are accessible before going out.

As she told CBC News in Access Now uses crowdsourcing to pinpoint accessible businesses

“Recently, I went to a place and there were three steps at the entrance, and I was told it was accessible. I get to the entrance, and there are those steps and then I’m stuck in the middle of the street without any options.”

I downloaded this app for iPhone to check out what’s going on in Austin. The app doesn’t have many places reviewed here just yet, with only four entries showing up for the Central Austin/UT Campus/Downtown area.

screenshot showing 4 map pins
AccessNow map view

In addition to a searchable map display, the app also has a list view. Icons from a green thumbs up for accessible to a red thumbs down for inaccessible help users know what to expect when experiencing a mobility impairment.

screenshot of the list view of map pins
AccessNow list view

Users can outline specific issues in a description.

screen shot explaining the accessibility issues with the Austin Panic Room
AccessNow app place details

Per the Americans with Disabilities Act of 1990, new construction and any existing construction that undergoes major renovations are supposed to be accessible. I see how this app would be especially useful for rating those places that were built before the act went into effect.

Users who have created an account can add new entries by tapping the ‘add pin’ icon, searching for a place, then entering details. The app provides several tags like accessible parking, automatic door and ramp, as well as an area to type out a description.

screen shot of the add place screen with options to rate how accessible it is
AccessNow add new place screen

Learn more from this interview with the creator.