Website accessibility is a hot topic right now in the web development industry — and for very good reason. The Internet is a worldwide institution, but there is a percentage of the population that is cut off from a large portion of the sites out there due to disability.
The sad truth is that if website owners would put forth a small amount of effort, these people would have access to their sites and could enjoy more of the internet.
When we discuss accessibility in the context of websites, it means making sure that people with disabilities are able to access your site and understand the information presented.
These disabilities can be audio, visual, cognitive, and physical. Websites that are not created with accessibility are cutting out about 15% of the population — that is a large percentage of users who can (and rightfully should be able to) benefit from your content or learn about your business and forge meaningful relationships with you and your brand.
So let’s dive deeper into why accessibility is something you should be thinking about and how you can make adjustments to make your site more accessible.
Why Accessibility is Important
The Internet is an ever-growing resource for almost every industry. From government institutions to health care, the number of people using websites to conduct research, book appointments, and purchase items is growing exponentially.
When COVID-19 hit, many companies started offering a wide range of services completely online. This shift from physical to virtual left a lot of people with disabilities unable to access these businesses altogether, simply because their websites were not accessible.
The American’s with Disabilities Act (ADA) prohibits discrimination based on physical and cognitive disability. This act extends to websites and other web services.
While the ADA does not explicitly identify any criteria for web accessibility, there are still generally accepted guidelines to follow to create an accessible website.
Even without specific criteria or regulations to enforce web accessibility, ADA advocates have filed class-action lawsuits against companies who do not comply with accessibility standards. While most of these cases are settled out of court, it’s still a concern for your website and another factor that shows just how important accessibility in web design is in 2021 and beyond..
The World Wide Web Consortium (W3C) created Web Accessibility Content Guidelines (WCAG) in 2008 to create a single standard for web content to meet the needs of individuals who have disabilities that prevent them from accessing content on websites.
The WCAG updates accessibility guidelines consistently, updating them approximately every ten years to meet the needs of persons with disabilities.
The most recent WCAG guidelines (WCAG 2.2) were published in 2021. It is still a work in progress, but the previous guidelines are still in use.
You can still meet the accessibility guidelines using the previous iteration created in 2018 (WCAG 2.1). For specific information on WCAG guidelines, W3C has clearly outlined them on the W3C website.
The WCAG identifies four primary accessibility standards to meet when creating a website.
- Perception – You must make sure people can see or hear your content.
- Operation — You must allow viewers to access your content by typing or speaking
- Understandability — You must use language that is clear and simple
- Robust — You must take steps to provide content that can be accessed by a variety of assistive technologies (screen readers, for example)
9 Ways to Make Your Site More Accessible
The WCAG guidelines can feel overwhelming and challenging to meet. However, there are a few ways you can begin without getting lost down a rabbit hole of technical jargon and stress. We’re going to walk you through 9 things you can do to your site to improve your accessibility and reach a larger audience.
If you’re using any form of video or narration on your website, add closed captioning. There are platforms such as YouTube that provide automatic captioning. If your video or narration is in a different format, there are free software options to add them.
There are six different headers to use, but not all screen readers can map the headers correctly. Applying headers in a hierarchical method (such as H1, H2, H3, and so on) helps a screen reader scan the document and find essential information. You shouldn’t need to use more than H1, H2 and H3 to organize your website’s sections in most circumstances.
3. Add “ALT” Tags to Images
ALT tags refer to the alternative text on an image. When added to images, a screen reader picks up on the description of an image, rather than just reading the image URL. This allows viewers with vision disabilities to know what the image is and what it is about, providing context for the visitor.
4. Provide a Way to Pause Video/Animation
Neurological conditions such as epilepsy make a person sensitive to flashing or quickly moving animations and videos. Providing a quick way to pause these elements on your website allows for safe viewing. It may also be better to skip these elements altogether to eliminate distractions from your content.
5. Tab Navigation
A visually and physically impaired individual may not be able to use a mouse to navigate your site. To help viewers navigate your site, you can use CSS commands to allow for the tab key and use the Enter key to “click” on buttons. Many modern browsers already do this by default, but using CSS code ensures tab navigation will work on any browser.
6. Color Contrast
When creating your website, it’s essential to pay attention to the colors you use. Not only for those who are color blind, but there are specific colors that are more readable than others, especially when paired together. There are free tools online that you can use to analyze your website’s colors to make sure that all your content is readable for anyone with vision issues.
For those who are color blind, make sure you don’t put text or numbers in or over images. Adding ALT text to these images will help, but it’s a general rule to avoid text and numbers in or on images.
7. ARIA Attributes
8. <table> Tags
Using the <table> tag in your HTML for anything other than a table can inhibit a screen reader’s ability to read your website correctly when comparing data or features. Any additional information should be in a different format.
9. Use the Title Tag
Using the Title Tag in your HTML allows screen readers to find the web site body. You don’t have to put much within this tag, just a small snippet of what the page is about so a screen reader can better describe the page.
Where to Learn More
Connecting you with the products, lessons, & strategy to help push your business forward, The Admin Bar is your WordPress Community. Check out the Podcast, join the community today, and get up to speed with the WordPress Owner’s Manual to learn how to communicate the benefits of your care plan and help your clients see the value in your service.