Coloured bars with text accessibility in design

300 million will see this sentence differently: accessibility in design

In many ways, the web is becoming increasingly accessibleAt last count, it was estimated that almost 60 percent of the global population were active internet usersMuch of that’s been driven by the smartphone, social media and other advances in technology that have opened up a world of digital content, communication and experiences to people everywhere. Today, the way we view and absorb content are continuously evolving and diversifying, faster than ever before. That brings new and exciting possibilities but also fresh challengesHow can we ensure everyone, including people with disabilities, can access, enjoy and benefit from all the content we create?  

Accessibility in design is a topic that’s never been more important to marketers and businesses. Let’s look at exactly why that is.

 

More colours, more challenges

For many peopledigital experiences are now more vivid than ever. With new screen technologieswider colour gamut and the introduction of web styling upgradesthe creative options available to designers and developers is as great as it has ever been. 

This means we can push the boundaries of what we thought was possible even further. As exciting as this can be  especially for brands who are looking to gain an edge in the digital space  it can come at a price for customers with a disability. For example, colour blindness affects an estimated 300 million people worldwide – almost as many people as there are in the USAOur design choices don’t just impact on aesthetics and the average user experience – they can be the difference between some users being able to read and interact with our content at all.

 

Standard accessibility guidelines  

In design, executions rest on visual strategies and rules to help guide people through content. So, if we're looking to encourage inclusive design, these executions should comply to certain standards to help people with colour blindness to navigate content. 

The best source for these standards is the World Wide Web Consortium (WC3). They produce a comprehensive overview of Web Content Accessibility Guidelines (WCAG) which cover a whole range of standards for people with different disabilities. They include guidelines to ensure that content covers their 4 areas of accessibility; perceivable, operableunderstandable and robust.  

 

Understanding the guidelines 

The WCAG is always being updated as accessibility regulations are redefined over time. In a digital world, there are three levels of compliance to be met: 

Level A (minimum compliance)  Necessary for all websites that require accessibility. The criteria are:

  • Navigable with a keyboard 
  • No keyboard traps
  • Non-text content alternatives
  • Video captions
  • Meaning is not conveyed through shape, size, colour etc. alone

 

Level AA (acceptable compliance)  The aim for most websitesStandards include: 

  • Colour contrast is at least 4.5:1
  • Alt text or a similar solution used for images that convey meaning
  • Navigation elements are consistent throughout the site
  • Form fields have accurate labels
  • Status updates can be conveyed through a screen reader
  • Headings are used in logical order

 

Level AAA (optimal compliance)  Ensures that websites are accessible to everyone. Some of the guidelines: 

  • Sign language interpretation for audio or video content is available
  • Colour contrast is at least 7:1 in most instances
  • Timing is not an essential part of any activity
  • Context-sensitive help is available

 

Accessibility in action 

Achieving Level AAA compliance can be tricky and is often a requirement for sites that have commitments for everyday services and important engagements, such as banking or government areas which provide essential access for everyone. A good example of a site that's been designed with accessibility in mind is the UK government’s GOV.UKIn their own words: 

The GOV.UK Design System team wants as many people as possible to be able to use this website. For example, that means you should be able to: 

  • Change colours, contrast levels and fonts
  • Zoom in up to 300% without the text spilling off the screen
  • Navigate most of the website using just a keyboard
  • Navigate most of the website using speech recognition software
  • Listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and VoiceOver)’

Furthermore, they state that ‘the team has also made the website text as simple as possible to understand. As any copywriter will tell you, that’s not only important for accessibility but a general principle for any content you create.  

 

Our own experiences

At Fifty Five and Five, we've encountered the challenges of accessibility first-handFor instance, during work on a recent project, we discovered that client suffers from a type of colour blindness. This made the accessibility of our designs a significant talking point While exploring initial concepts, some key discussions revolved around colour and contrast of the content, and these were crucial in making sure our solution was accessible. When we discuss colour in particular, we have to accept that colour will appear different from person to person, and the thing that helps people distinguish content is the contrast between the colours chosen.  

What do I mean by that? Let’s look at some examples of how colour can be used in different ways.

 

The difference colour choices can make 

We’ll look at some calls-to-action (CTAs) – which manifest in web pages as ‘buttons’ to be clicked by the user, taking them into different areas of the site, launching contact forms, and so on.  

Accessibility CTA colours

Although this CTA example may look fine if you aren’t affected by colour blindness, the colours here do not meet accessibility guidelines. That’s because the blue used within the button does not pass AA-level compliance for graphical objects against white backgrounds. Th same also applies for the white text on the blue button.

Accessibility CTA colours

This example is an improvement on the first, as the dark blue text now has enough contrast to meet readability guidelines. But, as a whole, the CTA is still not visible on white, so would still be hard to distinguish as a CTA and would still fail AA and AAA compliance for graphical objects

Accessibility CTA colours

This execution is a good example of accessibility compliance. Each colour now has enough contrast against the background it sits on and passes AA and AAA compliance. Although there are other rules around CTAs such as hover stateswe must make sure that our static version is visually available as these are the primary drivers for navigation. This is a great example of perceivability versus readability. The first CTA option would be perceived as easier to read and packs more of a punch using a brighter colour. Whereas the last CTA option is a good example of great readability as it passes accessibility compliance fully.  

 

Always striving for accessibility in design

As our professional and personal lives become increasingly reliant on a digital worldaccessibility will only become more important to people and businesses all over the world. That’s why agencies like Fifty Five and Five – and designers like me  are evermore focused on creating holistic solutions by achieving the kinds of standards I’ve detailed here. Not every business should tune everything to AAA compliance overnight, but even small steps like colour contrast changes are a way of showing we’re starting to bring a focus to an often forgotten part of design.  Keeping all this in mindupholding accessibility standards and best practice can help guide us to a more inclusive digital world.


Smartsites A microsite with a unique look and feel

bluesource is a multi-award-winning, globally trusted IT consultancy on a mission to remove IT complexity and help organisations across every industry leverage the best technologies and drive innovation.

Standing out in a crowded market

bluesource were looking for help to create a microsite to promote its workplace intranet solution, SmartSites. For bluesource, SmartSites represented something completely different to any of its other offerings. They wanted something unique in terms of look and feel. Therefore, the SmartSites microsite had to have its own identity and brand, but also it needed to stand out in what is a competitive market.

bluesource sought us out for the project because we had worked together before. They knew our competencies and were confident they were in safe hands.

How the process worked

At the outset of the project, we began by sitting down with the bluesource team and assessing how best to market the new product. From these initial duscussions we developed the SmartSites site map, which outlined what pages would be needed and how they would connect to provide a seamless user experience. This was followed by the design concept to determine the look and feel of the site.

When this was complete and signed off by bluesource, our Web Design and Build team built the site, creating it in WordPress so that bluesource would have full control of the site after it had gone live. With WordPress, bluesource have the ability to update the site when they need to. On top of this, we provide ongoing support and technical maintenance on request. Finally, we wrote the copy for the site, applying messaging that had been developed from bluesource’s pre-existing literature.


prosymmetry case study

ProSymmetry A sleek and modern website for a leading ISV.

A cool vendor for 2016

ProSymmetry are the people behind Tempus Resource, a resource management tool that helps Project Managers model their project data. Identified as a ‘Cool Vendor’ by analyst Gartner, ProSymmetry enables companies of any size to make data-driven resource decisions.

prosymmetry case study

Web, social campaigns and content

We began working with ProSymmetry to modernise their website, and our relationship has developed to the point that we provide them with the ‘full works’ of our digital marketing offering. Since we upgraded their website, we now maintain it and keep it fresh with regular blogging and SEO management. We also help them tell their story with high value content in the form of whitepapers and eBooks, along with lead nurturing email and social campaigns. Our monthly reports and site performance analysis mean they can see the impact of the work we're doing.

ProSymmetry target the niche field of Resource Management, so they needed an agency that can understand the complexities of this specialism, and produce content that feels authoritative and relevant for a very specific audience. We know how to speak to that audience in a way that engages them and our marketing has helped grow traffic to ProSymmetry's website and the number of leads acquired through their digital channels.

[edsanimate_start entry_animation_type= "tada" entry_delay= "0" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "scroll" scroll_offset= "100" custom_css_class= ""]

Interested in learning more?

[mks_button size="large" title="Get in touch" style="squared" url="https://www.fiftyfiveandfive.com/contact-us/" target="_self" bg_color="#ffffff" txt_color="#20a1d6" icon="" icon_type="" nofollow="0"]

[edsanimate_end]


Ravenswood Technology Group case study

Ravenswood Technology Group A new website worth shouting about.

Ravenswood Technology Group are experts when it comes to building secure, hybrid infrastructures for their customers, so their users can work from anywhere. They customise Microsoft’s security, identity and Active Directory products to fit around client organisations. So, it was natural that they wanted to broadcast their services from a fitting platform.

A digital facelift

Ravenswood initially contacted Fifty Five and Five to design and build their new website. Their previous presence on the web had grown a little outdated and they needed a fresh look and a more strategic approach. Our first job was to gather all their requirements, while finding out about their organisation and brand vision.

 

Ravenswood Technology Group case study

Putting their brand front and centre

Ravenswood required an engaging and visually appealing overview of the services they provide and a more engaging digital home that potential customers could navigate with ease. We spent time in meetings with them planning the sitemap, we constructed a web branding guide for their future internal use and executed the full build of the new site.

[edsanimate_start entry_animation_type= "tada" entry_delay= "0" entry_duration= "0.5" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "scroll" scroll_offset= "100" custom_css_class= ""]

Interested in learning more?

[mks_button size="large" title="Get in touch" style="squared" url="https://www.fiftyfiveandfive.com/contact-us/" target="_self" bg_color="#ffffff" txt_color="#20a1d6" icon="" icon_type="" nofollow="0"]

[edsanimate_end]