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.