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.
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.
WordPress, custom theme
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!
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.
Button tap targets for touch screen devices are not sized large enough to be usable.
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.
WordPress, custom theme.
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!
Webp images are used in many places which shows at least some thought was given to overall performance but there is still much that could be improved.
Warren is becoming famous for the campaign line “I have a plan for that!”, and I hope her team has a plan to fix these issues. Not so secretly, I’d like to help.
Accessibility: 80 out of 100
Skip to Content link is present (great!) UPDATE 6-26-2019: Oh no, it’s gone!
Main nav is hidden behind hamburger menu icon, with no visible focus state. (Boooo!)
Very disappointing that every interactive element save for one is revealed through hover alone. Wayfinding by tabbing is pretty difficult.
Best Practices: 71 out of 100
Loading of offscreen images should be deferred until they are visible.
Scrolling performance is sluggish due to the scrolling event listener used by the AB Tasty plugin to measure how much the page has been viewed. These event listeners should be passive.
SEO: 92 out of 100
One link on the page for /meet-elizabeth uses a generic “Learn More” label. This is a poor practice for accessibility as well.
5.1 MB resources
Largest asset app.bundle.css at 360 KB. That’s a LOT of CSS. After an inspection I believe the large size is due to including the Font Awesome icon fonts as data URIs. Essentially this is including the entire font in a file that blocks page rendering until it has fully downloaded. Breaking them out would improve her site’s performance.
7.9 MB resources
Largest asset is the hero video at 1.9 MB. It appears the dev team is now serving page specific CSS with a technique known as tree shaking. The homepage CSS bundle is down to only 35 KB.
WordPress, custom theme
UPDATE 6-26-2019: second review the site has moved to be a client side React app. No clue what is powering the back-end, there are no tell-tale WordPress signs.
First load of the site has an inaccessible donate form, with the Continue to elizabethwarren.com link an anchor tag with no href. Come on! 😩
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">
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.