There are a number of CSS files and jQuery javascript plugins that are blocking the initial render until they are all downloaded. Bundling these together and removing unused code could improve this score.
Accessibility: 90 out of 100
Default browser focus outlines appear for all buttons and links, tab order is logical.
This is bad HTML:
<a href="https://shop.corybooker.com/" rel="noopener">
<button class="booker-button booker-button__shop">
Gear up
</button>
</a>
Video play buttons aren’t labeled.
Best Practices: 86 out of 100
There is a vulnerability in the jQuery library used, jQuery@1.12.4. This is a common problem found in the WordPress platform. Updating the theme to use a more modern version, or hey no jQuery at all, would be an improvement.
SEO: 82 out of 100
The site is getting dinged in the SEO score for not having a meta description, yet I see it in the source. It may be that this is being rendered client-side.
That’s really good for a site like this. The biggest knock against it performance wise is the 4.1 seconds time to interactive. This is a measure of how long it takes for a site to load and a user able to interact with it, for example clicking on a button to donate. Faster is better.
Accessibility: 96 out of 100
Default browser focus outlines appear for all buttons and links. There is a missed opportunity to to style them to coordinate with the hover states.
The image carousel is keyboard accessible.
The popup modal to join the campaign appears to be inaccessible and can’t be filled out without a mouse. However it does close with the ESC key.
Form fields are missing labels.
No contrast issues with any of text were found!
Best Practices: 86 out of 100
In most cases the images on the page are jpgs and could be converted to more optimized formats such as webp.
SEO: 100 out of 100
Funny that this site scores a 100/100 but up until a few weeks ago https://joebiden.info/ was appearing at the top of search results and the .com was nowhere to be found.
Network
HTTPS: yes
58 Requests
3.9 MB resources
Largest asset is an image contained in a carousel, a 214 KB jpg
Platform
WordPress, BEXC theme. I can’t find if this is an off the shelf theme or a custom one with an inexplicable name.
Notes
All in all a very well-performing site, if a bit generic.
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.
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.
Tooltips. You would think these were the hardest problem in web design based on the number of javascript-dependent solutions put out there. Look at a library like html5tooltips.js, do we really need to add 637 lines of javascript to provide a little supplemental info in our interfaces?
Here’s a quick demo that demonstrates a simple, more accessible, approach.
