Case study

Delivering Creative Work to an Accessible Audience

Accessible Design is about removing barriers to content. When designing something with accessibility in mind, you're looking to create content that can be enjoyed by anyone, no matter their condition. This is fantastic for inclusivity, but there's also a strong business case for accessibility. Naturally, the fewer barriers to entry placed on access to your content will lead to a greater potential reach. For design in print media there are many elements that go into creating something accessible. Everything about the appearance on the page has to reach accessibility standards, from colour contrast to spacing of text content, paper type and careful use of images.

Where the positive effects of accessible design are most pronounced however is online. Best practices for accessibility in web design overlap very strongly with other important factors that affect usability & reach. These include design for compatibility across devices (PC, Mac, Tablet, Mobile...), UX, & SEO. For SEO purposes optimisation for screen readers for example is highly beneficial. Webmasters of accessible websites will have to ensure that their pages have clear, descriptive page content, as well as title tags & alt text for every image - all of which provide a boost in search engine ratings.

For businesses looking to improve the accessibility of their content, we can provide an accessibility validation service for PDFs, whether we’re creating them from scratch or reviewing documents you’ve already made.

Below I’m going to talk about some of the unique challenges we face when designing accessible content, and how we adapt our processes to produce work that’s accessible but still of the high design quality we’re known for.

When producing a text document with a focus on accessibility, there are a few key points to keep in mind. The “narrative” of the text should be logically structured for the reader to follow. Visually, the text must be presented on the page in a way that makes reading it easy. For “left-to-right” languages such as English, the text should be aligned on the left, leaving enough space for margins either side so that the page does not appear “cluttered”. Document size is also an important consideration, for example something that is written as 16 pages of A5 normally, in order to retain the integrity of the design if it was converted into a more accessible format we may choose to make it 16 pages of A4. That way, neither element (design quality nor accessibility) is sacrificed. For a print document it’s also important not to use inappropriate paper for accessible content. E.g. if it is so thin that text on the reverse of the page “comes through”, as this can have a significant effect on legibility.

Choice of font is a vital part of the accessibility of text. In general, it’s better to use San Serif fonts such as Helvetica over Serif fonts such as Times New Roman, as they are much more simple and legible. Your brand guidelines may not have considered accessible design, we can guide you to ensure your literature retains your brand values but is also validated as accessible.

Adjusting spacing within the text is also important. Extra spacing between letters, words and lines has a big impact on the reader. For accessibility reasons all body text should be size 12pt minimum.

One should also minimise use of italics as this affects legibility. Typing in all capitals also makes it difficult for some readers to distinguish between letters as they’re all the same height.

When creating an accessible website, every single element should be made compatible for users who use a screen reader. Proper page structure such as Page Titles & Heading tags (h1, h2…) will allow users navigating your website with a screen reader to always know exactly where they are and what the page is about. Alt text and descriptions are important both for describing images that are onscreen to those that cannot see them and for any buttons or usable elements of your website. If there’s no description on a button for a screen reader to read out, the user will not know to navigate & may find themselves in the wrong place.

More complex imagery or “visual” content such as tables or diagrams on your web page should be made as clear and legible as possible. For users that require a screen reader or are unable to see the image properly, a full, detailed text description of everything contained within the table or diagram should also be included.

For accessibility purposes it’s vital that text and imagery are kept clearly separate. If they’re too close, or even worse if text is placed over the image itself – legibility of the text content and a user’s ability to understand the image easily are both severely compromised. Clear division between both content elements allows users to easily follow the structure of your webpage or document and not miss any important information.

Use of colour is crucial to the accessibility of everything you create. Text should contrast strongly with its background to maximise legibility. Good colour contrast in images and diagrams also makes it much easier for users to see & understand. For colourblind users, monochromatic text makes content simple to read. One should also differentiate elements within text such as links with colour & underlining as this allows them to be quickly identified. Additional functional elements on your webpage such as buttons can contain more liberal use of colour to make them stand out and let users quickly identify them, but accessible controls allow the user to change the colour for their needs, which again needs to be considered at within the design phase.

Elements such as animations can make content less accessible and more difficult for users with a screen reader. A plain text alternative website can make a world of difference for these users. The key to this however is to retain ease of navigation for users & to ensure everything is rendered in clear, descriptive English. As with printed documents it’s also important to include adequate margins on your website to keep things clear and prevent there being too much on screen at once which could cause difficulty for some users.

Many of the more stylistic elements on a website such as dropdown menus or buttons add flair and make navigation easier for users. For accessibility purposes however, we must consider users that are unable to use a mouse, which is necessary to use most of these elements. Therefore, it’s important that navigation elements such as these are made usable with just a keyboard.

Accessibility of presentation and website navigation are not the only elements to consider. We also have to think about making the content itself as accessible as possible. All text should be written in plain English, using descriptive language (particularly where images or diagrams are involved) so that users face no barriers to understanding, and miss out on no key information if imagery is involved.

If your website contains any audio-based content such as videos or podcasts, ensure that these are properly sub-titled or transcribed as appropriate, so that all users can enjoy them.

Accessibility is a great thing, and it’s important to get it right – but it doesn’t mean we have to sacrifice quality or creative ideas.

Above is a great example of how we can take brand elements & deliver accessible content without sacrificing a brand identity. For the English Federation of Disability Sport (EFDS) we designed the logo for their Get Out and Get Active initiative, as well as collateral documents that were distributed to its partners across the country. As you can see, we utilised our knowledge of the principles of accessible design to create the logo, but it’s still visually very appealing. Large, bold letters combined with contrasting colours form an image that’s very distinct and looks great.

 

Here are a couple more examples of work we’ve created with accessibility at the forefront.

We produced a report that was commissioned by six of the nation’s biggest Disability Sports organisations. Their research had shown that more needed to be done to engage young people with disabilities to encourage them to be more active and embrace physical activity. We brought this project to life combining separately commissioned illustrations with a layout that was completely accessible. We used easily readable fonts, a carefully planned colour palette and a PDF formatting designed with screen readers in mind to form a document that was visually appealing and accessible to all.

We created a presentation for Diversity Jobs to assist them showcasing their accessible jobs platform promoting inclusivity and diversity in the workplace. We developed a colour palette and combined legible typography with some hand drawn illustrations set off against a blackboard to create original branding that really stands out. This design was also produced with flexibility in mind allowing further literature to be easily developed in future.

We’re proud sponsors of the Recruitment Industry Disability Initiative (RIDI). They do important work supporting the disabled secure gainful employment. For RIDI we recently built a website that is fully-accessible and was validated by the DAC. We began by drawing up a comprehensive plan, considering accessibility requirements & establishing ground rules for every element of the website. With regards to design we chose a colour palette and typeface that emphasised visual clarity, with strong contrast. Another interesting feature is the ‘Recite.me’ toolbar. It’s a multidimensional tool that is capable of adapting a website to fit any accessibility requirement. Users can choose content colour, scale text content as needed and the website is fully compatible for use with a screen reader. We also created an Inclusion Calculator for organisations so that they can calculate a gap target for disabled employees in their workforce. All accessible and still looking great!

 

We’ve really enjoyed working with our partners in producing accessible creative content. It shows our adaptability as an agency to handle the most challenging tasks while retaining the top design standard we’re known for.