A Performance and Accessibility Audit of the 2020 Democratic Presidential Candidate Websites

When Elizabeth Warren released her nifty Cancel My Student Debt online calculator a couple weeks ago, I needed to take a look at it. I do this with pretty much any notable piece of work on the web. Kick the tires so to speak, enter random data, and open up Chrome’s dev tools to inspect the code. That inspired the above tweet and got me thinking about how performant and accessible the leading candidate’s websites are.

My career is building websites. Huge data-driven applications for businesses and consumers, one-off pages for young adult book series, and marketing sites of all sizes in between. I’ve been an advocate for best practices in accessibility and performance for years, but unfortunately with marketing budgets and timelines as tight as they often are those concerns get left until the end of a project, the “nice to haves” if we have time, and I’m rarely given the time.

However, I believe a website is never “done”, and there are always ways to improve it, shrink the load times, be more inclusive to more users, all in ways that don’t sacrifice the aesthetic design that was sold to the client. So with all that in mind and today being Global Accessibility Awareness Day I’m kicking off a series looking at the websites of the 23 (?!) currently declared Democratic candidates for 2020. I think it could be a fun (lol, so fun!) exercise to look at each of them with an eye for how inclusive they are and how well they perform when stacked up against one another.

Tools and Methodology

I’ll begin with only looking at the homepages of each candidate. As the entry page with the most traffic this is likely to show the best and worst build qualities on any site. I’ll perform an audit of the page’s performance, accessibility, and SEO using Google Lighthouse.

The top level Google Lighthouse report of damofknowledge.com
Obviously I still have some work to do on my own site.
“The shoemaker’s kid always goes barefoot” and all that.

My settings for Google Lighthouse:

  • Device: Desktop
  • Audits: Performance, Best Practices, Accessibility (a11y), SEO
  • Bandwidth Throttling: Simulated Fast 3G
  • Clear storage
  • Incognito window so there are no conflicts with browser extensions

Network check: The total number of requests loaded, total page size. What is the largest asset being served.

I will manually check the site is served over HTTPS, and that HTTP traffic is properly redirected. If you want my campaign donations this is a no brainer so I would be surprised if this weren’t the case everywhere.

Platform check: am I able to determine what CMS or other application is powering the site? WordPress, Drupal, or something else entirely?

Many of the accessibility checks that Lighthouse does can not be automated and it notes that these must be done manually so I will do my number one a11y test: tabbing through a page and noting if I can find my way or not. Do links and buttons visually identify themselves as focused? Is the tab order logical (left to right, top to bottom)?

Finally I’ll add any notes and fun findings I may come across.

Comments will be open for feedback. As the first caucuses and primaries are still MONTHS away it is my hope that I will revisit many of these sites and see that their teams also realize that a website’s work is never finished and improvements have been made.

And now, in the order of this FiveThirtyEight poll tracker, let’s get started (before there are 24!).

  • Joe Biden
  • Bernie Sanders
  • Kamala Harris
  • Elizabeth Warren (coming May 21st)
  • Beto O’Rourke (coming May 22nd)
  • Pete Buttigieg (coming May 23rd)
  • Cory Booker (coming soon)
  • Amy Klobuchar (coming soon)
  • Julián Castro (coming soon)
  • Kirsten Gillibrand (coming soon)
  • Andrew Yang (coming soon)
  • John Hickenlooper (coming soon)
  • Tulsi Gabbard (coming soon)
  • Jay Inslee (coming soon)
  • John Delaney (coming soon)
  • Tim Ryan (coming soon)
  • Steve Bullock (coming soon)
  • Michael Bennet (coming soon)
  • Eric Swalwell (coming soon)
  • Bill de Blasio (coming soon)
  • Seth Moulton (coming soon)
  • Wayne Messam (coming soon)
  • Mike Gravel (coming soon)

Thanks to QZ for being the first place I Googled to find them all in one place.

Performance and Accessibility Audit of the Kamala Harris 2020 Website

This is one in a series of posts that will look at the performance and #a11y metrics of the websites for the currently declared 2020 Democratic presidential candidates. Yeah, all of them! For more background on what I’m doing and how I’m doing it check read this.

Home page of kamalaharris.org

kamalaharris.org

Google Lighthouse

Lighthouse scores for kamalaharris.org

Performance: 41 out of 100

The homepage is primarily driven by client side javascript with animations and video galore. The Speed Index and Time to Interactive (11.1 seconds) scores suffer because interactivity and the display of content is delayed until elements animate on screen.

Accessibility: 79 out of 100

  • First visit to the site opens up a Youtube player modal. Keyboard focus is not managed well, so a user must tab through the entire site to get to the Close button and view the content. On the plus side, the ESC key or any click on the page will close this roadblock.
  • ARIA roles are defined for navigation but are invalid.
  • There is not enough color contrast between buttons and their backgrounds.

Best Practices: 86 out of 100

Lighthouse calls for adding a rel=”noopener” to all external links on the site. There is a reason to do this. And it’s a pretty easy fix.

SEO: 98 out of 100

Button tap targets for touch screen devices are not sized large enough to be usable.

Network

  • HTTPS: yes
  • 102 Requests (yikes)
  • 8.5 MB resources
  • Largest asset is a 6.2 MB webm video. Good on them for serving up a modern optimized format but this is a very heavy assets for all but a very fast Internet connection.

Platform

  • WordPress, custom theme.

Notes

This is the first time I’ve noticed a candidate site using the social media AddThis widget for sharing. Somehow this thing keeps getting added all over the place despite overwhelming evidence that NO ONE USES IT. Killing it would go a long way towards improving the site’s performance scores, removing hundreds of KB in javascript and CSS code.

Continue on with the other candidates in the series

Performance and Accessibility Audit of the Bernie Sanders 2020 Website

This is one in a series of posts that will look at the performance and #a11y metrics of the websites for the currently declared 2020 Democratic presidential candidates. Yeah, all of them! For more background on what I’m doing and how I’m doing it check read this.

Home page of berniesanders.com

berniesanders.com

Google Lighthouse

Lighthouse scores for berniesanders.com

Performance: 73 out of 100

For the relative svelteness of the site, a single background video and signup form, I’d expect this metric to be much higher. Time to interactive is 7 seconds, first meaningful paint (when something appears on screen) is 3 seconds. Digging a little deeper my only guess is this poor performance is due to the javascript framework of choice: actionkit.js. I’ll admit I’m unfamiliar with this particular framework but sure enough Bernie and other candidates are counted as clients. Certainly we’ll meet again. *shakes fist in general direction of actionkit*

Accessibility: 67 out of 100

  • Default browser focus outlines appear for all buttons and links.
  • Lighthouse dings them for not having labels on form fields, a big no-no, but looking closer at the source reveals this to be incorrect score. Labels are in fact present.
  • The logo is a yuuuuge missed opportunity to include the most basic of things, “Bernie Sanders”, in a link or heading text. Looking at code such as below drives me nuts!
<h1 class="logo ">
    <a class="logo__link" href="/">
        <span class="sr-only"></span>
    </a>
</h1>

Best Practices: 93 out of 100

Lighthouse only lists adding a rel=”noopener” to the jobs link in the footer. There is a reason to do this. And it’s a pretty easy fix.

I will give the team kudos in their use of a very well optimized background video, weighing only ~31 KB. Not sure what socialist voodoo they did to pull that off.

SEO: 100 out of 100

I Googled Bernie, I got Bernie. Nothing more to say about that.

Network

  • HTTPS: yes
  • 47 Requests
  • 1.6 MB resources
  • Largest asset is the aforementioned actionkit.js, 82.2 KB.

Platform

  • WordPress, custom theme.

Continue on with the other candidates in the series

Performance and Accessibility Audit of the Joe Biden 2020 Website

This is the first in a series of posts that will look at the performance and #a11y metrics of the websites for the currently declared 2020 Democratic presidential candidates. Yeah, all of them! For more background on what I’m doing and how I’m doing it check out this post.

joebiden.com

Google Lighthouse

Lighthouse results for joebiden.com

Performance: 91 out of 100

That’s really good for a site like this. The biggest knock against it performance wise is the 4.1 seconds time to interactive. This is a measure of how long it takes for a site to load and a user able to interact with it, for example clicking on a button to donate. Faster is better.

Accessibility: 96 out of 100

  • Default browser focus outlines appear for all buttons and links. There is a missed opportunity to to style them to coordinate with the hover states.
  • The image carousel is keyboard accessible.
  • The popup modal to join the campaign appears to be inaccessible and can’t be filled out without a mouse. However it does close with the ESC key.
  • Form fields are missing labels.
  • No contrast issues with any of text were found!

Best Practices: 86 out of 100

In most cases the images on the page are jpgs and could be converted to more optimized formats such as webp.

SEO: 100 out of 100

Funny that this site scores a 100/100 but up until a few weeks ago https://joebiden.info/ was appearing at the top of search results and the .com was nowhere to be found.

Network

  • HTTPS: yes
  • 58 Requests
  • 3.9 MB resources
  • Largest asset is an image contained in a carousel, a 214 KB jpg

Platform

  • WordPress, BEXC theme. I can’t find if this is an off the shelf theme or a custom one with an inexplicable name.

Notes

All in all a very well-performing site, if a bit generic.

Continue on with the other candidates in the series