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 A ghost figure carved in a pumpkin

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 Skeleton with glasses and headphones using a computer

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!

Further resources:

Learn from leaders in all sectors about accessibility, branding, neurodiversity, maturity models, creative leadership, accessibility in the metaverse, and much more at Europe’s largest gathering of accessibility and inclusion professionals and their allies: TechShare Pro 2022.