Try this: on your desktop or laptop, go to a website. Say, Speaker of the House Paul Ryan’s newly launched A Better Way. Then hold your hands behind your back. Then squint your eyes until you can barely see anything. Now try to navigate the site.
Seems impossible, right? The reality is, millions of Americans access and use the web exactly this way. At least 57 million Americans, or 19%, of the US population has a disability, 16 million of whom have difficulty with vision or hearing. More than 50 million adults have arthritis, and still others cannot use their hands to operate a mouse, track pad, or touch screen due to other chronic illnesses, amputation, birth defects, neurological disorders, or injured shoulders, wrists, and fingers.
Yet people with disabilities access the internet for the same reasons the non-disabled do: to connect on social media, gather information, shop, entertain themselves, and so on. Excluding the disabled from accessing web content is a discriminatory practice, but one that’s that’s easy to avoid.
Web developers call the drive toward making the web inclusive “web accessibility,” or “accessibility.” It’s entirely possible to make virtually any website accessible, and most of the time without affecting design, content, or layout. Although, if it does affect content and layout, it’s usually a good thing, as accessibility demands that content be arranged and grouped in a logical manner.
Accessibility is, in truth, a mere suggestion, and relies on the thoughtfulness and foresight of developers and designers to implement. No one has to include the disabled in their audience if they don’t want to (or, more likely, if they are lazy, inconsiderate, and/or untrained).
The United States government, however, has mandated by law that its electronic content be accessible. In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.
The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508, agencies must give disabled employees and members of the public access to information that is comparable to access available to others [emphasis added].
Imagine my surprise when I accessed the GOP’s newly launched website “A Better Way,” created to “to promote a new six-point program to make America better,” and immediately new it was inaccessible. I’ve been a web developer for over 10 years and just from visual cues I could see that this site’s designers and developers cared more about trendy web design than the considerations of anyone who doesn’t have full use of their eyes, ears, and hands. When I sat down and combed through the code, I was truly flabbergasted at the poor decisions made by folks who are claiming they want to make America better. I suppose they don’t care if the disabled know this.
Legally, this website needs to be accessible. Just as a courtesy to the American people it claims to speak to, it needs to be accessible. So let’s go over the ways it’s not, and breaks 508’s Web-based intranet and internet information and applications, the World Wide Web Consortium’s Web Accessibility Initiative guidelines, and general best practices, at the expense of disabled users.
FAIL: Provide ways to help users navigate, find content, and determine where they are + Make all functionality available from a keyboard
In my opinion, A Better Way fails miserably to help people do any of the above, especially anyone who doesn’t have the ability to use a mouse or track pad because of limited mobility or blindness. These folks use the keyboard, usually the Tab button, to navigate through links and page content. Browsers know that links, forms, and buttons are inherently selectable by Tab (what we call “focusable”). Tabbing through page content usually works from top to bottom, but developers can even set the order items tab through.
If you’re on the speaker’s site on a desktop/laptop, reload the page and try to access the menu just by pressing Tab. Spoiler alert: you can’t, but this is how thousands, if not millions, of people need to access it.
In fact, absolutely NONE of the elements on the page, except for the mailing list signup box, are focusable without special software. Even screen-reading software like JAWS (which costs almost $900) doesn’t capture links. I was curious why, as I thought at least the menu links ought to focus. So I took a look at the code for the menu, which looks like this:
Here is the code showing the Poverty link as it appears within the menu titled “Issue Areas”:
Remember how I said browsers know links are inherently focusable? Here the developers didn’t indicate that Poverty is a link. No, they indicated that Poverty is a Heading Level 3 within a list. None of these menu list items are accessible by keyboard, and this structure makes no sense semantically, either. Headings are to be reserved for, wait for it…headings.
If you managed to open this menu without a mouse/touch screen, you’d have no way of accessing these links, nor would you have a way to close this menu. Other “links” in the site have the same sort of treatment—they’ve been stripped away of what browsers and screen-reading software know makes a link.
I will get to how the developers managed to make these items clickable without indicating they are links further down—another total fail on their part.
Note this blurb on the homepage:
You might expect there to be a lot of useful information below the “Expand to read more” button. But non-mouse/-track-pad users are left in the dust because they can’t access “Expand to read more” without special software. But in a twist of irony, what clicking the link gives you is…
…exactly zero more lines of text. I imagine these designers noticed the trend some major media sites have been using to present long articles, especially on mobile:
They do this because readers have a short attention span and may want to see other content without having to scroll past 1,000 words of text. But there is no reason to hide no lines of text. Ryan’s designers wanted to be trendy, without understanding the implications of the feature.
And that’s not all that’s wrong with this blurb. . . .
FAIL: Contrast ratio between text and background is at least 4.5:1
The font here is simply too light, compared to the background, to be easily readable by those with low vision. This ratio is 4.42:1. The most-accessible websites will have a ratio of at least 7:1. (Pure black on white is 21:1.)
FAIL: Provide captions for videos with audio
The first button to click (and only click, as it’s not focusable) is a video of Speaker Ryan talking about, I dunno, protein shakes, I guess? I wouldn’t know, because I had the volume turned off and there was no link for closed captions. Being deaf is kind of like having the volume turned off forever.
Here is the code that loads this video:
See that little bit in the middle line, far-left that says “controls=0”? That means the developers turned off controls for captions, and other helpful features, such as volume, permanently, and there is no way for a user to turn them on. Not only is turning off controls discriminatory to those with hearing impairments (or just no volume!), but those with slow internet connections who are unable to select a lower video quality.
Designers like to turn off controls because it looks cleaner to have only the video. But ask yourself: does having control of the volume, captions, play and pause, time, screen fill, and quality really affect your perception of the website?
Here is what it would look like if controls were enabled and users had access to YouTube’s native caption options:
Does Ryan think giving video control to his visitors is just so off-brand?
Note: The red X to close the video is not focusable.
FAIL: Declare a DOCTYPE and language for every page
This is Websites 101. Very first thing a webpage needs is a declaration that it is written in HTML—hypertext markup language—so that browsers know how to parse all the code that’s coming up. The second thing that is written is the language the site is in, which is helpful both for search engines, older browsers, and screen readers.
This site declares neither.
FAIL: Do not hide content behind hover effects
To my knowledge, this protocol hasn’t yet found its way into official W3C or 508 guidelines, but savvy developers know it to be true. Take a look at the following icons:
Users are expected to know to hover their mouse over the icons for more information and links. Well, as we have seen, if users do not have a mouse, they can neither see more information nor access the links. But let’s say we have a low-vision user who does have a mouse but needs to zoom in considerably. Here is what he would see:
How is this person expected to know what is going on?
FAIL: Provide text alternatives for non-text content
This requirement is not quite as strict as it sounds. Images and elements that do not convey critical information or functionality do not need a text-equivalent.
Ryan’s site doesn’t have much in the way of non-decorative elements. The few I can pick out are the “Play Video” button, and icons in the top menu bar. The code for Play Video icon is:
This should technically be a “control”—pressing a button to control the movie. But like his menu, it’s stripped of any code or makeup that tells a browser or other software that this is a button to click.
FAIL: Documents shall be organized so they are readable without requiring an associated style sheet
At their core, websites are made up of text, links, and images. As I noted above, declaring a DOCTYPE of HTML tells browsers to read out the content as a website and apply specific, (mostly) standardized style and layout rules to the content using style sheets. Some users may turn off styling so that text appears as simple black on white with blue, underlined links, and all in the order as entered in the document. Totally blind users especially have no need for visual styling and prefer to access content in a linear fashion.
Turning off the styles for A Better Way presents this:
While a semantically well thought-out page would look similar, the problem, as I elaborated on before, is that the items under the menu are not defined as links, nor are the Learn More buttons (which, by the way are another FAIL: repetitive link text should be abandoned for something more descriptive, e.g., “Learn More About Our Plan for the Economy.” Were a screen reader program asked to read out all the links on this page [were they proper links] they would be read out as “Learn more; Learn more; Learn more; Learn more.” Totally useless for those who need content read to them.)
End Ableism on the Web
There are about a billion more reasons A Better Way is a discriminatory site, and otherwise uses poor design conventions. Whoever designed and developed this site, presumably on the government’s dollar, ought to have been vetted for their accessibility knowledge. I believe every website has the should be accessible, but the Speaker of the House’s official .gov website has the prerogative to be—especially during an election cycle when citizens across the country of all ages, levels of internet savvy, technology access, and sensory ability have the right to access information about the parties vying for power.
Though these designers may have perfect vision, they surely are short-sighted. The internet is for everyone, not only for those designers wish were.
Inevitably someone will comment that, say, Hillary Clinton’s or Donald Trump’s website are also inaccessible, and this may very well be true. I would be happy to tear theirs apart as well. I singled this one out because it’s the only government website I’ve been to in quite some time, as I happened to hear about it on the news. But I want to point out that Hillary’s and Trump’s are not government property. Speaker Ryan’s is, and therefor has the legal obligation to be inclusive of those with disabilities. For Hillary and Trump, it would simply be smart.