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.


bluesource case study

bluesource A services brochure that is as engaging as it is informative.

bluesource are a globally trusted business IT consultancy whose main objective is to help customers unlock their potential through technology; maximising business productivity via digital transformation and cloud computing.

Business services brochure design

bluesource’s list of services are numerous and varied. They required an engaging and visually appealing overview of the services they provide—something that could be given to prospective customers at a conference and as a downloadable piece of marketing for their brand explaining in detail the value they create. Before working with us, bluesource were struggling to unify the story of their brand in a simple and coherent way.

Telling an appealing story

To help bluesource broadcast their message to a wide range of potential clients we put together a high-end, A5 folding brochure that elegantly compiled all the business-critical services they provide. We worked closely with the relevant stakeholders to understand bluesource’s vision. This allowed us to produce content and design that brought together their numerous services into a single, engaging narrative.

[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]


harmon.ie case study

harmon.ie Providing a range of marketing services.

Masters of email productivity

Over 1.5 million licensed enterprise users from thousands of companies count on harmon.ie to increase their adoption and return on investments in SharePoint, Office 365 and other Microsoft collaboration products. Whether it’s Email Management, Records Management or Knowledge Retention, harmon.ie are determined to make email – perhaps the most instrumental part of our working lives – all about the user.

Expertise across Office 365 and SharePoint products

We work regularly with harmon.ie to provide a range of original content. Well received both internally and externally, this content is used as part of the company’s marketing campaigns and strategies. The overall aim of our work is to further develop harmon.ie’s reputation as SharePoint and Microsoft experts.

Our writers at Fifty Five and Five are experts in Microsoft products, so we are able to write with real authority about topics that others find difficult to communicate. We are extremely well-versed in subjects like SharePoint, Outlook and Office 365, something harmon.ie appreciated as they required a deep understanding of the subject matter to communicate to their audiences.

We help harmon.ie in a numbers of areas:

  • Blog content
  • Social media engagement
  • Campaign planning
  • eBooks
  • Reports

A breadth of work

Focusing on content creation, Fifty Five and Five have worked closely with harmon.ie to ensure we are consistently expressing their business solutions in an accurate and appealing manner. Remaining up to date on the latest product changes and enhancements, we see content through from generation to SEO and social sharing.

harmon.ie case study

[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]


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]


Consort.it case study

Consort.it Design, content and print services.

Consort.it are a consortium of likeminded IT businesses based in the UK that share resources and expertise to enhance the services they can provide their customers. They are a collection of the leading professional IT service providers in their region; their objective is to be considered thought leaders in their industry while helping their customers advance their businesses via digital transformation.

A quarterly thought leadership magazine

Business Talk is a business quarterly offering thought leadership and important insights into current and future business trends produced by Consort.it. While the magazine had proved a useful marketing tool, each member company in the Consort.it group wanted to offer more in-depth information to their audience with an updated design, with each company able to publish their own unique version of each issue. They entrusted Fifty Five and Five to help them do so.

At Fifty Five and Five, we set about the project by developing a wireframe design of the magazine, coupled with a specific theme for each quarter (topics have included distance working, data analytics and data protection). Each issue contains several original, researched-based articles along with fully designed infographics and other design visuals.

In addition to the editorial theme, each member of Consort.it receives their own customised version of the magazine which includes an interview with one of their team members and a design which matches their individual company branding.

The content is then printed and shipped to customers and clients of each Consort.it member.

Consort.it case study

Reaching a wider audience

The makeup of Consort.it means that their marketing targets are varied and any material must be customised for each member of the consortium. Each edition needed to contain an individual message that spoke to that company’s customers while also aligning with the overall message of the group. The refresh and updating of Business Talk has driven leads to the Consort members via both traditional and digital channels and proved a valuable way of starting conversations with potential customers.

[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]


CPS case study

CPS A cutting-edge web presence for a leading partner.

A leading Microsoft Gold Partner

Founded in 1995, CPS pride themselves on using integrated, joined-up solutions to help businesses the world over, earning them a coveted Microsoft Partner of the Year Award for 2016. As one of the leading Microsoft Partners, they know that an attractive and user-friendly website is of the utmost importance… yet it remained an area of need. A modern website overhaul – involving re-design, content and SEO – provided CPS with a slick and unified home for their services to mirror the core values of the company.

CPS case study

Design, build, content & SEO

CPS asked us to help them revamp their web presence to better reflect their updated brand. A modern overhaul met the company’s desire for a more content-focused approach to marketing: with revamped landing pages, interactivity, blogs and social sharing. As well as handling the design, information architecture and build work, we also provided CPS with fresh content to fill these new pages. Furthermore, we optimised all content for specific SEO keywords to enhance the visibility of the CPS website.

[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]


Rencore Case Study

Rencore In depth content, SEO and marketing services.

Putting clarity at the core

Aiming to bring transparency to the SharePoint and Office 365 development process, Rencore’s dedication to optimising Microsoft’s two biggest platforms is reflected in their name. Stemming from the Swedish word “ren” – standing for clarity and clearness – and the English “core”, Rencore is home to internationally recognised developers, Microsoft MVPs and MCMs.

Rencore Case Study

Content and SEO

We work with Rencore on their website and blog SEO requirements, deploying a wide range of techniques focused on pushing great content up search engine rankings. The results speak for themselves, and we have been able to get Rencore’s website and blog articles ranking highly on Google for targeted keywords.

We employ classic SEO techniques, such as optimising content for keywords, using titles and images appropriately and ensuring content style, length and language meet optimal search engine requirements. We also help to push content towards community influencers, using social networks and relationship building techniques to promote the organic sharing of content.

[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]


Program Framework case study

Program Framework Intelligent copy alongside a modern website.

A PPM process and solutions leader

A specialist PPM consultancy and Microsoft gold partner, Program Framework offers a mixture of consultancy and technology services covering project and portfolio management and transformational change. Specialising in Microsoft Project Online, Project Server, Office 365 and SharePoint, they are extremely well equipped to provide companies with pragmatic and comprehensive project management.

Program Framework case study

From information architecture to readable copy and SEO

We began our relationship with Program Framework by developing a new information architecture and sitemap for their website. We then went on to develop suitable copy for the rest of the site, making tweaks to evolve the SEO quality of the site.

Not only did we work closely with Program Framework's marketing team, but we also collaborated with their external graphic design agency. We ensured page templates worked with the new look and feel and that our copy flowed correctly. Program Framework now benefit from a modern and engaging website. Pages successfully communicate technical subjects in a clear manner and are easy to navigate and explore.

[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]