(Some) Seattle mayoral campaign websites need improvement

The Seattle mayoral primary is basically over. It's pretty clear who will advance, even if the vote isn't certified. So it might seem silly to go look at accessibility of campaign websites now. But some folks look at how much Andrew Grant Houston's campaign raised and spent for so few votes and are concerned. I think folks should not be surprised or concerned: a relative unknown candidate whose young and not white, running in a crowded field with many big names, is sadly likely to earn a combination of enthusiasm (money! volunteers!) and few votes. Lots of folks told themselves something like "I really like Ace but he isn't going to be top two, so I voted for <probably González or Echohoawk>".

One reason AGH for Seattle spent so much money is something they highlighted early on: prioritizing accessibility and inclusion on their website. I didn't really look earlier in the campaigns as I already had a good idea who was in my top 3-4 pretty early. But lots of voters do look at campaign websites. The AGH campaign's prioritizing of accessibility and inclusion shows even in a very brief visit using VoiceOver on my iPhone. VoiceOver is a screen reader which in the past I've had to use to do most anything on my phone due to vision loss (much of which has been improved with surgeries). I am not the most proficient screen reader user but I can get by and still use it at times when my eyes are too tired or sore (or I'm sitting with a hot pack on my eyes for 10-20 minutes). Anyway, I "looked" at AGH's website using VoiceOver briefly, and then the two other candidates who were in my top three and then the candidate who currently is leading in votes in the primary.

I made "screen recording" videos on my phone at 50% speaking rate. I tend to swipe past various things VoiceOver says because I know what it's going to say (part of how screen readers can be very efficient is knowing how and when to skip audio announcements). I tried not to, but in places it might be confusing for that reason. I've uploaded them to Flickr with rough transcripts of the audio with a few explanatory notes. Mostly I focused on swiping through the top of the pages and then trying to open the main menu, if I could find it, as these are tasks I often perform when I am fully dependent on VoiceOver. In a few cases I got distracted by something odd or confusing. Note that this post assumes the reader does not have significant vision limitations and has not used a screen reader much, so many explanations here will be overly detailed if you are in one of those categories. This is also focused on my experience with accessibility issues, though I do think a lot of my comments are commonly experienced website problems people run into. Links:

Bruce Harrell's Campaign Website

In the session for Harrell's website, the first annoyance is that a 'donate' pitch is given before any announcement of what website or page title. While VoiceOver does announce website addresses, as you can hear in the recording, it often mangles alllowercasewords beyond recognition (this is why your hash tags should #LookLikeThis). So a person might actually hit this page and not really know it's Harrell's webpage. There's only one link that I like to hear before a page relevant title: "Skip to main content" which is a common accessibility design feature which some candidate webpages had, but not Harrell's website.

Worse is that once I got to the menu button and opened it, swiping right did not take me into the menu items. I can read my phone well enough (currently) but when I can't, I often used the VoiceOver gesture that is to swipe right with one finger as a primary navigation. This is supposed to to the "next" thing in the page that is a separate thing to be read. If you've ever turned on keyboard navigation in a computer application, then a swipe-right is often equivalent to what happens when you hit the "tab" key. I use the swipe right (and left) gestures a lot when using VoiceOver in unfamiliar apps or unfamiliar websites. When I open a menu, I expect the swipe-right to take me to the next menu item. For Harrell's website, it was continuing to navigate "underneath" the menu popover. If you are watching the video (with sight) you will see there's a little black box outlining where the audio announced item is. Some people who use screen readers have some vision so these can be helpful structural clues about how a page "works". Eventually I gave up and just scrubbed my finger around the screen until I heard reasonable menu items.

Some smaller issues are common ones: links or titles that announce twice in a row which is annoying but not a blocker. It just speaks to carelessness and that whoever designed and built the website isn't really proficient in accessible website design. Fortunately it's fairly easy these days to make mostly accessible websites, at least for text based things. I did not in any of these sessions go hunting for images without alt text (image descriptions) or videos without image/audio descriptions or anything like that.

For Harrell's website, I also note that I don't see any sign of alternate language choices on Harrell's website, even though a sizable fraction of Seattle residents speak or prefer languages other than English.

Lorena González's Campaign Website

The session for Lorena's website (full disclosure: she was my #2 and I'm contributing money to her general election campaign) is interesting because while I think it is more navigable than Harrell's at a basic level, it has some real problems which I hope they fix (I will be emailing both primary advancing candidates with this post and will update it if they respond). One thing to note is that the González website has the menu early in the swipe order ('tab order') so that I didn't even have to open a menu via a little "open menu button". On mobile, there's a little stacked line icon on the top right that opens this menu in a popover, but on desktop, it's just across the top view. This behavior when in a screenreader of putting the menu higher up in the navigation order makes sense, but I'm so used to websites that on mobile make me open a menu that I was a little surprised. This is pointedly not a problem!

There are however a couple of real issues. The biggest is that a prominent piece of text that is early in the swipe order (on mobile at least) that starts with "Seattle needs a mayor we can trust ..." has html that results in VoiceOver reading each letter by itself "ess. eee. ay. tee. tee. ell. eee" and so on. This is needless to say a page problem that were I dependent on a screenreader, I would just try to get past it in annoyance or leave the page entirely.

The other issue is that at least today on mobile, there's a main image underneath this early content which was a video or maybe a slideshow of changing images. I find it next to impossible to read text over images at all with my current vision and moving ones are worse. I know others with other disabilities would find it nauseating or otherwise hard to use. This is something campaign websites should definitely avoid! I know it looks pretty and nice to have a slideshow of the candidate with supporters and community, but not at the top of the page with text over it that I might want to read!

Surprisingly I don't see alternate languages offered on González website, but it's also possible her campaign is reaching out to non-English language communities in ways I'm unaware of, given her strong support from labor and other organizations that would have ties in those communities. (Note: for completeness, I did go load both González and Harrell's webpages in a browser session that requests Spanish as preferred language in case their websites worked that way, but still got English back in both cases.)

Colleen Echohawk's Campaign Website

The session for Echohawk's website was mixed but nothing super annoying stood out to me, aside from a lot of double-announcements. But it was fine to navigate: it took the more expected route on mobile of having a button to open the menu which then you can swipe through (unfortunate "folder. link." announcements though). I also note that her campaign has a Spanish language section which is an obvious choice for non-English language choice.

Andrew Grant Houston's Campaign Website

As noted earlier, Houston's campaign publicly and intentionally prioritized inclusion and accessibility on their website. I had heard that they were translating the full website into non-English languages and unlike many campaign websites I've seen in the past, this is fully integrated: you can select an alternate language from a list and the entire website changes language, not just the sub-menu for the particular language(s) a campaign might choose to provide some of the campaign content in. Near the end of the VoiceOver session I got curious about it – I had never looked at it before – and discovered this menu wasn't fully accessible in a screenreader, probably for a variety of reasons (including my phone not being able to read some languages aloud!) but it worked surprisingly well.

The website design, even in the brief time I spent on it in VoiceOver, shows that they did intentionally consider accessibility. There's a "skip to main content". The menu opens smoothly and even makes it clear with the announcement once it's open that the menu is currently open (and the button is now a collapse menu button). There are no double announcements.

General Election Campaigns: Do Better

I obviously am not doing a thorough assessment of any of these websites: I am not actually a technical expert on accessibility, only someone who programs computers for a living and had to start using these tools regularly. But, it's made me curious and I've actually improved my general web development skills because some accessibility experts have amazing articles about accessibility in websites works. But it's long been obvious to me as a screenreader user browsing the web when a modern webpage was made by someone thinking about web accessibility and when the site creators were not. Modern web development tooling make it relatively easy to make websites that are usable, even if not terribly comfortable or easy to navigate. It however still takes expertise and diligence to make ones that are obviously considering accessibility needs, even if they don't always succeed. Houston and Echohawk's both show signs of having thought about it. I'm hoping that other campaigns take what Houston's campaign insisted on and at least meet his campaign's standard. Accessibility and providing non-English language content are worth it even if they are expensive.