Campaign websites and accessibility

You may have seen this Vox article making the rounds in recent weeks. Miami Lighthouse for the Blind and Visually Impaired, an accessibility advocacy organization, analyzed all the 2020 presidential candidates’ websites, and found that NONE of them were fully accessible. 

The headline was pretty alarming. But what does it really mean?

At Four Kitchens, we talk about accessibility as being a spectrum (none of these sites are, in fact, totally inaccessible to users with disabilities, as the headline screams.) But could they be improved? Absolutely! 

We went through the websites, and found several common issues, many of which are easily remedied. Let’s look at what they are:

1. Help, where am I? 

If you are using a keyboard to navigate a site (using the “tab” key), you should see a visual indication of where you are on the page (a “focus” state), to help orient you. Elizabeth Warren and Pete Buttigieg’s sites both lack that visual indicator, making it hard to find your way. 

Now, I’m not one to “buddha-judge” (had to shoeho\r\n \that one in), but Buttigieg’s site has overridden the natural tabbing order (the tab index), so a user is forced to tab through the forms on the site first, taking them on a wild goose chase through the homepage. Try to ensure that the user’s keyboard navigation order matches that of a sighted user.

In the screen capture above, I’m using the keyboard to navigate the site, but I can’t see where I am, and am being taken all over the page. 

2. Description-free images

All images should have “alt” attributes. Period. This is a description of the image that screen readers (text-to-speech assistive technology) can pick up, so a user with low vision can also engage with the content. Even images that are NOT content (like purely decorative images or icons) should have empty alt attributes so a screen reader knows to skip over it. 

3. Low contrast

Many of these sites are guilty of using font styles and colors that just doesn’t provide enough contrast. Contrast is harder than you think to eyeball. Be sure to run the WebAIM contrast checker on colors that will be used as background and foreground. It’s especially hard to gauge when text is overlaid on images. 

Consider testing your site in grayscale to get a different perspective: 

4. Missing form labels

Forms are one of the most important features of a campaign site, gathering volunteer sign-ups collecting donations. It is imperative that they be clear and easy to use. Many of the campaign sites, however, were missing form labels or form field labels, or had labels but they weren’t properly associated with the fields they described. 

One trend is to have the “label” be the “placeholder” text inside the field itself (which then gets replaced when you start typing in the field.) It looks great, but it is super important that the field is ALSO properly labelled or described. 

5. Form errors

If you fill out a form and miss something, it should be super easy to see what is missing and how to correct it. Here’s an instance where form error indication and contrast issues meet: the red outlines are just not strong enough next to the gold background. 

6. Zoom is disabled

Zooming in on your phone has become second-nature. Why would a website disable the ability to do this? This setting is annoying for some, a deal-breaker for interacting with the site for others. Don’t do this. (I’m looking at you Gillibrand, Biden, de Blasio… among others.)

(No screenshot for this one, just imagine the frustration of pinching to zoom in and nothing happening.) 

7. Video descriptions and captioning

Sometimes website “accessibility” means providing alternative ways to experience content. Many of the videos hosted on these campaign sites are missing text versions. If you provide video content – even slo-mo background videos, you must provide captions and descriptions for those who cannot view the video. Otherwise, crucial content is just not going to be accessible. 

There are good, accessible video players out there, like Able Player. If you want to still use YouTube, you can caption the videos yourself, or pay someone to do it for you.

8. Links are not named

If you have a link, make sure there is text inside of it, otherwise screen readers and other assistive technology cannot tell the user where the link is taking you. Et tu, Bernie? 

Many of these issues are not just frustrating, they can be deal breakers for potential supporters and donors. And many are simple fixes (though some – like video captioning – are indeed time consuming, but still important.) 

Important disclaimer: While I’ve picked on the Democratic candidates here, I’ll just mention that the presumptive Republican nominee’s campaign website contains all the issues mentioned above. Every. Single. One.