Texas Gas Service Homepage

Another accessibility disaster. It’s great that people are finding creative ways to use JavaScript but it is not okay to ignore progressive enhancement techniques.

Your users should never see this instead of content:

Our site requires javascript, please enable javascript and refresh the browser window.

JS frameworks do a disservice to the Web after all the innovation and hard work that has gone into creating a separation model for content, presentation and client-side scripting.

drawing of a peanut M&M candy showing content as the peanut, presentation as the chocolate layer and client-side scripting as the candy shell
Layering content, presentation and client-side scripting – Drawing by Dave Stewart

The Texas Gas Service website gives us lots of examples. Let’s see how well we can use the site without a mouse, a.k.a tabbing through.

(Step 0: What is with this trend to play videos as background images? I thought we learned this lesson years ago. Having movement your users can’t disable is annoying and bad practice. Stop it.)

screenshot of the Texas Gas Service home page with user login form
Texas Gas Service homepage
  1. Links I can’t click; let me count the ways
    From the “I want to…” select menu to the hamburger menu to the footer, dozens of “links” are not marked up as <a href> and cannot be tabbed to, nor would they be read as links by a screen reader.

    screen shot of the expanded I want to... menu
    These aren’t links

    This is lazy and wrong. If something is a link, make it a link. Fake links achieved with JS only are a large accessibility barrier.

    <div click.delegate="goTo('home', true)" class="btn pill-btn white-fill-btn au-target" show.bind="!session.loggedIn" au-target-id="111">Pay my bill</div>

  2. Tabbing order fail
    The tabindex attribute can be a really useful tool. It can also completely screw up a user’s ability to access important information, like the “username” field. When I could not tab to the “username” field, I looked at the code and saw the field was set to tabindex=-1. I had to look this one up. Here’s a 2014 explanation from The Paciello Group:

    When tabindex is set to a negative integer like -1, it becomes programmatically focusable but it isn’t included in the tab order. In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.

    From my perspective as a customer who visits this page, being able to log in is the number one user story but it isn’t possible using a keyboard.

  3. Form validation errors
    The only time the “username” field seems to get focus is if that field is empty when clicking the “Login” button. Plenty of client-side field validation solutions work without removing a field from the tabbing order.

    screen shot of the login form with validation errors for the empty username and password fields
    Login form validation errors with login button disabled

    If a user tries to login with bad data, a small modal window with a an unhelpful developer-style error message of “Login failed” appears at the top right of the page. There is no associated help text about the causes of the error, or which fields have errors, and focus is removed from the form making it that much harder to update the data.

    screenshot of the error message login failed in a modal window
    Login failed error modal window

    Adding to the confusion is the little green check in both fields indicating what would usually mean the field data is valid. But for this form, a green check merely indicates that a field isn’t blank. There isn’t any robust client-side validation occurring at all.

Pet peeve: What is the point of removing the browser scrollbar from the page? It provides a simple and useful way to indicate where I am on the page. This is something I really miss on mobile devices.

On Walkability of Communities

My community cause is keeping the sidewalks clear in my neighborhood, primarily the very busy street leading to both a middle school and an elementary school, part of which is in a school zone. On my morning walks, I see parents and kids leaving the sidewalk to avoid things blocking the right of way (ROW).

Our city requires property owners to keep sidewalks clear because the area from the top of the sidewalk to the street is a public easement and intended for equal use by all residents.

map showing public easement between sidewalk and street

What’s the big deal? Well, anything impeding pedestrian traffic makes the community less walkable and presents hazards to those trying to navigate the neighborhood safely. It’s dangerous (and annoying) to lots of community members, including

  • Parents and kids going to school
  • Bikers
  • People pushing strollers
  • Joggers
  • People walking dogs
  • Wheelchair users
  • Blind pedestrians

These hazards fall mainly into two categories: cars and plants.

Cars

In Texas, impeding sidewalks with a vehicle is a ticketable offense. Cars are not supposed to park on or over sidewalks in any way, both by state law and further by city ordinance. Period.

§ 16-5-21 PARKING BETWEEN THE CURBLINE AND THE PROPERTY LINE PROHIBITED
It shall be unlawful for any person to park or permit or cause to be placed, stored or parked any motor vehicle on that portion of the public right-of-way between the curbline and the property line.

car parked over sidewalk near a flashing school zone sign

Some folks want to rationalize their choice to block sidewalks, illustrated nicely in this article. Here’s a video from the story:

In my neighborhood, street parking is not a problem. The roads are wide and there is plenty of room.

Plants

One of the things I love about this neighborhood is that it doesn’t have a homeowners association. No one can tell you what to plant or do with your yard; and with that freedom comes a necessity to keep plants under control. As an ardent gardener, I’m sympathetic to the amount of work it takes to maintain landscaping, until it becomes a safety issue.

overgrown shrubs blocking the sidewalk

The city started a campaign this summer to inform residents of their foliage responsibilities.

Streets, sidewalks, and other public rights of way are for everyone’s use. Property owners are responsible for their private trees and all other vegetation in the public right-of-way next to their property. Overgrown vegetation is a safety hazard and limits the use of sidewalks, trails, streets and alleys. It further threatens public safety when vegetation blocks the view of traffic signs, signals, vehicles, or cyclists. Trimming vegetation and caring for your trees are effective ways residents can enhance neighborhood safety.

Next Steps

I think this is primarily a problem of apathy. People don’t care if their cars impede sidewalks probably because they don’t use sidewalks. On morning, I tried asking someone in his car blocking the sidewalk to keep it clear and it did not go well.

Our city has a very useful 311 (code compliance) app where you can log a complaint in real-time with a photo of the issue and geolocation of the address, leaving enforcement to the professionals.

Just as we have to advocate continually for usability and accessibility of digital spaces, the same still holds true for many physical, public spaces. Education and laws are our current tool set. I’m hopeful we can change some minds though awareness, but for the rest who don’t care, it’s important that we make concerns known to community leaders.

4 Ways Kiva’s Redesign Limits Keyboard Users

Kiva, a microlending non-profit that enables anyone to lend money to help end poverty, recently went through a site redesign. This included major changes to its global navigation, faceted search, and loan display. Here’s a snapshot of the Lend page highlighting four problem areas affecting keyboard users.

screen shot of the Kiva.org Lend page

1) Global navigation menu doesn’t open

When tabbing through the site, the second link is the “Lend” menu in the global navigation. Only by using a mouse can the “Lend” menu be displayed. Hitting the space bar or enter keys to try to access this menu just reloads the page.

Kiva needs to implement a keyboard-friendly solution like Adobe’s Accessible Mega Menu, available on GitHub. It enables users to access drop drown menus with the space bar, and then continue tabbing through the menu links. The esc key exits the menu at any time, returning focus back to the navigation item.

screen shot of a mega menu on Adobe's Accessible Mega Menu page

2) Hidden controls

The “Borrowers” facet uses hidden radio buttons and provides no feedback to a keyboard user when one is in focus. Here, I’ve disabled the CSS rule that hides the radio buttons.

screen shot of the hidden radio buttons for the Borrowers facet

I tried repeatedly to select one of these options using the keyboard but couldn’t. Kiva needs to allow users to select all form options, even if the radio buttons are visually hidden. Mouse users click on the form labels to select options but labels do not get keyboard focus.

Another set of facets employs sliders to filter results. These are completely inaccessible to keyboard tabbing.

screen shot of slider filters in the Kiva faceted search

I did a little searching and came across some accessible slider examples that allows keyboard focus on the handles then employs the arrow keys to adjust the values.

3) Focus, focus, focus

So many elements on the Lend page do not indicate they are in focus, from the above mentioned facets using radio buttons, to the lending controls for individual loans. In this example, the links for “Lend $25” and “Learn more” are visible only on hover. While the links can be tabbed to, there is no feedback that they are in focus.

screen shot of the loan gallery

Kiva needs to use the a:focus CSS selector consistently and ensure any JS used to show links works with keyboard focus too.

4) Stuck modal windows

Another facet option is to “Select countries” to filter loans. This link opens a modal window.

screen shot of the select countries modal window with checkboxes for each country

I tried tabbing through the country checkboxes but nothing happened because the modal window did not get focus. As I held down the tab key, I could see that I was continuing to tab through the links on the Lend page instead. My only option was to hit the esc key.

Final Thoughts

Making sure your site works with focus is important and easy to implement. For visual feedback, you generally can employ the same CSS rules used for hover. Another useful enhancement would be to provide a way for keyboard users to skip the search facets and go directly to the loan options. Reviewing this site has inspired me to create a future post centered on accessible faceted search.