In today’s digital age, it’s more important than ever for organizations to have an accessible website. By making your website accessible, you’re opening your organization to a broader audience and increasing your potential member base. In addition, accessible websites are more manageable for search engines to find and rank, leading to more website traffic and higher search engine rankings. And, because accessible websites are designed with all users in mind, they tend to be more user-friendly overall. So, if you’re looking to give your organization’s website a boost, make sure your website is accessible to everyone.
Accessible websites are designed to be usable by everyone, regardless of their ability level. This includes alt text for images, descriptive links, and video captioning. By ensuring your website meets accessibility guidelines, you can ensure that everyone can enjoy your content. Fortunately, most web developers work with an accessibility mindset but often make common mistakes. These mistakes can be costly for organizations that want to maintain their web accessibility compliance. So be aware.
Depending on your audience, it’s best to assume accessibility requirements will be needed at all levels. From hearing, vision, and physical impairments to cognitive conditions like dyslexia – it’s important to test web pages for accessibility before they go live. At the end of this blog post, we provide a shortlist of tools we use. It will take time to test your website, and no one product provides a comprehensive set of testing tools, so we suggest focus groups with actual people to get an authentic hands-on experience.
What is web accessibility?
Currently, there are several types of accessibility standards, but the most common one is the Web Content Accessibility Guidelines (WCAG). WCAG is a set of guidelines that organizations can use to make their web content more accessible to people with disabilities. The guidelines are organized into three levels: A, AA, and AAA. Level A is the lowest level of accessibility and requires the least amount of effort to implement. Level AAA is the highest level of accessibility and requires the most effort to implement.
WCAG outlines four principles of web accessibility: perceivable, operable, understandable, and robust. Each guide has multiple guidelines and success criteria that must be met for a website to be considered compliant.
Perceivable
Perceivable refers to how easy it is for someone to see and hear the content on your website. This includes making sure text is large enough to read, providing alternative text for images, and using color to make it easy to see.
Operable
Operability refers to how easy it is for someone to use the website. This includes making sure links are easy to click on, using drop-down menus that are easy to navigate, and having a search function.
Understandable
Understandable refers to how easy it is for someone to understand the content on your website. This includes using clear and concise language, providing labels for form fields, and having a consistent layout throughout the website.
Robust
Robust refers to how easy it is for someone to access the content on your website. This includes making sure the website can be used with assistive technologies, such as screen readers, and that the website can be viewed in different browsers.
Why web accessibility matters
Making your website accessible is important because it ensures that all users can access and use your website. This is especially important for people with disabilities, who may not be able to use a website if it is not designed with web accessibility in mind. In addition to being the right thing to do, making your website accessible can also have some organizational benefits. For example, web accessibility can help you reach a larger audience, including people with disabilities, older adults, and people with limited internet access. Additionally, web accessibility can improve search engine optimization (SEO) and make it easier for people to find your website.
Web accessibility is also crucial from a legal perspective. In the United States, the Americans with Disabilities Act (ADA) prohibits discrimination against people with disabilities in many areas, including employment, education, and access to public places. The ADA also requires businesses with 15 or more employees to provide reasonable accommodations for people with disabilities. While the ADA does not explicitly mention web accessibility, several court cases have found that the ADA can be construed to websites as being “places of public accommodation.” If your website is not accessible, you could violate the ADA and open yourself to legal action.
- Section 508 of the United States Workforce Rehabilitation Act, another federal law, requires that all electronic and information technology developed, procured, maintained, or used by the government be accessible to persons with disabilities.
- Several other countries have laws similar to the ADA that require websites to be accessible. For example, in Europe, the European Union has adopted the Web Content Accessibility Guidelines (WCAG) as its standard for web accessibility.
How many people have disabilities?
According to a 2015 study from the Centers for Disease Control and Prevention (CDC), one in five Americans has a physical, mental, or emotional condition. The following are some of the key findings from a 2016 CDC report:
- 63% of adults have no disabilities
- 15% of adults have a vision impairment
- 10% of adults have hearing difficulties
- 10% of adults have some cognitive disability
How many disabled people go online?
According to a Pew Research poll, only about 46% of people with disabilities use a computer or smartphone to connect. This statistic would rise if accessibility improved.
The WCAG guidelines
Most websites are not compliant even with WCAG because it can be difficult and expensive to implement all guidelines. Since there are many moving parts to making a website accessible, it is important to first focus on the most important success criteria. The criteria of the WCAG guidelines that organizations should focus on include:
- Providing proper color contrast ratios
- Appropriate font sizing
- Hover-over and focus states for anything hyperlinked
- Using text versus text created with graphics
- Captions and transcripts for all media-based content
- Providing text alternatives for non-text content
- Including jump to top functionality
- More descriptive links (vs. Read More or Learn More)
- Offering help text on forms to better understand input fields
- Proper page titling
- Proper tagging for form elements such as input fields and buttons
- No content flashing more than three times per second
- Creating content that is easy to read and understand
- Make sure that web pages are usable with keyboard only
- Ensuring that web pages are compatible with assistive technologies
- Make sure any video content uses captions
Five Web Accessibility Best Practices that Every Website Should Include
When it comes to designing and building a website, there are many factors that need to be considered in order to ensure that it is accessible and usable by as wide a range of people as possible. This includes taking steps to make sure that the website uses simple, clean design principles, avoids overly-busy or garish visual elements, and features plenty of visual cues like contrast, text size adjustments, and a clear layout. Some of the most common web accessibility mistakes are easy to fix including:
#1 Providing text alternatives for non-text content
This is one of the most common accessibility mistakes we see. Non-text content includes images, videos, audio files, and Flash animations. If this type of content is not adequately labeled, people who are using screen readers will not be able to understand what it is.
To fix this issue, you need to provide text alternatives for all non-text content. This can be done in a few different ways, but the most common method is to use the “alt” attribute on HTML images. The “alt” attribute stands for alternative text and should be used to describe what is in the image.
It is important to remember that the purpose of alt text is to describe the content of an image, not to provide additional information. For example, if you have a picture of a cat that is black and white, the alt text should be “a black and white cat,” not “a black and white cat that is sleeping.”
If you have an image that is decorative or does not add any value to the page’s content, you can leave the alt attribute blank or use a single character like an asterisk. Doing this will tell screen readers to skip over the image and not try to describe it. It is also important to remember that alt text should be brief. If you need to provide a longer description, you can use the “longdesc” attribute or link to a separate page containing the description.
#2 Create content that is easy to read and understand
One of the most important things to remember when creating web content is that it should be easy to read and understand. This means using short, simple sentences and avoiding jargon. It also means breaking up your content into smaller paragraphs so that people can quickly skim it.
In addition to making sure your content is easy to read, you also need to make it easy to understand. This means using clear and concise language. It also means linking to other resources to provide more information on a topic. If you create content for a global audience, you also need to consider translations. Google Translate is a great tool that can help you quickly and easily translate your web content into multiple languages.
While it is important to create web content that is easy to read and understand, you also need to make sure it is accessible to people with disabilities. This means using clear and concise language and providing text alternatives for non-text content. You can also use headings and lists to help break up your content and make it easier to read. Screen readers will often allow people to navigate web pages by jumping from heading to heading, so it is important to use them wisely.
#3 Make sure that web pages are usable with keyboard only
Creating web pages that are usable with a keyboard only can be tricky. All links and form controls should be accessible using the Tab key. It also means that web pages should not rely on mouse hover effects for any critical content or functionality.
One way to make sure that web pages are usable with a keyboard only is to use the “tabindex” attribute. This attribute can be used on any element, and it allows you to specify the order in which the elements should be focusable. For example, if you have a link and a form control on a web page, you can use the “tabindex” attribute to ensure that the form control is focusable before the link.
Another way to make web pages keyboard accessible is to use JavaScript to add keyboard event handlers. These event handlers can provide custom functionality when users press a key on their keyboard. For example, you could use an event handler to move focus to the following form control when the Tab key is pressed.
#4 Ensure that web pages are compatible with assistive technologies
It is important to remember that not all web users will be using a standard web browser. Some users may be using assistive technologies, such as screen readers, speech recognition software, or Braille displays. When creating web pages, it is important to make sure that they are compatible with these technologies. This means using standard HTML markup and avoiding proprietary technologies.
Using assistive technologies is often an overlooked step when addressing web accessibility. It is important to test web pages using various assistive technologies to make sure that they are accessible. Screen readers, for example, can be used to read web page content aloud. They can also be used to navigate web pages by jumping from heading to heading or from link to link.
Web pages should also be tested using a variety of web browsers. Different web browsers can render web pages differently, so it is important to ensure that they are compatible with all major web browsers. In addition, different web browsers support different assistive technologies. For example, Internet Explorer supports the “longdesc” attribute, which allows you to provide a longer description of an image.
Lastly, it is also important to test web pages on various devices. This includes desktop computers, laptops, tablets, and smartphones. Different devices have different screen sizes and resolutions, so it is important to ensure that web pages are compatible with all major devices.
#5 Includes captions in all of your media content
Another important step to take when making your website accessible is to include captions in all of your media content. This includes videos, audio files, and images. Captions provide a text alternative for people who cannot view or hear the media content.
Including captions in media content is often overlooked, but it is a crucial step to take when making your website accessible. Captions provide a text alternative for people who cannot view or hear the media content.
There are a few different ways to include captions in media content.
- The first way is to use the “track” element. This element allows you to specify a caption file used by web browsers that support the feature.
- The second way is to use a third-party captioning service. These services provide caption files that can be used with any web browser.
- The third way is to create your captions. This option is only recommended for people who are experienced in creating captions.
If you’re using YouTube as your primary media platform, there’s an option when you upload a video to have YouTube autogenerate captions for your content. We suggest reviewing those captions before going live, as it’s not always the best at understanding everything you’re saying.
Making web accessibility part of your organization’s culture
Web accessibility should be part of your organization’s culture. Everyone from the CEO to entry-level employees should be aware of web accessibility and how it affects your organization. Additionally, web accessibility should be incorporated into your organization’s policies and procedures, if not already. This policy should outline your organization’s commitment to web accessibility and how you plan to achieve it.
By making web accessibility part of your organization’s culture, you can ensure that everyone is aware of the importance of accessibility. Additionally, you can ensure that your organization is taking steps to make its website accessible to everyone.
Takeaways
These five steps will help make your website more accessible for everyone, including those who rely on assistive technologies to interact with the web. By providing text alternatives for non-text content, creating easy-to-read and understand the content, making sure that pages are usable with a keyboard only, and ensuring compatibility with assistive technologies, you can make your website more inclusive for all visitors. Have you made your website more accessible yet? If not, give these tips a try and reach out to DJG if you would like us to do an audit of your current site or assist in developing a new website using these guidelines and best practices.
Resources and links to web resources on testing web accessibility best practices, ADA compliance, and WCAG guidelines.
- Testing – https://webaim.org/
- WCAG 2 Guidelines – https://www.w3.org/WAI/standards-guidelines/wcag/
- ADA Compliance – https://ada-compliance.com/
