What is website accessibility and why is it important?
Today, May 18th, 2023 is Global Accessibility Awareness Day! I want to preface this blog post by stating that I am not an accessibility expert, nor do I have the proper legal qualifications to provide legal advice, but I have been dedicating a lot of my time recently to learn about this important matter and how I can better serve my clients. Which, in turn, will better serve our communities.
So, what is website accessibility?
Accessibility is a crucial aspect of web design that aims to make online content usable and accessible to everyone, regardless of their abilities or disabilities. By designing with accessibility in mind, we design and develop websites in a way that allows people with disabilities to perceive, navigate, interact with, and contribute to the web. Disabilities can include visual, auditory, motor, cognitive, or neurological impairments. It's important for all of us to be aware of website accessibility and take steps to ensure inclusivity, and by adhering to accessibility guidelines, we can create an inclusive online experience for all users.
Not only does website accessibility enhance user experience for all users, including those without disabilities, it promotes equal access to information, services and opportunities for those individuals with a wide-range of disabilities. Moreover, accessible websites comply with legal requirements, such as the Americans with Disabilities Act (ADA) in the United States and similar legislation in other countries.
Simple Steps for Website Accessibility
While achieving full accessibility may require expert assistance, there are several straightforward steps website owners can take to enhance accessibility:
✧ Use descriptive alt text for images
Adding alternative text (alt text) to images allows screen readers to describe the images to visually impaired users. This means, if a visitor cannot see an image that’s on the screen, their screen readers will read the alt text that’s attached to the image so the visitors understand what is on the page. Adding alt text is also great for SEO, and opportunity to add important keywords. However, best practice for adding alt text is that it should be descriptive of the image itself in a comprehensive sentence format, not a place to keyword stuff.
Squarespace makes adding alt text to your images very easy! In the screen shot below, you’ll see that if you click to edit an image block, there’s a field right on the Content tab labeled “Image Alt Text”. Squarespace has this great article that explains how to add alt text to images, including best practices to follow such as:
Be descriptive and helpful. How would you describe this image to someone who couldn't see it?
Keep the text short, typically twelve words or fewer.
Write in real sentences; don't use hyphens to separate words.
You can omit words like "the" and "a," and terms like "photo" or "picture." For example, instead of a picture of a green vase, use green vase.
✧ Use clear and concise headings
Properly structured headings help users navigate the website easily, especially those using screen readers or assistive technologies. When creating headings, it is important to provide concise and specific summaries of each section's main point or objective. Steer clear of using generic or vague headings like "Introduction" or "More Information," as they fail to communicate sufficient information to users. Opt for headings that effectively capture the core concept or question addressed in each section, such as "Meet our Team of Web Designers" or "Why is it Important to Hire a Professional Web Designer." Additionally, aim to keep your headings brief and straightforward, preferably limiting them to no more than 10 words.
✧ ENSURE COLOR CONTRAST
Color contrast is a crucial aspect of website accessibility that ensures text and visual elements are easily distinguishable by users with various visual impairments. It refers to the difference in luminance or brightness between the foreground (text or graphic) and the background on which it appears. Sufficient color contrast enhances readability and legibility, allowing users to perceive and comprehend the content more effectively.
To ensure your colors are web accessible and meet the required contrast ratios, consider the following guidelines:
Contrast Ratio: The Web Content Accessibility Guidelines (WCAG) provide specific contrast ratio recommendations. For regular text (body text), a minimum contrast ratio of 4.5:1 is recommended, while larger or bold text requires a contrast ratio of at least 3:1. This ratio ensures enough differentiation between the text and background for individuals with visual impairments.
Color Contrast Checkers: Utilize online color contrast checking tools or browser extensions specifically designed to evaluate color contrast ratios. These tools analyze the color values of your text and background and provide feedback on whether they meet the WCAG guidelines. Examples of such tools include the WebAIM Contrast Checker, Colour Contrast Analyzer, and Contrast Ratio.
Text and Background Colors: Choose text and background colors that provide a clear contrast. For example, avoid using light gray text on a white background or dark blue text on a black background, as these combinations result in low contrast. Opt for combinations like black text on a white background or white text on a dark background for optimal legibility.
✧ Provide captions and transcripts for multimedia content
Including captions for videos and transcripts for audio content ensures accessibility for users who are deaf or hard of hearing. Captions provide a text version of spoken words, along with any sounds that are important to understanding the content, so people who can’t hear can comprehend the information.
While the process of creating captions and transcripts for video content can be time consuming, it is recommended to plan ahead and create the transcript at the beginning of the production process, rather than the transcript becoming an after thought.
✧ Add the FREE UserWay Accessibility Widget to your Website
The UserWay Accessibility Widget is a plugin that can be installed on websites to enhance accessibility features and make the site more user-friendly for people with disabilities. The widget provides various accessibility options and tools that users can customize according to their needs. The UserWay Accessibility Widget offers features such as text resizing, color contrast adjustments, screen reader optimization, keyboard navigation, and more.
Here are the general steps to install the UserWay Accessibility Widget on your website:
Go to the UserWay website: Visit the UserWay website at https://userway.org/ and click on the "Start Free Trial" button.
Provide your name, email, and website URL.
While the system analyzes your site, look for the “FREE: Looking for the free widget? Get it here.”, and click on that box.
Follow the installation instructions: UserWay provides detailed installation instructions for each supported platform, including Squarespace. Follow the instructions specific to your website platform to install the accessibility widget. This will involve adding a code snippet or plugin to your website, depending on the platform.
Customize accessibility features: Once the UserWay Accessibility Widget is installed on your website, you can customize the accessibility features according to your preferences. UserWay provides an easy-to-use dashboard where you can configure settings such as text resizing, color contrast, keyboard navigation, and more.
Test accessibility: After installation and customization, it's important to thoroughly test the accessibility features of your website to ensure they are functioning correctly and providing a better user experience for people with disabilities.
Update your privacy policy: If you are collecting any user data through the UserWay Accessibility Widget, make sure to update your website's privacy policy to include information about the data that may be collected, how it is used, and how it is protected, in compliance with applicable privacy laws.
It's always a good practice to consult with your website developer or a qualified professional if you have any questions or concerns about installing and configuring the UserWay Accessibility Widget or other accessibility tools on your website.
Responsibility for Website Accessibility
Ultimately, it is the website owner’s responsibility to ensure their website is accessible. However, developers do share some of the responsibility and should make sure they educate the website owners on general guidelines. It's important for businesses, organizations, and individuals to recognize the impact their websites have on the digital experiences of people with disabilities. By prioritizing accessibility from the start, we can create a more inclusive online environment.
Website accessibility is not a topic reserved for experts alone; it's something we should all be aware of and actively address. By designing websites with accessibility in mind, we contribute to a more inclusive online community. While these simple steps provide a starting point, there are numerous resources available to delve deeper into the subject and ensure that our websites are truly accessible to all.
Remember, even small changes can have a significant impact on the experience of users with disabilities. Let's work together to make the web accessible to everyone.
