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.
My settings for Google Lighthouse:
Audits: Performance, Best Practices, Accessibility (a11y), SEO
Bandwidth Throttling: Simulated Fast 3G
Incognito window so there are no conflicts with browser extensions
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.
Dude, you announced after the first debates were set, after Rep. Jim Clyburn’s World Famous Fish Fry. Why? WHY?! You’re already toast. White, white toast. But I’ll do this review anyhow.
Performance: 41 out of 100
/wp-content/themes/joesestak/img/logo-slogan11.svg is a 538 KB svg. Five hundred kilobytes, for an svg. Because it has a drop shadow on an IMAGE of text. That makes me so irrationally upset I’m just going to move to the next section.
Accessibility: 67 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: 71 out of 100
Scroll listeners are detrimental to the page performance.
SEO: 91 out of 100
A FIRST! WOW! Something new after 25 reviews. They are blocking Google and all search engines from indexing the site. Really though, who needs your site to show up in a simple Google search of your name when you’re running for president? Honestly, I’m shocked that Lighthouse gives such a blunder a 91.
<meta name="robots" content="noindex,follow" />
18.3 MB resources
Largest asset is a video that doesn’t appear until later in the page. Please clap.
WordPress, custom theme.
Being last to declare (so far) didn’t gain him any better a website than the other candidates. How long until someone discovers they’re getting zero traffic from search engines?
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.
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.
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.
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.
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.