Style and substance: two (accessible) websites which have it all

My last blog for Econsultancy aimed to dispel the myth that accessible websites must compromise on aesthetics.

It elicited quite a response with many readers agreeing and a number asking for examples of sites that combine both elements.

Before I point you in the direction of two websites that are both highly accessible and attractively designed, it's important to remember that beauty is in the eye of the beholder.

Furthermore, the aesthetics is the result of the final product. When broken down into its components the beauty is difficult to see. It's only when those parts all come together that the beauty is evident.

As a result, when it comes to the aesthetics of a website, every different component must be considered in great detail from the outset of the project to make sure the end result meets the needs, wants and expectations of the site's users.

To make sure each component is designed in the most effective way, thought needs to be given to how all people, no matter what their accessibility requirements are, will use each part of the website.

This is a far more in-depth process than requirements-gathering, it's thinking about the experience people want and expect, the different situations for use, what technology is used, the content that is needed and how it will be consumed.

By thinking about people's behaviour and why they will use a website; how they will move through the digital space, a series of checks can be put in place throughout the design and build stages to ensure every need and expectation is catered for (or at least considered). 

Far too often accessibility checks are not put into place at the start of the project and this fundamentally undermines the quality of the experience that will be delivered.

A result of such a flawed approach is that changes are made on designs which have already been completed, which are both expensive and time consuming.

In the worst case scenario, such changes are not made at all due to time and budget limitations, meaning that the final website doesn't meet the needs or expectations of its users. It is lacking in quality.

By getting the design right at the outset, time and financial requirements can be appropriately planned. This will ensure the site is designed so that many more people can access it from a broader spectrum of devices, and therefore will enjoy a better online experience. 

Accessibility represents a fundamental commitment to delivering a high quality online experience.

However, when it comes to determining the design for a website, accessibility needs are often neglected due to a fear that catering to these requirements will impact on the look of the site. In reality this is only the case if the components of the website are not thought about in the right way. The truth is that real accessibility is all about good design and therefore good experience.

It was the architect Louis Sullivan who stated that 'form follows function' and this is precisely the process that should be followed to make an accessible and aesthetically pleasing website.

On first glance a website can be rated highly because of its style, its 'look', but if it doesn't have the substance to prove itself through its function then how a person perceives and therefore rates that site will fall dramatically.

A good looking website therefore must have all its components – from function through to form, carefully planned and created.

There are two prime examples of websites which truly meet the criteria of being accessible to all without scrimping on design.

Gov.uk

• A website which in April this year was won the  Design of the Year award, described by Design Museum director Deyan Sudjic as "the Paul Smith of websites. It makes life better for millions of people".
• Careful consideration has been given to the layout, size and contrast colour of the font.
• A clean site with a 'flat' design in-keeping with the principles of Metro design and therefore being en vogue for current web design and user interface design practice.
• There is visible focus when tabbing through the links on the page using the keyboard and this includes the search box.
• Furthermore, when tabbing, you go through links in the correct order (particularly noticeable with the columns in the footer, "Services and information", and "Departments and policy") a subtle, yet powerful illustration of best-in-class design practice.
• The site also hosts a set of design principles allowing other site owners to utilise best-practice in theirs sites and is a very real commitment about quality and getting things right.

Figure 1: Header in the web page and the underlying code

The header in Figure one above provides very good contrast so the text is very easy to read. The code behind the header is nested and it represents another demonstration of Gov.uk's team commitment to deliver a high quality web experience with accessibility being a key component. 

The quality of the code is a 'tell' about the quality of the site.  Would you expect a Michelin star restaurant to have a dirty kitchen? What would you think of a restaurant with a dirty kitchen? 

The website code underlying a site is very much the same: good sites tend to have good code.

Figure 2: A section of the GOV.UK showing how various sections of the site have been compartmentalised

The Black and Blue lines in Figure 2 provide a natural and easy break and therefore mark a change in content. This is a great feature that makes it easier to scan sections quicker, whilst not being detrimental to the overall aesthetic.

Sky Accessibility

• This site is highly accessible and has been designed to be used by a mainly disabled audience, however it looks like a normal website and is in-keeping with the branding in Sky's portfolio of websites.
• The site was tested at many various points through the design and build stages to ensure it was highly accessible and would work consistently across a range of devices and in multiple situations.
• The site has an advanced style switcher which allows the user to very easily change the colour or size of the font without compromising its layout and therefore its visual identity (branding).
• The site, like GOV.UK, provides visible focus when tabbing through page using the keyboard – and the focus provides high contrast with the text.
• There is a clear visible hierarchy (e.g. on http://accessibility.sky.com/online-help/changing-colours-and-fonts) that makes it easy to see how content is related.

Figure 3: Sky accessibility website header and code example

Just as the GOV.UK site has well nested and clean code that is easy to read so does the Sky site and as previously mentioned this is a clear reflection of the site's overall quality in terms of user experience and therefore accessibility.

Figure 4: Shows how sections of the Sky page are broken up

Again, just as the GOV.UK site, the Sky accessibility website has pages which are compartmentalised, which makes them easy to scan and read. You will notice a very subtle grey band across the page.

To many people this looks like a design feature, but to the visually-impaired this provides an easy way of being able to distinguish when one section ends and another begins. This is a fantastic example of an aesthetic feature that also provides great accessibility.

In this article, I wanted to show you two sites with specific focus on a couple of the features that demonstrate a commitment to deliver a high quality and accessible user experience. 

It is important when considering accessibility to appreciate we are talking about code and the quality of code is a massive reflection of the quality of experience offered.

When a developer sees a well nested and clean code, they say, 'that is beautiful' because not only is beauty in the eye [brain] of the beholder, in terms of accessibility it is also in the code.