6 Quick Accessibility Wins for Content Creators

— 2 mins 47 secs —

At Design By Day we love to work with charities and cultural organisations, many of which either have a legal obligation to meet WCAG 2.1 Accessibility Guidelines to AA standard and / or an ethical motivation to do so.

What many site owners and content creator don’t realise it that Accessibility isn’t just cooked up in the design and the coding of the site (although that’s a large part of it). Much of the responsibility lies with content creators, after all that’s why your visitors are there right?

To help content creators and site admins, we’ve put together a list of 6 quick and easy to implement Accessibility wins to ensure that your website remains Accessible to AA standard post-launch.

You’re welcome! 👍

1. Alt Tags Alt Tags Alt Tags!

Alt tags are often the easiest thing to miss when adding an image to your site – even though it’s super easy to do. Always make sure that you add a descriptive alt tag. Alt text is a screen reader-friendly text alternative description of an image. To ensure meaningful accessibility ensure the text is descriptive and accurately describes the content of the image. Avoid the temptation to start your description with ‘Picture of…’ as screen readers will already know that the user has navigated to an image communicate this to them. Bonus: Alt text is good for SEO too!

2. Always use a H1 at the top of each page

There are 6 levels of heading in HTML. H1 to H6. H1 is what can be described as a ‘top level’ heading or main title of the page. All subsequent headings are nested subheadings. A H1 heading should always be used at the top of each page

3. Don’t abuse headings!

A common rookie mistake is to use headings as a way to make text bold or increase size. This is semantically incorrect, and whilst potentially may makes sense visually, a screen reader recognises this text as a title and will give its user an audio indication that it is a title, causing confusion about the content.

4. Don’t use underlined text in place of a heading

It might be tempting to underline your heading – but stop! This gives it the appearance of a link! Of course if your heading is a link then an underline is appropriate – although your shouldn’t need to add this manually if your website has been built according to Accessibility standards.

5. Be careful when you copy and paste text from Microsoft Word or other sources

Word and other desktop publishing applications use HTML markup to style the text. Copying and pasting into a WYSIWYG editor often results in these styles being copied over – which can cause visual and semantic errors; for example, any bad practices like underlining text or wrong heading levels.

In WordPress you can avoid this by copying and pasting into the ‘Text’ tab in the Classic Editor and then switching back to the ‘Visual’ tab to style your text.

6. Use video subtitles / Closed Captions

Don’t worry, this isn’t something you need to do directly on the video itself. If you use Youtube, this is done automatically – however it’s not 100% perfect, so make sure you go through the captions and edit any words it has misunderstood.

Vimeo also recently introduced loads of Accessibility AA features, although currently you need to upload a text-based file to achieve this. More info from Vimeo here.


Angela Roche