Banish common web accessibility horrors this Halloween

Is your website scaring users away? This Halloween, our Principal Accessibility Consultant, Joe Chidzik, covers six common web accessibility issues and provides useful solutions to help banish these accessibility horrors.  

1. Ghostly focus indication 

Users navigating with a keyboard will lose their place when offscreen content is focused, this can leave your keyboard users spooked! A great solution is to make sure that off-screen content is hidden with CSS display: none. 

2. Spooky content blinks into existence 

If you have content that appears on the page, as if by magic, then consider using aria-live to allow the content to be announced automatically to screen reader users. 

3. Poltergeist powered focus 

Does your users keyboard focus jump around, as if taken over by some vengeful spirit? Then you may be misusing the tabindex attribute. Avoid using this with positive values and make sure your DOM reflects the intended focus order, to give keyboard users a positive and accessible experience.

4. Mysterious flashing lights 

Flashing content can be distracting for any sighted user but can cause harm in some circumstances (people with photosensitive epilepsy for example). Avoid flashing content wherever possible, and if it cannot be avoided (for example, it may be a key component in a pre-recorded video), then let people know of its presence beforehand so they can decide if they want to watch.

5. Ghostly sounds and voices 

Media that automatically plays can be annoying for anybody, but particularly so for screen reader users who must contend with competing audio of their screen reader and your website audio. If you must use auto-playing media (and really, you shouldn't) ensure it stops after 3 seconds, and there is an easy way to disable it. 

6. Skeletons for good 

Just like we rely on our skeletons to provide a framework for our bodies to sit upon, web pages have a skeletal structure as well. You can help this skeleton take shape by using appropriate structural elements like headings, lists, and tables, all of which provide important behind-the-scenes support for the accessibility of pages. 

Further resources:

• ​​​​​Need help with creating an accessible website? Find out more about our digital accessibility services 
• Keep up to date with accessibility issues with the AbilityNet newsletter  
• Discover more accessibility and inclusive design training for Content and Designers 
• Find out about AbilityNet's free live webinars