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 in design 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.


Blog image - The 4 pillars of a quality website: examples from the experts

The 4 pillars of a quality website: examples from the experts

Your website is a shop window to your business and a cornerstone of your marketing strategy. In our article, we are going to tell you what we think makes up a great quality website. And we’ve cobbled together examples from some of the leading B2B technology organisations to show you examples of a quality website in action.   

These organisations are leading Microsoft partners who are successfully putting the qualities of a great website build into actionWe’ve taken these examples from our Top 50 Microsoft Partners website, which ranks partners on the quality of their inbound marketing strategies.  

So, if you’re currently designing or building your website, and could do with some advice or inspiration, this is a good place to start.  


Pillar 1: Functionality and purpose

When we talk about the functionality of a website, we mean the functions that allow a visitor to achieve what you want or intend them to achieve. Whether it’s to buy a product or request a demo, you need a website that allows your audience to complete a journey and respond to your call of action. So, make sure to include a form if you want your visitor to submit information. There should be simple and clear navigation, intuitive enough to allow your visitor to find their way around and consume the information you’ve created for them. 

Nintex 

Nintex, a global leader in business process automation, provide a good example of a website with strong functionality. As we mentioned above, it’s important for a website to be easy to navigate, contain quality content and include clear calls to action. And Nintex ticks all these boxesThe layout of the site is well executed considering the volume of solutions and content that they want to showcase. 

 

 

Along with good practical functionality (and a clear purpose)its also important to convey who you are and what you value as a company. 

One of the key takeaways from Nintex’s website, that I particularly like, is their positioning of people across the siteIt’s important that your brand echoes or compliments your product or service. For Nintex, who operate in the world of process automation (and the potential negative headlines of automation replacing people), it’s vital that they put people at the centre of their site. This idea of combining the practical elements of website build with branding and ethos, can be a tricky balancing act – but Nintex pull it off very well.  

 

Pillar 2: A clear user journey

There’s more to a website than a homepage. The mark of great design and the right build is the user journey that the visitor is taken on. As we mentioned when discussing functionality, clear navigation is key to this journey. You want your visitors to understand what you are offering. By making it easy to access the various areas of the site, you improve the user journey, keep visitors on the site longer and provide them with the expertise they are looking for. 

Veeam 

It is clear from the outset that Veeam are a collective of IT experts who are speaking to a specific audience (namely, IT professionals). They have a clear user journey laid out that begins with ‘how to’ video content, ends with a ‘buy’ call to action and contains a free trial and expert support along the way. That’s about as straight forward a buying journey should be, and Veeam do it well.

 

 

The other take away from this website is the clear sense of Veeam’s expertiseExtensive, detailed and valuable content is packed into this website and speaks to a specific audience, and in turn, leads them on the right journey.

 

Pillar 3: Quality content

Content is the key to any great marketing campaign  and it should be central to your website. When content is effectively, we should see succinct and concise language that avoids relying on technical or business jargon. The best content is clear and to the point and tells the reader something, whether that be marketing advicea ‘how to’ guide or thought leadership. 

ShareGate 

ShareGate pride themselves on making the Microsoft Cloud easier to use for organisations of all sizes. This focus is reflected in their website—in the look and feel, language and navigation. ShareGate are clear about what they do and why their customers choose them.

 

 

This simple and helpful ethos is consistent across their design, and is also consistent across their blog and social media profiles. Their content is always helpful, articulated in a clear and colourful manner.  

 

Pillar 4: Consistent brand and design

Your website needs to be visually appealing if you want to engage your audience. That means your designers need to think about the right colours, the visual structure of the site and how it all works together to produce branding that defines and sets your business apart. The language you use should fit your audience. If your visitors are IT developers, you can use more technical language. If they are business leaders, you should focus on the business benefits of your product or service. And remember, consistency across your site is essential.  

LiveTiles

Getting your tone of voice ‘right’ can be tricky. It takes is a clear understanding of your audience and their needs. The LiveTile tone of voice is spot on, right from the first words on their website to the latest blog they’ve posted on social media. It's a combination that shows these guys aren’t messing around. Clear, consistent and full of value, their website is a great example of how effective branding can differentiate you from your competitors. 

 


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]