Accessibility is important to any website trying to reach a large number of users. All too often, frequently visited websites fail to comply with accessibility standards, or attempt to do so in ways that only makes it harder for disabled users to quickly get the information they need.
Lack of Accessibility
Accessibility options are often either broken or outright missing on many websites. In a 2022 report on accessibility of the top 1,000,000 web pages, WebAIM.org (standing for Web Accessibility in Mind) found over 50,000,000 accessibility errors, with an average 50.8 errors per page. These errors included:
- Low contrast text
- Missing alternative text for images
- Empty links and buttons
- Missing form input labels
- Missing document language
The same study found that home pages were also becoming more complex, with the amount of elements per page increasing 22% over the last 3 years. This complexity makes it far more difficult to locate information quickly and effectively.
Links and skip links also often posed problems. 18% of the tested pages had ambiguous link wording, such as “click here” or “continue”. 14% of the pages had skip links, but one out of every eleven “skip links” were broken, either inaccessible or non-functioning.
On average, the WebAIM.org study found that government and science websites were more likely to have less errors than the average homepage. Webpages focusing on arts and entertainment or travel, however, ranked lower, with more errors than most homepages.
It’s clear that accessibility is still an issue for many websites. But there are ways you can make a website more usable for everyone.
10 Tips for Making Your Website Accessible
While they don’t cover everything, here are some measures that can be taken to make your website easier to use for disabled visitors.
Tip 1: Make Your Title Attributes Meaningful
Title attributes are like short summaries for the destination of a hyperlink that a user is clicking on. If a title attribute is the same as the displayed link, it will become redundant to users with screen readers. A better title describes where the link is going to lead the reader.
Tip 2: Put Important Interactive Elements Near the Top
Have you ever been frustrated by how long it’s taken you to scroll or hover to an important link or element on a webpage? If you have limited or no hand functions, you’re even more familiar with this frustration. Pressing the tab key over and over gets annoying, and fast, especially when many elements are involved. To avoid this, place important elements near the top of a web page. Almost anyone is frustrated by having to scroll or hunt for important elements, so putting them at the top is a good option for everyone.
Tip 3: Don’t Start Title Attributes With the Same Text
Users with screen readers often rely on title attributes to find links. If title attributes begin with the same text, search functions used by screen readers won’t function as well.
Tip 4: Use Headings, the Right Way
When used correctly, heading tags allow users with screen readers to immediately go to the sections they’re interested in. If you neglect to use headings, it may become very difficult for screen reader users to quickly find information on your webpage.
Tip 5: Make Sure Your Titles are Meaningful
Right away, a user with a screen reader will encounter the text between your title tags. Having them all be the same makes navigating your website difficult for anyone who needs them. It’ll be hard for them to determine what page they’re on, or if the link they clicked took them to a new page or not. Keep your page titles concise and meaningful. This article by the WebFX team provides some examples of good titles, such as:
<head> <title>About Us – Our Store</title> </head>
<head> <title>All Articles: Our Store</title> </head>
<head> <title>Our Store: Home</title> </head>
Tip 6: Skip Navigation
Skip navigation makes it possible for users with limited scrolling ability or screen readers to skip long lists of links. Skip navigation is a link at the top of your webpage that takes the user directly to the content section. While you can hide it using CSS, this prevents users with limited mouse movement from using it easily. This article by WebAIM goes in depth about the use of skip navigation.
Tip 7: Labels on Form Elements
Make sure to label input for forms with meaningful and descriptive text. It should be clear to the user what they need to provide, such as words to search in a search engine. This is important with all forms.
Tip 8: Testing Your Website Without CSS and JavaScript
Disabling CSS and JavaScript is a simple way to test your website for accessibility. CSS allows creators to position elements regardless of where they actually are in the website’s document object model. JavaScript, meanwhile, allows you to manipulate elements by hiding or removing them. Removing both of these lets you see how accessible your website really is, and how organized your webpages are.
Tip 9: Try Using Assistive Technologies Yourself
Sometimes the best way to test is to actually put yourself in the shoes of the people with assistive technologies. WebAnywhere allows you to test a screen reader. Trying to read your own webpage is also helpful, allowing you to see if your colors do not contrast well, or if the webpage has other visual issues. This article also provides tools that you can use to test your website’s accessibility.
Tip 10: Accessibility Doesn’t Cost You the Overall User Experience
Many people have the misconception that by making their websites accessible, they have to sacrifice elements for the rest of their users. This is fundamentally not true. Accessibility doesn’t bar you from using certain features. Instead, it’s more about providing alternatives to the features that don’t work for or are difficult to use for disabled visitors.
Accessible Forms
Forms also need to be easy to understand and fill out. For example, don’t use placeholder text (such as a name, phone number, etc.) as a label. See the examples below, courtesy of Tyler Hawkins, a senior software engineer.
Hawkins has an article on accessible forms with many more examples of what to do, and what to avoid.
WCAG 2.1 Guidelines
WCAG stands for Web Content Accessibility Guidelines. It’s used as a standard for accessibility on websites. Its levels range from A to AAA, with A being the lowest level of conformance to obtain, while AAA is the highest level. It should be noted that AAA is not always what you should aim for. AA is recommended for most websites because not all web content can conform to the AAA standards. This article by the C2 Group explains these guidelines in depth, with examples included.
Accessibility, Out of Control
It’s entirely possible for well meaning website creators to let accessibility get out of hand.
Example: Alternative, or “alt”, text can run into this problem. Alternative text needs to convey the content and the functionality of an image. It shouldn’t just be a description such as “a picture of a sunflower”.
Another example: An overabundance of skip navigation links. Only one is actually needed. Any more than that is unnecessary.
These are just some of the issues that will inconvenience anyone needing to use your accessibility features. If accessibility isn’t done right, then it becomes annoying or obstructive to users, regardless of intent. WebAIM provides examples of how accessibility can get out of control, and how to avoid your own website becoming harder to use.
Accessibility and Legal Cases
Lawsuits can and will be filed against companies for a lack of accessibility. For example, San Francisco’s LightHouse for the Blind and Visually Impaired filed a lawsuit against ADP, a payroll processing and HR company, due to the lack of accessibility on its mobile app and website. These lawsuits represent a need for accessibility to be taken seriously. It’s important that you, as a website designer, keep accessibility in mind.
Conclusion
Regardless of how big or small your website is, accessibility is important. Many disabled users face a lack of accessibility online. While it’s vital that your accessibility doesn’t run wild and become difficult to use instead, it’s still necessary to take the steps to evaluate your website and make sure that it works for everyone who might need or want to use it. Accessibility doesn’t mean sacrificing the rest of the user experience. It simply provides more paths to the same experience.
Hanna Z
18 Oct 2022Hi Al! I really liked how you structured your blog this week. The issue of inaccessible websites is one that I don’t think people bring up enough. I like how you addressed that right away at the beginning of your blog, and then followed with your tips for how the reader can make their own website more accessible. Using actual statistics really adds to the ethos of your argument so I am glad that you included those. I have experience writing alt text for images at my internship, and like you mentioned, it can be pretty easy to get out-of-hand with the descriptions. I found this article that helps give tips for how to write those descriptions: https://supercooldesign.co.uk/blog/how-to-write-good-alt-text
Reilly L
19 Oct 2022Hi Al! I really loved your blog this week. Website accessibility is extremely important and not often talked about. I really like the way you laid out the steps for creating an accessible website and addressed the misconception that an accessible website diminishes the user experience. Tip nine was the most helpful to me because I know that when we make our websites for this class, testing the assessability will be a great way to test the usability. Here is a link to an article I found very helpful about website assessability https://blog.hubspot.com/website/web-accessibility
Ally B
18 Oct 2022Hi Al. Wow! I’m shocked that there were over 50 million accessibility errors. That’s disheartening to hear, and I’m aware that I’m lucky to have not had to think about website accessibility before now. I really liked that you chose to go into depth about tips for making a website more accessible, rather than writing about the errors. I appreciated tip 4 about headings and will be sure to include that in my website. It’s incredible how simple and easy these tips can be to make websites accessible for all, yet it is still such a problem. I found this article called “9 Ways You Can Make Your Website More Accessible,” https://www.searchenginejournal.com/make-website-more-accessible/347450/#close
Jean W
19 Oct 2022Hi Al,
I found the photos you chose to help explain your topic helpful and valuable to your blog post. I also liked how you listed the most common accessibility errors in the beginning of your post. It is probably the most important information and gives the reader what we should know right away, instead of having to skim too much to find it. I found this article “10 Examples of ADA Compliant Accessible Web Design” (https://www.dbswebsite.com/blog/ada-compliance-starts-with-accessible-design/) which gives examples of both ADA compliant web designs and non-complaint designs in relation to many of the errors that you mentioned. For example, low contrast text is a common error, and this article gives examples of both proper contrast ratios and images that are not accessible for the color blind.
Jared S
19 Oct 2022Hey Al, thanks for the great article! I found the information really reinforced what we’ve been learning in class and it even gave me some new insights on website accessibility. The part I found the most helpful was the tip about using assistive technologies myself! It’s not something I would immediately think about but it makes perfect sense to use the technology that you’re designing for. I think accessibility in general would improve if more people followed that rule. An article on the government website for digital technologies further expands on how people can test website accessibility. https://digital.gov/resources/how-test-websites-for-accessibility/?dg
James H
20 Oct 2022I loved your blog, Al. I think this did a great job of explaining why website accessibility is important, the best ways to make your website accessible, and the legal standard for accessibility. These are all great things to know when making our own website. I also like that you put the errors in a list. This helped me digest the information as I was reading. It also made it stand out. That was a great time to use a list. I also like the examples that you gave about using descriptive titles. To add to that discussion I found an article from Indiana University that discussed the topic. https://accessibility.iu.edu/creating-content/web-content/titles.html
Eleanor L
20 Oct 2022I found this article (and all the other ones we read this week as well) really interesting. I truly had no idea the depth to which a website must be redesigned and re-worked if it was originally created without accessibility in mind. I’m really noticing this as I work on updating and improving a website for my internship – since they didn’t consider accessibility when they originally designed the site, it almost feels like it would be easier to start over from scratch. While reading your article I was intrigued by the idea of skip navigation links, so I found this https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html which really gets into how to create and implement skip navigation links that are successful and effective by W3C standards.
Kenny B
20 Oct 2022This is a really interesting article to read! It does a really good job explaining the idea of accessibility to the reader, and exploring some ways to make a website better for those with disabilities. The section I found particularly intriguing are the ten tips to make your site more accessible, and the Accessibility out of control section. The first one is excellent for discovering how you can change your site for the better for those with disabilities. While the latter one is great at explaining how sometimes a lot of accessibility for websites is too much accessibility, and can be even more confusing than it was before.
Aiden P
20 Oct 2022Hi, Al! Your blog was very informative and eye-opening. I’m shocked that they found over 50 million accessibility errors in the top million web pages, in 2022 alone. With an average of 50.8 errors per page, that means almost all (if not all) pages contained errors. You would think that there would be way fewer errors with the progressive innovation and technology we have today. This is definitely a serious issue that needs to be addressed. I agree that it’s crucial for all web designers and developers to keep accessibility in mind when creating a website, and they should do so from the very beginning, so as to not create a huge hassle later on in the development process. Also, I really liked how you included alt text beneath most of the images featured in the article, as a good example.
Bruna N
8 Nov 2022Hey Al!
I really enjoyed reading your blog. Accessibility is obviously a big issue just not in regular life but in many websites and applications. It’s crucial to not disregard this since we live in a digital age. I was shocked to read about the report that showed that there were over 50 million accessibility errors. The section where you discussed tips for improving accessibility was organized very efficiently, I thought. Here’s a website I found that’s an accessibility checklist: https://www.dotcms.com/blog/post/website-accessibility-checklist-10-steps-towards-website-compliance