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:?
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...