Accessibility design in practice

“The Luminary team have created something that is truly a 3D artwork of accessibility as well as an effective fundraising tool.”
– Deb Hallmark, Head of Corporate Partnerships, Events and Community, Vision Australia

Reaching for the stars

Vision Australia’s annual Carols by Candlelight is a beloved Victorian institution. It’s also a significant fundraising event for the organisation which works with Australians who are blind or have low vision, to help them achieve the possibilities they choose in life. 

When Vision Australia approached us with a concept for the Carols by Candlelight website, we were excited to help bring their creative vision to life. But the stakes were high and time was short – how would we be able to find the right balance between form, function and accessibility? The answer for us was approaching the design from an accessibility point of view from the beginning. 

This runs counter to some ways of thinking, in which a design is first developed, then ‘made accessible’. When the latter process of ‘translation’ is employed, invariably something integral to the original design is lost. That’s why there can be a feeling within the design community that a tension exists between good design and function, and good accessibility. As this project proves, however, this does not have to be the case.

A successful (and accessible) event

The Carols by Candlelight website generated $1.3 million in donations, held up perfectly under high traffic demands during the telecast event, and most importantly, delighted Vision Australia’s online audience, including people with visual impairments.

The online creative concept featured visual representations of a candle flame made of individual stars. As more donations were added the flame ‘burned more brightly’. This created an arresting visual representation of the idea that we all shine ‘brighter together’. Each star represented a donation with the name of the donor and a message of support, or a story about the experiences of Vision Australia's young clients. Users were able to interact with the candle to make the flame constellation spin around and to click on individual stars to reveal the donation or story details. 

Because this level of visual complication excluded some users with visual differences, a list view of the information was provided as an alternate way for users to interact with the content and for screen readers to access the information easily. The Carols by Candlelight website achieved a score of 98 out of 100 in Lighthouse, an open-source tool that rates accessibility. This was a fantastic collaborative achievement between Luminary and Vision Australia’s in-house accessibility team that supported the project from start to finish.

The language of accessible design

The Web Content Accessibility Guidelines (WCAG) are the current standards for accessible design best practices. The guidelines cover the four pillars of accessibility: that content is perceivable, understandable, operable and robust. You can read about the fundamentals of designing for accessibility here. 

The guidelines also offer three compliance levels that determine the extent to which a website design is accessible. These are:

• WCAG 2.0 A: Websites that include minimal accessibility requirements including non-text content alternatives, video captions, and meaning that is not conveyed through shape, colour and size alone.
• WCAG 2.0 AA: Acceptable compliance including meeting best practice colour contrast, alt text for images that convey meaning, information that can be conveyed through a screen reader, and content organised in a logical and useable way.
• WCAG 2.0 AAA: Websites that deliver optimal compliance, making the site accessible to the maximum number of users. They include things like sign language interpretation for audio or video content, very high colour contrast and no time restrictions for any activities.

Vision Australia wanted a WCAG 2.0 AA compliant site that would allow its audiences, particularly people with visual impairments, to access and enjoy the Carols by Candlelight online experience. This mid-level compliance goal also allowed for a high degree of creative possibilities, including building the visual heart of the creative concept, the animated 3D flame of stars.

Aligning design and accessibility

We wanted to build in accessibility from the outset. This was as much about having the right mental attitude as a technical process. Rather than developing a fully resolved creative concept featuring the animated ‘flame’ we approached the design using the WCAG guidelines as a palette of possibilities, as opposed to a list of restrictions. 

This meant that accessibility was at the forefront of our design thinking and directions. We tracked and measured accessibility as we progressed through the project, rather than waiting until the end. Lighthouse is our go-to tool for checking how accessible our work is and identifying opportunities to improve it. We worked consistently to find solutions and push our creative thinking in alignment with our accessibility goals. 

Here are some of the ways we achieved our accessible design goals:

Perceivable

• The Carols by Candlelight site provided text alternatives for non-text content.
• We developed simple, intuitive layouts.
• The background and foreground of the site were separated effectively, making text easier to read.
• We achieved WCAG 2.0 AA colour ratio compliance. 
• We added labels to icons to give users an understanding of content and actions.

Understandable

• The navigation was designed to be simple, consistent and predictable.
• Instructional content was provided for how to interact with the flame.
• Call to action buttons were positioned close to instructional content, making it easier for a user to complete an action.
• All font sizes and weights were increased for improved legibility.

Operable

• We made sure all functionality was available from a keyboard.
• We avoided time-based restrictions to ensure users have ample opportunity to read and use content.
• We provided a tab-based ability to scroll through the candle flame and read stories and donor messages.
• We included a pause button to allow users to stop the spinning animation.
• We created ‘focused’ states of the stars within the candle flame to inform users on what they could explore.

Robust

• The website was built to integrate easily and effectively with tools and technologies that assist people with a range of disabilities.
• We developed an alternative ‘list view’ to assist users and make the content more accessible for screen readers.
• We used animations built in HTML and CSS for increased accessibility compliance, performance and optimisation.

You can read the Vision Australia Carols by Candlight case study here.

The power of accessible thinking

From a design perspective, the success of this project was due to embracing the accessibility needs of our audience, rather than being restricted by them. Within the guidelines for making websites accessible there exist never-ending possibilities to create meaningful, beautiful experiences for everyone. The key for us was embracing the design challenge from the get-go and using a third-party accessibility tool to measure our progress and make improvements as we went along. This led to a project that was successful by every measure, and one that was especially meaningful to us.

While accessibility necessarily influences and informs design, it’s not the case that it must hamper the process or compromise the outcome. Accessible design thinking is about speaking the language of accessibility through design to express solutions everyone can understand and enjoy. As this beautiful website shows, effective, inspiring creativity is not just possible within an accessibility framework, it can be the happy result of one.