Last month we covered the ways in which you can make your venues and performances more accessible to guests who have special needs, including sight and hearing limitations, mobility issues, and more. This month our focus is on making your website more inclusive.
The World Wide Web Consortium (commonly known as W3) created an extensive guide that helps ensure your website complies with international accessibility standards. Because the W3 guide is so detailed, we asked our graphic designer Sonia Hupfeld-Cousineau to help us identify some of the top-level things you can do to make your site open to as many visitors as possible.
Overall
First and foremost, make sure your website works with common types of assistive technologies that people use, like screen readers. These devices can read HTML (the code that makes up most web pages) and translate it to audio or display it as Braille.
You should also periodically test your website for accessibility; the W3 offers a list of software that is available to check compatibility and to evaluate your web content, especially for any plugins or scripts you’re using. If you have testers with disabilities, get their first-hand feedback on what works and what doesn’t.
Visual
For users with limited or no vision, there are several simple steps you can take, beginning with alt text and alt tags, which provide alternate text for an image if the image cannot be displayed. These tags, applicable for images, audio files, and even links, can be implemented into your HTML to provide detailed descriptions for screen reading software. For complex graphics, make sure your alt text is highly descriptive; use more than a single word. In addition to alt text, look closely at the content on your site, and make sure that any photos are in close proximity to the information users should know about.
Ensure the overall layout and flow of your website are conducive to visually impaired users. Text and other important elements of your site should be easily viewable at a 200% magnification and include a “skip navigation” option at the top. Otherwise, the screen reader will read every header element before diving into your content.
Forms can also be a challenge for screen readers, so make sure you have fields in a logical tab order. Use label elements in your text input fields (e.g., “your name here” so a screen reader catches it). If you’re providing anything as a PDF, remember that screen readers do not support that format. Consider offering an RTF (rich text format) or HTML version as an alternative.
And finally, think carefully about the way your site uses colors. Your site should have good color contrast (e.g., black and white, orange and blue) for users with limited vision, and consider users who may be colorblind. Make sure color is not used as the only visual means to convey information or indication, prompting a response, or distinguishing a visual element. For example, don’t ask a user to click either the red button or the green button without providing some textual cues or context.
Auditory
For hearing-impaired users, captioning is crucial if your site includes any audio or video. Captioning should be in sync with videos, and provide audio descriptions and transcripts where necessary. For example, when music is playing, offer a description of the music. Is it instrumental? What kind? If it has lyrics, what are they? If you want to take it a step further, follow Netflix’s great example: their closed captioning includes ambient sounds and other audio clues, like “door slams” or “police siren in the distance.”
Speaking of audio and video, it should go without saying that you should NEVER have sound or video on autoplay. Make sure your users have the ability to pause or turn it off altogether. This is an important courtesy to everyone visiting your site, and something that can be easily avoided.
Other Considerations
Lack of dexterity and other physical issues are often overlooked when designing a website. Not everyone uses a mouse to navigate, so make sure your site can be explored using a keyboard (e.g., Spacebar = select, Tab=move). This is especially important within forms.
And while the days of Geocities are long gone, please avoid the temptation to use flashing images or strobe effects; these can induce seizures in users with neurological challenges.
Your website isn’t going to be 100% compliant with accessibility guidelines overnight, but if you haven’t thought about it before there’s never a bad time to start. The beauty of websites is that they are fluid and easy to modify. Start making incremental changes now and before you know it your site will be fully accessible to anyone.
