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 (?!) [Update 6-12-2019, I’ve just seen that there are actually 24 declared] 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.

Lighthouse scores for 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

Checking the Network tab in Chrome’s dev tools and noting: the total number of requests loaded, total page size, and 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 25!).

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

Performance and Accessibility Review of the Marianne Williamson 2020 Campaign 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.

Homepage of marianne2020.com

sethmoulton.com

The timing.js console log statements in devtools quickly tipped me off that Seth’s site is running the on the same platform as another I’ve already reviewed. Nice, that saves me some writing.

Google Lighthouse

Lighthouse scores for marianne2020.com

Performance: 46 out of 100

11.8 seconds Time to Interactive.

Huge 2+ MB homepage image is loaded as in png format despite any need for that. 20 seconds are spent downloading images, sometimes the same image in multiple resolutions.

Accessibility: 63 out of 100

  • [id] attributes on the page are not unique.
  • Images missing alt attributes.
  • Browser default focus outlines are present, improving navigation via keyboard.
  • Links that only use an image with no discernible text content.

Best Practices: 64 out of 100

Lo-Dash@2.4.1 contains vulnerabilities.

Errors are being logged to the console:

timing.js:38 Timer 'Form' already exists
timing.js:38 Timer 'Downloading' already exists
at.js:26 Uncaught NVTag was already initialized. The NVTag JS is likely included more than once on this page.

SEO: 97 out of 100

Tap targets are not sized appropriately.

Network

  • HTTPS: yes
  • 109 Requests
  • 10 MB resources
  • Largest asset is the 2.2 MB hero png. A prime candidate for using webp, supported in 3 of the 4 major browsers.

Platform

  • Drupal, custom theme.

Notes

Not the best site of all the candidates, but not the worst by any means either. Properly optimizing image delivery would be a huge boost to the site’s performance.

Performance and Accessibility Review of the Mike Gravel 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.

Homepage for mikegravel.org

mikegravel.org

Really, no one can be sure Mike Gravel isn’t a made up fiction. That he isn’t just two teens in a trench coat, or a Corgi wearing sunglasses. I refuse to seriously consider that he’s an 89 year old anti-war former (as in 1981) US Senator running for president.

Google Lighthouse

Lighthouse scores for mikegravel.org

Performance: 86 out of 100

Deploy this as a static site and you’d score 100s across all categories. The same performance hits that impact the other twenty. two. candidates I’ve reviewed so far impact this WordPress landing page.

There is either no or very short cache lifetimes on all the assets. Setting these to longer durations would improve the performance metrics for subsequent visits to the site. Of which there might be dozens!

Accessibility: 66 out of 100

  • Interactive elements don’t have any visible :focus styling.
  • Form inputs have no associated labels.
  • <html> element must have a lang attribute
  • User scaling is disabled. Think of the 89 year old’s eyes! Or mine!

Best Practices: 86 out of 100

The links to cross-origin destinations are unsafe. Witnessed this in every single site reviewed.

SEO: 100 out of 100

No outstanding issues.

Network

  • HTTPS: yes
  • 48 Requests
  • 3.9 MB resources
  • Largest assets are related to the youtube player embed, 375 KB javascript. No big issue with this since it is efficiently served from Google’s content delivery network.

Platform

  • WordPress, custom theme.

Notes

Nah. I’m still not convince this isn’t a prank by the web designers with their “combined 25 years of experience.”

Performance and Accessibility Review of the Wayne Messam for America 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.

Homepage for wayneforusa.com

wayneforusa.com

Google Lighthouse

Lighthouse scores for wayneforusa.com

Performance: 57 out of 100

There are a bunch of render blocking CSS files in the head of the document, but they are minified and cached, so that’s a performance win.

There isn’t much interaction or scripting being executed so the Time to Interactive is 6+ seconds. Not great by any means but compared to the competition it’s quite lean.

Accessibility: 82 out of 100

  • Default :focus outlines on interactive elements.
  • Low contrast issues with text.
  • Social links don’t have any link text. Over and over I’ve seen this and it is such an easy fix.

Best Practices: 57 out of 100

24 requests are not served via HTTP/2.

Scrolling event listeners are not passive.

The links to cross-origin destinations are unsafe. Witnessed this in every single site reviewed.

SEO: 83 out of 100

His homepage wasn’t in the top 3 pages of results for my first “Wayne Messam” Google search so I wasn’t expecting great things here. Maybe I’m the first website to link back to him? At least waynemessam.com redirected appropriately.

The Google Tag Manager script is 404’d, that’s probably not a good sign.

Network

  • HTTPS: yes
  • 33 Requests
  • 2.3 MB resources
  • Largest asset is a 184 KB icon font. Yet I count only 6 icons in use across the entire site. This is a significant waste of space and the font could be subset or dropped in favor of a few svg files.

Platform

Notes

The site is so basic and yet performs so poorly across all categories. There is a contact form in the footer that is fixed in place and revealed on scroll, yet no consideration was given to reserve enough space so that elements weren’t cut off.

Contact form bug

Performance and Accessibility Review of the Seth Moulton 2020 Campaign 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.

Homepage of sethmoulton.com

sethmoulton.com

The timing.js console log statements in devtools quickly tipped me off that Seth’s site is running the on the same platform as another I’ve already reviewed. Nice, that saves me some writing.

Google Lighthouse

Lighthouse scores for sethmoulton.com

Performance: 42 out of 100

15 seconds Time to interactive is 4 seconds worse than the same platform running Tulsi Gabbard’s site, yet he gets 2 more points in this performance score.

Despite the many images loaded, a spot check of the largest among them at least shows that they’ve been run through a lossless image optimizer.

Accessibility: 62 out of 100

  • The gravity forms plugin in use on the site adds tabindex values greater than 0. Generally there is no reason to do this, defining an order different than what it would normally be just based on the source order of elements.
  • There is no visual indicator that any of the interactive elements (save for Twitter’s embedded tweets) are focused.
  • Credit where credit is due, although it is visually inaccessible and doesn’t display a focus state, the Issues accordion found in the middle of the page actually does respond to keyboard clicks.
  • 17 empty links with no discernible text.

Best Practices: 79 out of 100

Lo-Dash@2.4.1 contains vulnerabilities.

timing.js is logging errors to the console:

timing.js:38 Timer 'Form' does not exist
timing.js:38 Timer 'Downloading' does not exist

SEO: 92 out of 100

1 link without descriptive text, simply “here”.

Network

  • HTTPS: yes
  • 163 Requests
  • 7.9 MB resources
  • Largest asset is the 1 MB banner jpg. A prime candidate for using webp, supported in 3 of the 4 major browsers.

Platform

  • Drupal, custom theme.

Notes

It looks like he hired a Massachusetts shop to design and dev the site, so props for supporting his local economy.

Performance and Accessibility Review of the Bill de Blasio for President 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.

Homepage of billdeblasio.com

billdeblasio.com

Google Lighthouse

Lighthouse scores for billdeblasio.com
These are the scores with storage cleared and only apply to the ActBlue splash page.
Lighthouse scores for a cached billdeblasio.com
Lighthouse scores for a cached version of billdeblasio.com

Performance: ? out of 100

Unfortunately, a fresh page load of the homepage here redirects to an offsite ActBlue donation page. It’s therefore impossible to measure the performance in the same way I’ve done for all the other candidates to date.

I’ll have to throw this out and measure the other scores based on a re-run of the test.

Accessibility: 84 out of 100

  • There is a skip to content link present, but it’s broken! The id it is supposed to link to isn’t present anywhere on the page.
  • Color contrast issues. If background images are not present, links and text are white on a white background.
  • User is unable to scale.

Best Practices: 93 out of 100

The homepage hero is twice the displayed resolution. A <picture> element to serve correctly sized images would be preferable here.

SEO: 100 out of 100

No issues found.

Network

  • HTTPS: yes
  • 28 Requests
  • 1.4 MB resources
  • Largest asset is a 604 KB homepage hero jpg.

Platform

  • WordPress, a “wp-frns-pac” theme, custom build I believe.

Notes

The redirection on the homepage is both super annoying and problematic for these comparisons. As a visitor this is worse to me than embedding the form directly on the homepage or placing in a popup.

I can’t help but critique the design in parts. The use of color is all over the place. Green and blue logo. Yellow text and buttons. A red favicon. It all seems hastily put together, and as a result there really isn’t much going on in the code to critique or review.

The yellow text over hero image is especially hard to read and these icons straight up suck.

Unreadable social icons floating over an image