I’ve been working with Ensemble Cymru since 2015, supporting Peryn and his team to update and look after their website. It has been really great to work with such a creative and enthusiastic organisation.
A huge part of Ensemble Cymru’s work is about bringing Welsh communities together to enjoy outstanding music, increase wellbeing and enable positive change… and that commitment extends to our website. We want to make sure that everyone can access our website so we’ve spent the past few months working on a redesigned website that has access at its heart.
What is web accessibility and why is it important?
Web accessibility is the process of ensuring website content can be accessed by everyone whatever barriers they may face. Some people might be restricted by technology: they may have slow Internet, especially in rural areas like north Wales, or they may be using an older computer running old software.
Some people may have physical challenges. Users might use a mouth wand to operate their computer keyboard or eye tracking software. Others may prefer to use the keyboard because they struggle to hold and point a mouse accurately, or they may have reduced vision and need large clear text. Bright pink text on a purple background may look super funky but it would be totally illegible! Other people access web content with a screen reader that reads out loud the text that’s on their screen, while deaf or hard of hearing users rely on transcripts of audio or video content.
We also need to make sure that the website works for those using the latest smart phone with its touch screen, light sensor, accelerometer, face ID and more! Many modern phones have accessibility features built in now too, like Apple’s VoiceOver screen reader programme or Siri which provides voice activated commands.
The key in designing for accessibility is to always have our users in mind. Our website must be usable whether our users are using a fancy wide screen monitor, or a bells and whistles smart phone. The content must still make sense when viewed on the most basic text version or when accessed using a screen reader (which reads the content out loud for a visually impaired user).
Visual Design, Colour and Contrast
The accessibility guidelines play an interesting role in the creative process. We need to interpret the Ensemble Cymru visual branding in a way that ensures consistency and recognition of the identity, while also conforming to accessibility tests. For example, we explored colour combinations that have sufficient contrast. The bold palette chosen both passes the threshold accessibility values and reflects the vibrancy and passion inherent in this small organisation.
One of the important things to remember about accessibility is that many people who have a disability will be using the same technology as everyone else, but they will be using it in a slightly different way.
For example someone who is partially sighted might use their laptop with text size set to extra large to enable them to read comfortably. So we must make sure our page design is flexible enough that text size can be increased without breaking the layout: elements must not overlap or be pushed outside the page boundaries.
Nowadays, as people browse the internet on a whole range of mobile devices, web designers create responsive layouts as a matter of course: we design our pages so they respond to varied screen sizes and resolutions, stretching, shrinking and reorganising content elements accordingly. As well as testing on different screen widths, we also change the text size and test different combinations of font and screen sizes to ensure our layouts don’t break and content is easily readable.
Mouse, Keyboard or Touch
We need to make sure that users can interact with content. Many modern devices include touchscreens as well as the more traditional mouse clicks and keyboard controls. Users should be able to navigate through interactive elements (links, buttons, form entries etc) and be able to select and activate the element as needed.
In order to give full access to users who can’t use devices that rely on hand eye coordination, like a mouse, all content should be accessible only using keyboard commands. For example think of a dropdown sub menu in a navigation bar – for a dropdown to be fully accessible it must be possible to open, navigate and close it using only the keyboard. This process is sometimes overlooked by developers who only allow the submenu to be accessed on a mouse hover.
Images and Alternative Text
For users with visual or cognitive disabilities alternative text can help them understand the meaning or function of an image. We use the ‘alt attribute’ of an image tag (alt = alternative) to provide text information about an image, or place a caption or descriptive text next to the image. A screen reader will read out the alt text. If the image fails to load or the user is browsing with text only, the alt text is displayed on the page. So it’s important to consider the passage of text and ensure the alt text makes sense in the location it is positioned. We need to make sure that it flows and is helpful to the reader. Badly written alt text can sound clumsy or incoherent, at worst it can be confusing or misleading.
The Basic Building Blocks
Headings provide a description of the following content. Busy users can scan the headings in a page and quickly get an overall understanding of what the page is about. Screen reader users can use page headers in the same way by skipping from heading to heading.
Lists provide a quick and efficient way to group similar items e.g. a list of dates or events, instructions, terms and conditions.
Links are the connections that make the internet a interconnected World Wide Web! Using well-written link text can make all the difference in helping users navigate to where they want to go.
These basic elements when used correctly provide a strong foundation for an accessible webpage. Layered on top of that we have our visual design and interactive elements. These can make our content user friendly, visually appealing, and intuitive to use. However we must be careful to be aware of our users when adding each additional layer of complexity. It’s all too easy to get carried away creating a bells and whistles interactive platform with appealing and exciting design – but this has to be considered alongside accessibility.
Meeting Web Accessibility Standards
In order to measure Internet accessibility a set of standards have been developed. They are called the ‘Web Content Accessiblity Guidelines’ or WCAG. We have decided to use the WCAG double-A Standard to guide the redesign and we’ll be doing a WCAG audit to check all parts of the site meet these standards making Ensemble Cymru’s website accessible to all our users.
Ensuring that everyone can access Ensemble Cymru’s work is really important to us – we’re committed to increasing access and breaking down barriers that prevent people from enjoying music, creativity and collaboration across Wales. We hope you enjoy the new website and if you have any feedback on accessing our website we’d love to hear from you.
Thanks to Laura Twemlow (Co-Director, Change Creation) for editing this post. Her brilliant way with words have refined my ramblings and hopefully made some of the more technical bits easier to understand. A shorter version of this article is available on the Ensemble Cymru website in both Welsh and English.