Right now, the most powerful nation on earth is voting for which human will rule over them.

These campaigns run to millions of dollars, with thousands of volunteers and massive media coverage.

So what are their websites like?

As a QA tester for Zengenti, I wanted to see how these sites performed under our accessibility, validation, and overall design tests. I have broken down the major elements in which each page both exceed and – more interestingly – fail.

For readability, I have summarised each point and then gone deeper into each item and its significance further below.

Note: This is a purely an exercise in validation and accessibility. Please don’t take this as a judgement on the candidates themselves.

Top two Republicans vs top two Democrats

Bernie Sanders

Bernie Sanders - Screen Shot

Pros

  • Really helpful and personalised 404 page
  • Colourful yet clear text – looks good even in grayscale
  • Looks good at all screen sizes, thanks to nicely flowing elements
  • No validation or console errors
  • Videos have captions enabled by default (nice one)

Cons

  • This is minor gripe, but there's no app icon
  • Viewport mobile zooming is disabled – shame
  • Video captions use Google’s auto caption generator – which is iffy, at best

Hillary Clinton

Hillary Clinton - Screen Shot

Pros

  • Clearly a mobile-first design, giving the site more structure
  • App icon – whoop, someone who cares for detail
  • Viewport mobile zooming is allowed on mobile devices

Cons

  • ‘Continue Reading’ links on the home page both don’t pass colour contrast and don’t pass Link Purpose
  • All the links in the footer also fail contrast ratio (which makes me a sad panda)
  • There are a couple of duplicate and blank id’s, which fail HTML validation
  • A number of CSS parse errors also fail CSS validation

Ted Cruz

Ted Cruz - Screen Shot

Pros

  • App icon – well played sir
  • Viewport mobile zooming is allowed on mobile devices

Cons

  • Terrible carousel: laggy and difficult to navigate – good luck navigating without a mouse
  • Images lack alt tags
  • Outline disabled – *boooo* *hiss*
  • Strange title structure
  • HTML validation fails: 
    • Duplicate title tags
    • Multiple meta character encoding tags (should only have the one)
  • CSS validation fails: 
    • Large number of parse errors
    • Large number of broken (404) links including ‘Terms of Use’ in the main footer
  • Browser Console has 2 errors
  • Colour contrast fail on elements ‘.photo .date’ and ‘.footer_social_links>a’ links

Donald Trump

Donald Trump - Screen Shot

Pros

tumbleweed

(tumbleweed not Donald Trump's hair)

Cons

  • 404 page is very boring
  • HTML validation fails:
    • Missing lang attribute
    • Large number of avoidable validation warnings due to outdated code
  • Number of avoidable CSS parse errors also fail validation (a couple due to incorrect spelling of lighten)
  • No app icon – minor issue, but whilst I’m complaining, I may as well note it
  • No outline (sorry keyboard users)
  • Viewport mobile zooming is disabled
  • Videos on homepage do not include captions by default
  • Structure of site skips around from H1 to H3 with no H2 included on home page
  • Newsletter buttons break when screen narrowed to 904 px

Bug: menu disappears when performing the following:

  1. Reduce screen width till mobile burger icon appears (879 px and below)
  2. Open & close menu
  3. Resize screen to desktop size
    1. Menu has disappeared

All sites have

  • HTTPS encryption: there's a whole host of reasons for HTTPS. One reason is Google ranks you higher, but the major reason is it secures yourself and your visitors, keeping your session private.
  • Responsive design: means that every device should be able to easily visit and navigate a site.
  • Custom 404 pages (some better than others): a good custom 404 page will help people find the information they're looking for, as well as providing other helpful content and encouraging them to explore your site further.

Not so good

  • Image galleries have poor or no alt attributes

Testing

  • Ignoring most Warnings and sticking with major errors / issues
  • Warnings are likely related to compatibility with older browsers
  • Accessibility level WCAG AA

What does it matter if...?

Validation doesn’t pass

There are many reasons, but the most major ones are: 

  • Your site will be mostly future proofed  ( and Google will easily index and rank them higher)
  • It’s a mark of professionalism

They don't have video captions

By not having video captions, they’re ignoring two large audiences: those with hearing loss and those with sight impairments.

They have an app icon or not

App icons aren’t just used for mobile device home screens. Increasingly, they are used for large bookmarks such as Safari’s ‘Favorites’ page. It helps a site stand out in a user's bookmarks.

Viewport mobile zooming is disabled (pinch zoom)

When there is a link that’s just too small to press or an interesting image to look at, it is hindering users. Those who want to actually use their mobile browsers will be limited by a single choice – ‘user-scalable=no’.

Images don’t have ALT descriptions

Just like captions, they are preventing those who can’t see from understanding what story they’re trying to tell.

Also, Google likes indexing images which have been described to it.

Colours aren’t the correct contrast ratio

If the text is too much like its background colour, it is difficult to read.

So, a couple of smart cookies got together and created the Web Content Accessibility Guidelines ‘WCAG’. In these guidelines is a set colour ratio (4.5:1) for text and its background colour. This means that even if a person can only see black and white, they can still fully understand all text on a page.

Outline is disabled

There’s a whole website on why not to disable Outline. It summarises the major reasons in this quote:

“It provides visual feedback for links that have 'focus' when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline, you are making your site inaccessible for these people.”

The page structure is a little askew

Navigating a maze isn’t easy, so why would you create one for people who are trying to read complicated political mumbo jumbo? A simple layout is easy to scroll through, and also easy for bots like Google to index.

Summary

So, in terms of web design, I lean towards the Democrats apparently. It definitely feels like they care more for accessibility, with small details like nicely customised 404 pages and well laid out structures.

Site structure sounds simple, but when creating a fancy looking site it can end up like a messy spaghetti. My personal favorite site for structure is Mr Bernie Sanders’ site, which even looks good without any CSS or JavaScript.

Democrats are the winners for this test!

Bernie Sanders, overall winner (again: for this test)!

Here, have a cyber high five Mr Bernie Sanders. 

Subscribe to our stories 

Sam Clifford

About the Author

Sam is a quality-assurance tester here at Zengenti. He works closely with our professional-services teams to maintain the quality of our code, designs and builds. His background is in .NET software testing, and he uses WCAG and W3C standards, and appropriate browsers to test against.

Follow Sam

More stories from Zengenti