Accessibility For Different Content Types

Accessibility

Accessibility For Different Content Types

By Joanna Goodwin 0

So, my earlier 2 blogs have covered what digital accessibility is and what it does and doesn’t cover in terms of public sector sites and systems. Here I cover off some hints and tips for different content types, as well as some useful tools to help test your content as well.  

Copy and editorial 

Don’t forget that different rules apply for digital content, and everyday print conventions don’t translate well online. You need to consider how content works on assistive technologies and different devices, like mobiles or laptops. 

  • Writing needs to be accessible 
  • Consider accessibility in everything written and published on the web 
  • Language itself needs to be accessible – plain English, avoid jargon (where possible), no Latin, explain abbreviations 
  • Avoid walls of text – use subheads, bulleted lists, short sentences and paragraphs 
  • Remove visual obstacles – italic, bold and underline 
  • Characters such as /, &, +, – can be problematic or ambiguous  
  • Many people using screen readers turn off punctuation 
  • Avoid “click here” – links need to have context, so user knows where they are going 
  • Avoid “see below” – specific location important for user to navigate page 
  • Best writing practice for accessibility is often just best practice 

BUT accessibility considerations don’t begin and end with screen readers, there are lot of different disabilities to consider, and assistive technologies are all different and constantly changing 

Images 

  • Always add alt tags 
  • Avoid using text in images 
  • Keep it simple 
  • Be mindful of colour contrast in images 
  • Be mindful of brightness 
  • If there is information in the image (e.g., a chart or graph), put it in HTML too 

Animations 

Animations on web pages rarely enhance accessibility and should almost always be user controlled or short in duration. Images that continually animate can cause the rest of the page to be more difficult, or for users with extremely high levels of distractibility, inaccessible. 

WCAG 2 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user. Common failures include carousels or sliders that automatically animate or cycle through content. 

BUT: Bright, strobing images or media can cause seizures in some people. Seizures can be dangerous, even life-threatening and we don’t want to cause them. 

To potentially trigger a seizure in a user with photosensitive epilepsy, a flashing image or multimedia must: 

  • flash more than 3 times per second, 
  • be sufficiently large (a very small flashing image, such as a cursor, will not cause a seizure) 
  • be bright, with significant contrast between flashes. 

Additionally, the colour red is more likely to cause a seizure. While large, flashing images are rare on the web, seizure-inducing media is more common in web video, especially HD-quality video that includes strobing special effects. Please avoid this!  

You can see the WCAG 2 Success Criterion 2.3.1 (Level A) defines thresholds for frequency, size, contrast, and colour of strobing images. 

Icons 

Many web pages use icons to supplement or replace text. Complex content and functions, such as clicking a gear icon for “settings”, can easily be conveyed through a small icon. Icons should be simple, easy to understand, and consistent. They almost always require familiarity to be useful. Across cultures and languages, they can be misinterpreted. In many cases, adjacent text is helpful. 

Colour  

Don’t Use Color Alone to Convey Meaning | Accessibility Tips (dequeuniversity.com) 

Color: Don’t use color alone to convey meaning (universalusability.com) 

Emojis and emoticons 

  • Never use emojis to replace words. 
  • Do not use emojis as the only way to express an emotion you intend to communicate. 
  • Use popular emojis that are widely recognised. 
  • Use emojis that translate well across devices. 
  • Put emojis at the end of sentences, and do not use repeated or too many emojis. 
  • Use emojis, not emoticons. 
  • Avoid emojis that are not visible in both dark and light mode. 

This info is from the Emoji Readability Guidelines from Content Design London.  

Logos 

WCAG 2 Success Criterion 1.4.5 (Level AA) requires that images not be used to present text if true text can achieve the same visual presentation. Logos are exempt so can be used as an image. 

Videos  

  • Add closed captions. 
  • Be mindful of video design. 
  • Use alt text on thumbnails 
  • Transcribe visual or auditory media. 
  • Make the right colour choices in video. 
  • Include video descriptions on social media. 
  • Remove autoplay from videos. 

Audio files 

This one is easy – supply a transcript in HTML! 

 
Website design and layouts 

People using assistive tech often browse differently to those not using technology or machines to help them browse. Especially those using speech activation, or screen reading software, they will browse using the options in the tech, they will not scan like I do, for example. 

The aim is that everything we build should be as inclusive and understandable as possible. While we may sacrifice elegance in search of being inclusive, we never sacrifice accuracy. 

Pop ups 

WCAG 2.1 bans all popup windows without explicit alert beforehand (On Focus 3.2.1 A). 

New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of user interface and expects to get a new window, such as an options dialogue. The failure comes when pop-ups appear unexpectedly. 

Technically, pop-up windows should use accessible scripting and the site should still be functional even if JavaScript is disabled. Also, be aware that many users with visual browsers use pop up blockers to avoid pop-up advertising. 

JavaScript pop-up windows should only be used if they add a significant advantage in functionality. 

You can see more info on this in this article.  

Rules in the CMS (content management system) for text 

  • Short line length  
  • Left aligned 
  • Space between lines 
  • Space between paragraphs 

White space works to help guide the users around the page. A short line length that doesn’t go all the way across the page with left alignment with a ragged right edge is ideal. This avoids the “wall of text” problem that can be disorientating for some users. The clear gaps between each line and each paragraph block helps the eyes to travel across the page without getting lost. 

These considerations help everyone, but they can be particularly helpful with for people with conditions like low vision and dyslexia. 

Colour contrast 

Web Content Accessibility Guidelines 2.0 guidance states there should be a contrast ratio of 4.5:1 to meet the minimum AA level standard. 

Colour blindness 

Be careful that you don’t use colours that are difficult for anyone who is colour blind to read. These include red and green. There are tools and plugins that can help simulate colour blindness, but another good tip I picked from the course is that, if you can’t install plugins, then try re-colouring your chart to greyscale, or printing it out in black and white. Doing this helps highlight the issues that other people might have your colours. 

Posters 

These posters are great for downloading and sticking up around your department. They were created by a designer at the Home Office, and they cover accessibility do and don’ts for a range of different access needs. These include tips for designing for users with dyslexia, users of screen readers and users with low vision. 

Social media  

My number 1 tip is to use management software that’s accessible as this gives you more flexibility while making your content accessible.  

For content: 

  • Keep links and hashtags to a minimum (but always link to more information) 
  • Start with the basics and work up – aim for a 9-year-old to start with 
  • Avoid jargon and acronyms 
  • Accessible design of images 
  • If you can add alt text, do it  
  • Ensure the copy clearly tells the user where the link will take them (clickbait should be illegal!)  
  • Video content should have captions and audio description 
  • Only use a GIF if it adds value to the content 

For the platform:  

  • Colours 
  • Links 
  • Bio 
  • Text in images 
  • Moving features 

And there’s more useful links here: 

Making social media accessible – GDS Digital Engagement (blog.gov.uk) 

Social Media Playbook – GDS Digital Engagement (blog.gov.uk) 

Accessible communications – GCS (civilservice.gov.uk) 

Tools for accessibility 

You can check the reading age of your content using Flesch–Kincaid readability metrics or Readability-Score.com. 

Readability: 

  • Grammarly 
  • Hemmingway 
  • Word doc reading ease checker 

Accessibility testing: 

This is the final blog in the series on accessibility. If you’ve got any thoughts, comments or questions on accessibility regulations you can comment below, or email us at digitalteam@wlga.gov.uk or timdigidol@wlga.gov.uk 

Leave a Reply

Your email address will not be published. Required fields are marked *