Performance and Accessibility Review of the Amy Klobuchar 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 amyklobuchar.com

amyklobuchar.com

Google Lighthouse

Lighthouse scores for amyklobuchar.com

Performance: 87 out of 100

2 seconds to content paint isn’t bad at all. There is one png that could be optimized with a better format like webp.

Accessibility: 47 out of 100

There are quite a few problems that should be addressed.

  • The green text on blue background doesn’t provide enough contrast.
  • Several images contain no alt attribute to describe them.
  • Labels for form inputs contain nothing but an icon, so they remain unusable by people who use assistive technology.
  • Social links contain no descriptive text.

Best Practices: 79 out of 100

Like other candidate’s sites, this one suffers from the common problem of not using rel=”noopener” on links that may open in a new tab or window, which can be a security risk.

Quite an old version of jQuery is being served: 1.9.1

SEO: 100 out of 100

No issues.

Network

  • HTTPS: yes
  • 40 Requests
  • 3.2 MB resources
  • Largest asset is a 597 KB png.

Platform

  • WordPress, Scotchpress theme.

Notes

Scotch Digital, the company behind the theme, puts this ridiculously long comment in the head of the document. This is the first bit of ASCII art or easter egg I’ve come across when viewing the code of a site. While they can be fun, I really don’t see the point of this massive amount of pointless HTML being served up, with no message whatsoever. Maybe it’s a code I’m just not smart enough to get. 🙄 That’s one problem with using an off the shelf design, you inherit all the bad code choices someone else made.

<!--
     😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::;tttt;::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::L@@@@L::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    ::::::::::::::::::t8@@@@8t::::::::::::::::::::::::::;::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::i0@@@@@@81:::::::::itLCCCCCCL::ifCG00GCt;::;tCG00GCt;:::1LCCCCCCCCLt1:;tLCCCCCf;::::::
    ::::::::::::::::;C1C@@@@@@G;::::::::::;G@@@@@0iLGCG8@@@@@GifGCG0@@@@@0i:::;C@@@@@@8i:::::iG@@0t;:::::::
    ::::::::::::::::Lt:;0@@@@@@C:::::::::::L@@@@@8Ct;::18@@@@@Gt;::i0@@@@@L:::::L@@@@@8t::::::t@C;:::::::::
    :::::::::::::::tf:::i8@@@@@@f::::::::::L@@@@@81::::;0@@@@@L:::::G@@@@@C:::::;C@@@@@8t:::::fL:::::::::::
    ::::::::::::::1L;::::t8@@@@@81:::::::::L@@@@@0;::::;0@@@@@f:::::G@@@@@C::::::;C@@@@@8t:::if::::::::::::
    :::::::::::::iG1;;;;;;L@@@@@@0i::::::::L@@@@@0;::::;0@@@@@f:::::G@@@@@C:::::::;C@@@@@8t:iL;::::::::::::
    ::::::::::::10C11111111C@@@@@@C;:::::::L@@@@@0;::::;0@@@@@f:::::G@@@@@C::::::::;C@@@@@8fLi:::::::::::::
    :::::::::::f8@f::::::::;0@@@@@@L:::::::L@@@@@0;::::;0@@@@@f:::::G@@@@@C:::::::::;C@@@@@0i::::::::::::::
    ::::::::;tG@@@01;:::::::L@@@@@@@Li::::;G@@@@@0;::::i8@@@@@L::::;0@@@@@0i:::::::::;C@@@8t:::::::::::::::
    ::::::;tLCGGGGGCLt1;:itfCGGGGGGGGCf11tLGGGGGGGf1::1fGGGGGGCti:1fCGGGGGGLti:;1fLf::;C@@f::::::::::::::::
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::iG8@@C:::;GL:::::::::::::::::
    ::::::::::::::::::::::::::::::::::::::for AMERICA!::::::::::::::::::::::::t@@@@G;::if;:::::::::::::::::
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::;fG088Ctt1;::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::;;;;;:::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎

    Site made with love by Scotch Digital.
    -->

Performance and Accessibility Audit of the Pete Buttigieg 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.

Home page of peteforamerica.com

peteforamerica.com

Google Lighthouse

Lighthouse scores for peteforamerica.com

Performance: 85 out of 100

Quite nice! First render of content appears at 2.3 seconds. There is an opportunity to use the optimized webp format instead of jpgs throughout the site (they’re supported by Firefox now) but overall this is a very promising start. Digging a little deeper into dev tools I’d wager they are not relying on much client-side javascript for the layout and animation effects, which gives the pretty great score we see here.

Accessibility: 68 out of 100

  • The logo doesn’t use an alt attribute to describe the image with text, nor do the social links in the footer. In fact, it’s kind of maddening that the social links (Instagram, Twitter, etc.) use TWO images each in the source code, one for normal and one for hover, and don’t include any descriptive text for the link.
  • Form input labels are hidden using display: none; which makes them invisible to screen readers. A better method would be to use a CSS style such as:
.screenreader-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

The site uses a plugin called Gravity Forms for all the info collection forms on the site. This plugin has accessibility issues with using tabindex values greater than 0.

Tabbing through the site using a keyboard only and visually finding your way is impossible since not a single :focus style on any link or button or form input exists.

Best Practices: 79 out of 100

Like other candidate’s sites, this one suffers from the common problem of not using rel=”noopener” on links that may open in a new tab or window, which can be a security risk.

SEO: 90 out of 100

There’s no meta description tag! Come on now!

Network

  • HTTPS: yes
  • 52 Requests
  • 1.7 MB resources
  • Largest asset is a 162 KB jpg.

Platform

  • WordPress, custom theme.

Notes

The fun thing about the order I’m going in is that I haven’t looked at any of these websites yet (save for Elizabeth Warren’s), but I still bring my own assumptions to it, so it is enjoyable to see what I thought right and what I thought wrong.

Though this series is not meant as a design critique it’s interesting to me to see the choices each candidate has made for their brand and how those impact the build of each of their websites. I had previously read about the design system Mayor Pete was rolling out, and although he is not the first and it’s been done well before, the design’s use across the site is quite effective. Really, with the amount of nice animation and interesting design of the home page I’d be proud to have developed this site, however there are a number of accessibility issues that keep it from greatness.

PeteButtigieg.com is a parked domain, I have no idea who owns it, but I would like to point out that I successfully spelled Mayor Pete’s last name correctly in my first Google search to write this post. Probably a good call to go with peteforamerica.com though.

Performance and Accessibility Audit of the Beto O’Rourke 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.

Home page of betorourke.com

betoorourke.com

Google Lighthouse

Lighthouse scores for betoorourke.com

Performance: 72 out of 100

Not too bad, mostly the usual suspects of render blocking CSS and javascript in the head of the document that are slowing down the First Meaningful Paint to 3.7 seconds.

Accessibility: 72 out of 100

  • Three low contrast warnings in a site who’s color scheme is black and white! The footer text uses color: gray which doesn’t pass the WCAG AA level of compliance. The hex code for gray is #808080, subtilely darkening to even just #707070 would fix this issue.
  • I think there are more egregious contrast problems deeper in the site, but I’m limiting this review to the homepage.

Best Practices: 86 out of 100

There is one document.write() used, which could be delaying the initial rendering of the page. These are often used by third-party tracking scripts that get added to site.

SEO: 100 out of 100

No problems detected.

Network

  • HTTPS: yes
  • 57 Requests
  • 1.6 MB resources
  • Largest asset is a 319 KB jpg of Beto that acts as the page background. This image randomly changes on page load so your results may vary.

Platform

  • WordPress, custom theme

Notes

Overall a relatively small homepage that loads pretty fast. To be expected when the only purpose is a signup form and to display navigation to the rest of the site for more information. The black and white design lends itself well to good performance, with few extra images or lines of CSS needed. It’s just that, it’s so… boring!

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