Supercool Website Accessibility Toolkit

Hello, we're Supercool. We combine design, tech, and data know-how with 20+ years of sector experience to craft websites that make life easier for cultural organizations – and your audiences.

Your website is a gateway into arts and culture for both new and existing patrons. But while a gateway can be an entrance, it can also be a barrier. It’s important to think carefully about who you’re currently keeping out – and how you can welcome them in.

We each need to learn how to move outside of our own experiences, in order to create and encourage an 'access culture' in our organizations.

About this Toolkit 

The Toolkit is designed to help you review the accessibility of your organization's website. There are lots of simple things you can do in-house to test and improve website accessibility. 

The Toolkit will give you: 

• A starting point for considering the accessibility of your organization's website
• Links to some great (free!) online tools, alongside our Supercool resources
• Quick wins that you can action yourself, in-house
• Longer-term goals to work on with your website developers

But first, why is website accessibility important?

Typically, we think of website accessibility as concerning the needs of ‘disabled’ users. That may seem like a small, though important, subset of your patrons. But more than 1 in 4 US adults report having a disability. That’s more than 70 million people. 

By the age of 45, most people have presbyopia, which particularly impacts how we see and read computer screens. So, many of your patrons – the people who use your website – are likely to have some kind of vision impairment. 

When customers hit a wall, they don’t usually tell you. Instead, they give up. Research shows that 69% of disabled online shoppers will click away from a website they find hard to use. With 86% willing to pay more for a product from an accessible website, rather than buy the same product for less from a website that was harder to use.

The consumer market for people with disabilities is large, growing, and vastly underserved. Working age Americans with disabilities have money to spend, with around $107 billion in disposable income – nearly 7% of the total disposable income in the United States. Accessible technologies are a great way to engage this growing market, and organizations recognizing this have a great opportunity to grow their revenue.

An accessible website doesn't just support those with a disability. For some people using your website, English isn't their first language. Some users may be restricted by slow network connections. Others could be using older devices with limited technical capabilities. 

Accessibility is about imagining – and welcoming – difference. And it's also about growing your revenue. Because, as the statistics show, good accessibility is not just good for people – it's good for business.

How accessible is your website?

The easiest and quickest way to get an idea of how accessible your website is (or isn't) is by testing it yourself.

Here, we’ve outlined six accessibility tests and checks you can run yourself:

1. Run a Google Lighthouse report
2. Try tabbing through your website
3. Test your website using VoiceOver
4. Are you using alt text?
5. Check color contrast
6. Assess your written content's 'reading age'

Having run these tests, it's unlikely you'll be able to resolve every issue immediately. But having this knowledge to hand will help you to engage colleagues and digital partners for actions that require a bit more support. 

1. Run a Google Lighthouse report

A Google Lighthouse report is a great way to assess your website’s performance across 4 broad areas of functionality.

• Performance: How fast is the site. Does it download quickly?
• Accessibility: Can screen readers understand the page? Is it navigable?
• Best practices: Does it follow well-supported standards? Is it user-friendly?
• SEO: Search engine optimization. How well will Google rank this page?

You can run a Lighthouse report on any website, using Google Chrome’s developer tools:

• If you’re on a Chromebook, you can click the Lighthouse Icon right in the toolbar
• If you’re on a Mac or PC, open Google Chrome, navigate to your website, and either:
  • Right-click on any web page and choose Inspect
  • Or, in the toolbar, go to View > Developer > Developer Tools

A new panel will open up, to the right in your browser:

From the menu top right, select Lighthouse, and click Analyze page load. 

We recommend using the Navigation mode, but you can choose whether to analyze the site as a mobile or desktop user. 

Once run, you’ll get a score for each area – you can scroll to see the audit details:

👉 TO DO

If your website scores less than 100/100 for accessibility, get in touch with your digital agency / web developers, and ask them to take a look. 

(There may be some updates you can make yourself – like adding alt text to images, more on this later – but coding updates to improve accessibility will likely need to be done by your developers.) 

2. Try tabbing through your website

Tabbing through your website – i.e. navigating using a keyboard rather than a mouse – is a helpful way to test whether or not your website's navigation and content are strcutured accessibly. 

How to test keyboard accessibility

These tests can be conducted using any browser on a PC or Mac.

If you’re using the Chrome browser, you will need to use the following keys:

• TAB - moves forward through interactive elements.
• SHIFT + TAB moves backwards through interactive elements.
• ENTER activates a link or button or selects an option.
• SPACE activates a button, checks or unchecks a checkbox, expands a dropdown menu.
• UP and DOWN arrows move through radio button options, menu options and autocomplete options.
• SPACE and SHIFT + SPACE will scroll up or down by page, unless you currently have a form control focused.
• ESC closes a dialog box.

If you’re using a different browser, the keys you need to use might be different – search for specific resources online.

👉 TO DO

Starting on your website's homepage, tab through a typical user journey – for example, booking a ticket. 

Throughout the journey you'll want to check the following:

• Tabbing order is logical:
  • Tabbing through the website and web pages should feel intuitive. The tab should move from left to right, top to bottom, following a logical reading order.
• You can visibly see where you have tabbed to on the page
  • Focus states on buttons and links should be clearly visible. This is usually shown as a thin border around the focus element.
• Hitting Enter activates the link you're on
  • Enter is the equivalent of a mouse click. (Note that simply tabbing to an element should not activate anything other than showing a focus state).
• Is there a 'Skip' link?
  • Many webpages have repeated information, such as menu items at the top of each page. Rather than having to tab through each one of these every time you land on a new page, you should have the ability to 'Skip' it. To test the main skip link, refresh the page and press the TAB key. The first interactive element should give you the option to skip to the main content by hitting ENTER.
• Beware of getting trapped!
  • You shouldn't get stuck anywhere. As well as being able to get to any area of the website that you can with a mouse click, you should also be able to exit using keyboard controls. This is especially important to check in expandable menus, filters, calendar views, any popup modals, and the purchase path. 

If you find any issues, make a note of them – including as much detail as you can about which page you were on, what you were trying to do, and what issue you encountered – and ask your web developers to take a look, and suggest fixes or improvements.

3. Test your website using VoiceOver

Some users will be using assistive devices, like a screen reader, to access your website. The order in which content is read aloud and what content is read aloud is determined by how the screen reader understands the website code and content. 

VoiceOver is a free, first-party screen reader on MacOS, iOS, and iPadOS. It’s compatible with most browsers, but it works best when used in combination with Safari. The VoiceOver modifier, abbreviated to VO, is the key or keys used in keyboard shortcuts to interact with VoiceOver.

The default key combination is Control-Option. It’s recommended to change this to use Caps Lock instead, reducing the number of keys you need to press at once. This can be changed in the VoiceOver Utility Application, under Commands > VoiceOver modifier:

There are useful shortcuts and commands available on the Apple support website. 

👉 TO DO

Navigate to your website and turn VoiceOver on (using Command + F5). 

Check that:

• Headings are being read out correctly.
• All content on the page is accessible via the screen reader.
• Links are being read outa and being identified as links – with the link path also being clear. (Ideally this will be read out as the webpage's name, not the full link.)
• Any text that's been force-styled in UPPERCASE is read out correctly, not as an acronym.
• Semantically correct Heading styles have been used throughout content. This means no using 'bold' in place of Headings, and no using Heading styles purely for visual purposes e.g. to make certain bits of text larger, just so it looks nice. (Ideally you'll have a specific text style available for that!)

If you don’t have a MacOS, iOS or iPadOS device, here are some alternative screen readers

• NVDA: NVDA is free screen reader available on Windows and supports all common browsers.
• Windows Narrator: Narrator is a free, first-party screen reader built into Windows.
• JAWS: JAWS is a third-party, Windows only screen reader. Unlike most screen readers it requires a paid license.
• TalkBack: TalkBack is a free, built-in screen reader on Android.

4. Are you using alt text?

'Alt text' is a contraction of 'alternative text'. It's a short written description of an image so people can understand what's shown in that image, when it can't be viewed for some reason.

Alt text is read aloud by screen readers in place of images, allowing image content to be accessed by people who are blind or have visual impairment. It can also be useful to people with certain sensory processing and/or learning disabilities. And it’s displayed in browsers if an image file hasn't loaded – perhaps due to a poor internet connection, or when the user has chosen not to view images.

Here are some tips on adding – and improving – the alt text on your website:

• Describe the image clearly
  • Alt text is designed to provide text explanations of images for any user who is unable to see them. A helpful tip is to think of it as describing an image to someone over the phone.
• Keep it (relatively) short
  • The most popular screen readers cut off alt text at around 125 characters.
• Avoid keyword stuffing
  • Google won't dock you points for poorly written alt text, but you'll be in trouble if you use your alt text as an opportunity to stuff as many relevant keywords as you can think of into it. Focus on writing descriptive alt text that provides context to the image – and if possible, include your target keyword, but leave it at that.
• Don't include "image of," "picture of," etc. in your alt text
  • It's understood that alt text is referring to an image, so no need to specify it. 

👉 TO DO

Make sure that the images in your website's Content Management System (CMS) have alt text. If any images are missing alt text, use our resource to help write some: How To Write Good Alt Text

If you're not sure how, or where, to add your carefully crafted new alt text, ask your web developers or digital agency for help.

5. Check color contrast

The design of your website needs to reflect and enhance your brand and visual identity, and show-off event or exhibition imagery. But not at the expense of some people not being able to access important information because of it.

Where words are displayed in different colors, it’s important that the color contrast is sufficient for users to be able to read those words. This not only supports users with a visual impairment, but also people accessing your website in a dark auditorium, for example, or in bright sunlight on a small mobile device. 

Color contrast checker tools allow you to determine whether or not the contrast ratio between colors passes accessibility standards. 

👉 TO DO

Audit the areas of your website where color and type are used. Using a tool such as Who Can Use or WebAIM's Contrast Checker, run-through each color combination, and keep a note of whether or not it's accessible. 

Where combinations aren’t accessible, inform your design team and web developers. It’s worth noting that an inaccessible combination doesn’t always need a complete change – sometimes a color can be tweaked slightly in order to pass the test. 

6. Assess your written content's 'reading age'

The average adult reading age in the US is 7th to 8th grade*. And regardless of literacy skills or if people have English as a second language, many patrons will be browsing your website while doing something else, like watching TV or looking after children, so you don’t have their full attention. 

Making your website as easy to read as possible – by assessing written content, reducing the reading age if necessary, and structuring content so it’s easy to scan – will significantly improve your website. For everyone.

👉 TO DO

Take a typical event, and paste the marketing copy into HemingwayApp, a free reading age assessment tool. Check the score, if it’s above 8th grade, edit the copy to bring this down. (Hemingway will give you some tips on how to do this.)

Review pages that contain key information for patrons – such as how they can find your venue, or explaining how they can support you – and check the following:

• Have you included text hierarchy to help make content easy to digest and scan?
  • e.g. Headings, subheadings, bullet points. Breaking text into clear, manageable chunks helps people to process it quicker.
• Assess the text using HemingwayApp – does it score at 8th grade or below?
  • You're aiming for lower, to ensure as many people as possible are able to understand it.
• Are you using organizational jargon?
  • e.g. Abbreviations, acronyms, internal names for venues, programmes or education resources? If so, are these clearly explained to patrons?

* https://advancebookreaders.com/average-reading-level-in-the-us/

Create an Action Plan

Using your results from running those Toolkit tests and checks, you can now create an Action Plan for making your website more accessible. 

Your Action Plan should be:

• Specific
  • Avoid vague actions or plans, so it's easy to check actions off your list. Setting out each action clearly will help everyone.
• Owned
  • Make sure you, your colleagues, and/or your digital partners are held accountable by assigning every action to an individual or a team.
• Time-sensitive:
  • Set deadlines for whoever owns each action point – see above!
• Priority-focused:
  • Consider where updates will have the biggest impact. This will often be your most visited web pages – e.g. event listings, event pages, information on visiting, and how to find you. Focus on improving these areas first.

Helpful tips for working from your Action Plan:

Does your Action Plan seem overwhelming? 🤯

Start by noting the approximate time you think each action will take – from 'quick wins' to things that will require an afternoon or more e.g. 10min tasks, 1hr tasks, 4hr+ tasks.

This will make it easier for you and your colleagues to find time in your schedules for each action, and help it all feel more achievable.

Celebrate progress 🎉

When scheduling your actions, include some progress checks. And use these to celebrate what you've achieved so far! 

Adding milestones specifically to give yourself and your colleagues a pat on the back for a job well done is a great way of recognising progress, reminding each other that what you’re doing is important, and keeping motivation high.

Share your progress more widely 🤗

Share the progress you've made with people who aren't directly involved in improving your website's accessibility – from colleagues in other departments to donors and patrons. This can be as simple as an internal memo, a snippet in your regular email to donors, or an item on your website or social media channels.

Not only does this inform people of any practical improvements you've made, it also reinforces the 'access culture' in your organization.

Further reading

For more about digital accessibility, here are some useful links and resources:

• Web Content Accessibility Guidelines (WCAG) international standards

• Supercool’s accessibility resources

• Guidance on Web Accessibility and the ADA

• The A11Y Project

• The American Library Association’s Useful Digital Accessibility Resources

Need more help or advice?

For help using this Toolkit, or to discuss digital accessibility either in general or around a specific issue, please contact us