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.

yang2020.com

Google Lighthouse

Performance: 21 out of 100

I came in to this review with the assumption that the darling of the Silicon Valley crowd would have quite the website. Either it would be extremely well optimized or run like shit, and here we are. 34.7 seconds Time to interactive. A double digit megabyte front-end. Woof! But it does come with this cheesy bouncing Yang fundraising counter:

Accessibility: 63 out of 100

• No labels for form inputs
• Text contrast issues
• No alt attributes on images
• Links with no discernible name, using only an image with no alt text.
• The :focus styling uses a custom 1 pixel outline, so someone was obviously paying attention to the design details but didn’t even try to take care of these glaring accessibility issues.

Best Practices: 79 out of 100

External links that open in a new window without the rel=”noopener” attribute present.

Images are much larger than they need to be. For example, the logo at the top of the page is a 1,775 x 433 pixel png, but displayed at 271 x 66. Just running this single image through an optimizer such as ImageOptim would save 50% of the file size. Better yet, they could use an svg.

SEO: 92 out of 100

Links without descriptive text that simply say “Learn More”

Network

• HTTPS: yes
• 108 Requests
• 16.6 MB resources
• Largest asset is a nearly 2.3 MB png which has no transparency. A high quality jpg replacement would save so much of the user’s bandwidth. for the page background.

Platform

• WordPress, Aspire Pro (paid) theme.

Notes

So far this is the most sizable candidate website I’ve reviewed. Little effort has been made to optimize the images for a speedy download. Does Yang’s proposed universal basic income cover expensive mobile data plans?

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.

kirstengillibrand.com

Google Lighthouse

Performance: 79 out of 100

Time to interactive is 5.3 seconds. I believe this is due to a cookied donation modal check that runs before the rest of the page is rendered. The page is pretty heavy with images that could be optimized further.

Accessibility: 95 out of 100

• No contrast issues found with any text and tabbing via keyboard displays focus rings on interactive elements.
• User scaling is disabled. This prevents a user from zooming in on a page if they have difficulty reading text. Apple’s iOS and Safari no longer support this attribute anyways since it is considered harmful to a user, and it should be removed from the code.

Best Practices: 86 out of 100

Lots of external links that open in a new window without the rel=”noopener” attribute present.

SEO: 100 out of 100

No issues found.

Network

• HTTPS: yes
• 51 Requests
• 4.5 MB resources
• Largest asset is a 905 KB jpg used for the page background. That many

Platform

• WordPress, custom theme.

Notes

The theme has dropped support for older versions of Internet Explorer, removing the outdated lt-ie7, lt-ie8, etc. classes found in old versions of HTML5 bootstrap. I still see plenty of sites use this code but I would put good money on no one is browsing your site on those old browsers anymore.

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.

julianforthefuture.com

Google Lighthouse

Performance: 94 out of 100

Super nice! There are opportunities to use next-gen formats for the images and lazy load offscreen images and iframes until they are visible, but otherwise this is the best performance score I’ve seen to date.

Accessibility: 93 out of 100

• Several links on the page use generic “Read More” labels and could be more descriptive.
• The white text on the Castro blue background fails to meet the WCAG AA contrast ratio standard, but it is ever so close.
• Navigating via keyboard gives both :focus styles on interactive elements that match the :hover design, and a focus ring outline. Using both is very useful for visual wayfinding.

Best Practices: 93 out of 100

Just one warning for the use of an old jQuery version, commonly found in this type of WordPress install.

SEO: 100 out of 100

No issues found.

Network

• HTTPS: yes
• 20 Requests
• 974 KB resources
• Largest asset is a 190 KB jpg.

Platform

• WordPress, custom CFTF theme.

Notes

Quite a well developed site. Seeing any homepage that weighs in under a megabyte feels like seeing a unicorn these days. The little touches of motion design make the theme feel bespoke to the candidate. Noteworthy that this is one of the first homepages of a candidate that doesn’t immediately pop up an inaccessible modal asking for donations or your contact information.

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.

amyklobuchar.com

Google Lighthouse

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.
• Tabbing through the page reveals there are very subtle, if any, :focus styles on interactive elements.

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.
    -->

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.

peteforamerica.com

Google Lighthouse

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.