Balancing website design and accessibility

There is a common misconception that accessibility and beautiful design cannot coexist, many believe that adhering to accessibility guidelines means compromising on aesthetics. However, this perception is increasingly being challenged as designers and organisations recognise the importance of creating inclusive digital experiences. With Web Content Accessibility Guidelines 2.2 (WCAG 2.2) just having come into force, it is now mandated that all public sector organisations in the UK ensure their websites and applications are compliant.

In this blog, we look at how organisations can maintain their website accessibility and explore several accessibility issues that can arise in web design, drawing on real-world examples from GOSS clients who have successfully navigated these challenges. Through the experiences of the teams at City of Sunderland, Swansea Grand Theatre, and Invest Stockton-on-Tees, we'll illustrate how these websites have balanced website design and accessibility.

Accessibility issue 1 - The impact of colour contrast

Colour is a crucial element in web design that significantly impacts accessibility. For a website to comply with the Web Content Accessibility Guidelines (WCAG), there must be sufficient contrast between text and background colours, with a minimum colour contrast ratio of 4.5:1. Relying solely on colour to convey information can be problematic, particularly for users with colour blindness or low vision, as they may struggle to differentiate between colours.

When it comes to real-life examples of GOSS clients implementing colour accessibly on their websites, the teams responsible for the City of Sunderland and Swansea Grand Theatre websites came up against challenges in making sure their brand colours were accessible when applied to their websites. For instance, the branding guidelines for City of Sunderland included a vibrant red that, while visually striking, did not meet accessibility standards. Upon testing, the GOSS Creative Team discovered that this red colour had a contrast ratio of 3.97:1, which fell short of the required 4.5:1. Recognising the importance of maintaining brand identity while ensuring inclusivity, the team collaborated closely with the City of Sunderland team to explore alternative shades. They utilised advanced colour contrast tools to fine-tune the hue, ultimately arriving at a marginally darker red that not only enhanced readability but also retained the essence of the City of Sunderland brand.

In a similar scenario, the Swansea Grand Theatre faced its own set of challenges with its colourful branding, which featured bright shades of yellow, cyan, and magenta. The initial designs for their new website included these vibrant colours, but testing revealed that all these colours had contrast ratios below the minimum requirement of 4.5:1. Understanding the importance of an inclusive design, the GOSS Creative Team worked hand-in-hand with the Swansea Grand Theatre team to address these accessibility issues. They explored various adjustments, considering not just compliance but also the overall aesthetic appeal of the site. After several iterations, they identified accessible shades that harmonised with the theatre's branding without sacrificing visual impact. As a result, the Swansea Grand Theatre adopted these new colours not only for their website but also across all marketing materials and communication channels, reinforcing their commitment to accessibility and brand consistency.

Accessibility issue 2 - Navigating animation challenges

As part of accessibility guidelines, web animations that start automatically, last over five seconds, or are presented in parallel with other content must include a pausing mechanism. This requirement aims to avoid distracting users, particularly those with attention deficit disorders or cognitive disabilities, who may find such animations overwhelming.

A practical example of this can be seen in the redesign of the Invest Stockton-on-Tees website. The previous one-page site featured a variety of animations that contributed to its lively aesthetic. However, these animations weren't WCAG compliant, lacking the required pausing mechanism to ensure they met the guidelines. Upon developing the one-page website into a new multi-page site, the Invest Stockton-on-Tees team came up against a significant challenge in needing to firstly create new animations for the new pages, but secondly needing to incorporate a pausing mechanism for these new and existing animations, something that would require substantial development time and resource.

To address this issue efficiently, the Invest Stockton-on-Tees team collaborated with the GOSS Creative Team to explore alternative design solutions. Instead of implementing complex pausing mechanisms, they opted for flat iconography and imagery that retained the vibrant personality of the original site's animations. This decision not only simplified the build process but also ensured that the new design remained accessible and user-friendly. By replacing animations with engaging yet static design elements, the Invest Stockton-on-Tees website effectively balanced aesthetic appeal with inclusivity.

Accessibility issue 3 - Ensuring effective interaction

Interactive elements on a website are vital for user engagement, but they can also present accessibility challenges. One common issue arises when imagery is placed behind a top navigation bar, which can lead to poor contrast and difficulties in interaction. The City of Sunderland team aimed to position their website's top navigation menu over images displayed in the homepage carousel. However, this design choice raised concerns about readability, as it could not be guaranteed that each chosen image would provide sufficient contrast with the navigation text, making it difficult for visually impaired users to interact with the site.

To overcome this challenge, the GOSS Creative Team devised a practical workaround. They introduced a gradient element that transitioned from black to transparent, placing it between the navigation text and the carousel images. This solution ensured adequate contrast, allowing the navigation items to remain readable while maintaining the website's brand identity and visual appeal.

Another common challenge in web accessibility involves the use of maps. While maps can provide valuable information, they often struggle to comply with WCAG standards due to their heavy reliance on visual elements, making them difficult for users with visual impairments or those using screen readers to interpret. Furthermore, maps that require users to click on specific areas can pose difficulties for individuals with motor function disabilities, especially when using touchscreen devices.

To address these issues for various GOSS clients, the GOSS Creative Team has implemented tabular maps as an effective alternative. In this design, each district or borough within a larger area is assigned a specific tab. As users click on each tab, the corresponding district or borough is highlighted, and relevant information is displayed on the screen. While tabular maps may lack the visual-spatial experience of traditional maps, they serve as a practical solution for conveying essential information while meeting WCAG accessibility standards. Additionally, they can complement traditional maps, ensuring that all users can engage with the content effectively.

Accessibility issue 4 - The power of typography

Choosing the right typography and fonts is often overlooked when considering web accessibility, yet it plays a crucial role in ensuring that content is easily digestible for all users. Various nuances in typography can significantly impact individuals with visual impairments or cognitive disabilities, such as dyslexia, making it more challenging for them to read and comprehend information on screen. Key practices for enhancing accessibility include selecting legible fonts, preferably sans-serif, ensuring sufficient font size (at least 16px), and avoiding the use of all-uppercase text.

A notable example of this can be seen in the redesign of the Invest Stockton-on-Tees website. The previous one-page site employed a combination of uppercase headings set in compacted sans-serif fonts, while the body text was styled with a serif font at a size below the recommended 16px. This design choice rendered the information particularly difficult to read, posing barriers for users with varying needs.

During the development of the new multi-page Invest Stockton-on-Tees site, the GOSS Creative Team aimed to retain the distinctive personality of the original design while enhancing accessibility. To achieve this, they strategically swapped the font roles: the previously used serif font for the body text was elevated to serve as the heading font, while a more legible sans-serif font was adopted for the body text. This adjustment not only improved legibility but also maintained the site's character, ensuring that content remained accessible and user-friendly.

Conclusions

Accessibility is an essential aspect of web design that ensures all users, regardless of their abilities, can navigate and interact with digital content effectively. Throughout this discussion, we have explored several critical accessibility issues, including colour contrast, the use of animations, the implementation of interactive elements, and the selection of typography and fonts. Each of these factors plays a significant role in shaping the user experience, particularly for individuals with visual impairments, cognitive disabilities, or other accessibility challenges.

The examples of City of Sunderland, Swansea Grand Theatre, and Invest Stockton-on-Tees illustrate how these clients successfully balanced aesthetic beauty with accessibility. By thoughtfully addressing colour contrast, utilising alternative design elements, and making informed typography choices, they have created visually appealing websites that comply with accessibility guidelines. Their commitment to inclusivity not only enhances the overall user experience but also reinforces the importance of brand identity. Ultimately, accessibility should be viewed as a key component of great design, rather than a limitation. By embracing inclusive design principles, designers can create beautiful engaging websites, whilst embracing accessibility and cater to a diverse audience.