Banish common web accessibility horrors this Halloween
Skeleton with glasses sitting in a chair positioned in front of a laptop. Text displays "Banish common web accessibility horrors this Halloween."

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. 

Looking to learn more about accessible web development and design? Join our affordable, practical courses: 

Accessibility for developers - JavaScript and SPA Considerations 

Accessibility for developers - ARIA and the Accessibility Tree

Accessibility for designers

No tricks, only treats… Don't forget to use your fang-tastic discount code AbilityNetTraining10 to get 10% off any upcoming 2022 AbilityNet online training course!

Connect with AbilityNet

We hope this article on common web accessibility horrors is useful to you. Please share the article and help banish common web accessibility horrors this Halloween.

Be sure to reach out if you have questions about digital accessibility and check out the range of Accessibility Services AbilityNet offer.

Or visit the AbilityNet website and discover our range of free resources.

Thank you again for reading and subscribing! We will be back soon with more updates and news on accessibility and inclusion...


To view or add a comment, sign in

Insights from the community

Others also viewed

Explore topics