The Dos and Don’ts of Website Accessibility

Katelyn Fletcher

Why Make Your Website Accessible?

Imagine you go through the whole process of creating a website. You’ve done research on your demographic, picked out colors, and loaded it with content. You’ve probably put a lot of thought into the whole process every step of the way. 

However, what if you were isolating a whole group of people from enjoying and utilizing your website? 

Usually, the goal of creating a website is to share something with your audience. However not being familiar with website accessibility can exclude people and overall make your website hard to use. 

1 in 5 people in the United States live with a disability. 

So it is vital to be familiar with the tools to make sure everyone can enjoy your website!

Why is Accessibility Important?

It is typically not anyone’s goal to create an inaccessible website, but according to the WebAim report on accessibility, most of the top 100,000 websites contain elements that make it difficult for people with disabilities to navigate. 

The ADA website lists multiple reasons why websites need to be accessible. 

  • Equal access to information
  • Living daily life
  • Access to goods, services, programs, and activities. 

Overall, websites should be available to everyone, not just able-bodied users. 

Accessibility Allows Different Paths to the Same Goal.

 A common misconception about accessibility is that it is somehow hard or will ruin the aesthetics of the website. These things are not remotely true though, however. 

If there’s one thing you should take away from reading this, it’s that web accessibility isn’t that hard to integrate with your processes, and most, if not all of these tips, should already be a part of your web design and web development best practices.

Web FX

Making a website accessible does not mean that anything needs to be cut out or sacrificed. It just means that there need to be alternative paths to receiving the information presented. 

There are many ways to make a website more accessible, but there are a few glaring problems that many websites get wrong.

Common Problems

Of the top 100,000 websites mentioned above, there are some common issues that many have in common. These problems are not difficult to solve, it just sometimes takes a little education and attention to detail. 

Some common problems include

  • Alt text errors (or poor descriptions)
  • Low color contrast
  • Poor understanding of heading elements
  • Empty links, labels, or buttons
  • Poor description of hyperlinks or tables. 

Most of these elements simply require a bit more education and can easily be fixed. 

Alt text

Although alt text is the most well-known aspect of making a website accessible, it is most often the most overlooked. 

It is a misconception that the alt-text is a description of the photograph. The alt-text actually serves to explain the purpose of the image. The context of the photograph is actually the most important part. 

Alt text should be short, and explain the “why” of the image. In fact, images that are purely for aesthetic purposes, should not even contain alt text. 

Additionally, hyperlinks without alternative texts are unhelpful. A hyperlink or a linked image should always explain where the link is going to lead, not just what the link says. 

Properly Using Headings and Titles

If you go to a website that has a very dense article, it is very likely that you might not read the entire thing. You might jump around and skim the article to find the parts that are most relevant to your interests. 

People who use screen readers can find it hard to navigate websites that are just large blocks of text with no organization. 

This is why creating descriptive headings and title tags is incredibly useful for making a website accessible.

Title tags (<title>) are the first thing that the screen reader will convey to the user. 

First Impressions are everything

This is something that we’ve always heard so why shouldn’t we apply this to building a website? The title tags will make the first impression of the page so it should be descriptive, concise, and helpful. 

 This applies to headings as well. Headings allow those using screen readers to be informed of the organization and content of the article. It allows for first impressions and the knowledge of where things are located. 

High Contrast Colors and Size

The colors of a website are what we associate with decoration. When designing a website we most often think of color in terms of color theory and aesthetics when in reality, picking high-contrast colors is a vital part of making an accessible website. 

High contrasting colors and correct sizing are not only for making your website “pop” but also for making sure your website can be viewed without difficulty.

 This is an easy fix with so many color checkers being made available online. 

Conclusion

Accessibility is not intended to create sacrifices to the overall vision of the website. Making a website accessible should not be burdensome, but a part of the process to ensure that your website can be available to your entire audience. 

Many of these common problems are very simple fixes.

If you want to make your website more accessible you should focus on actual accessibility as opposed to guidelines. Just because something complies with a set of guidelines, does not mean that it is accessible.

Education on what it means to be accessible is of to utmost importance There are always new tools and technologies coming out to make sure websites will be as accessible as ever. 


Links

https://accessibility.huit.harvard.edu/describe-content-images

https://www.tpgi.com/color-contrast-checker/

https://www.tpgi.com/ten-common-web-accessibility-issues/

https://www.ada.gov/resources/web-guidance/

This Post Has 8 Comments

  1. Hi Katelyn, your content is broken down well and the style of writing is conversational. I like that you highlighted common problems found on websites, and explained each of them. This was helpful, especially for the Alt-text sections, because I was unaware of what it was prior to reading. One suggestion I have to make that section more effective, would be to include an image to show the reader exactly what you are referring to. Additionally, I like how you mentioned common problems in relation to disabilities, because I think making a usable website for all populations is easily overlooked. I found a site that discusses how to make your website more effective, specifically for those who have a disability. I like how this website gives tips on HOW to effectively make a website more accessible for those with disabilities. It is always helpful to be given easy to follow tips on how to improve your writing for the web.

    Link:https://www.searchenginejournal.com/make-website-more-accessible/347450/#close

  2. Great post, Katelyn! It’s easy to understand and makes a potentially confusing topic feel manageable and accessible (no pun intended). Your discussion about using high-contrast color palettes got me thinking about what other color combinations could be used on a site besides white and black. I found a blog called “Veronica With Four Eyes” by a creator named Veronica, who is visually impaired. On her blog she shares practical tips and insights for living with visual impairments, and she also shares ways that companies can make their websites more accessible to individuals with visual impairments. The scheme of her blog is built to be an example of an accessible site. I found an article on her blog that discusses various color schemes that could be used, and she also discusses in further detail why a high-contrast color scheme is necessary for usability. https://veroniiiica.com/high-contrast-color-schemes-low-vision/

  3. Hello Katelyn! I loved the way that your blog discussed the way that making a website more accessible doesn’t necessarily need to sacrifice style or anything like that. I also really enjoyed how you listed a few of the common issues with website accessibility, and how to fix those problems. Something interesting I found in a website that I didn’t quite realize before reading about accessibility, but really struck me was the number of accessibility issues that need to be accounted for when creating and designing a website. This link has a few impairments that need to be looked at during the website creation process. One of the ones that I think hit closest to home for me was dyslexia, since a few people in my family have dyslexia. The things you learn about website accessibility!
    https://www.browserstack.com/guide/common-web-accessibility-issues

  4. Hey Katelyn! Your blog post was great to read. The information you gave was broken down into manageable chunks and each section was clearly labeled using headings and subheadings. If I were someone using this post to quickly get information on a singular common mistake of website accessibility, I’d be able to do so easily. I agree with how you mentioned that alt-text is most often overlooked, as I feel like we really don’t often see alt-text being used on many main websites. Instead, I mostly see it being used on social media added on from other users that are focused on making posts more accessible. When people think of alt text, I think the main users of alt text they think about are those who are visually impaired. I wondered if more users benefit from alt text. After some research, I found out that those with cognitive impairments also benefit from alt text since many images on a website can be distracting. Websites can have a feature to turn off images and this allows people to still know what those images were about!
    Here is the blog post with more information: https://www.levelaccess.com/blog/alt-text-for-accessibility/

  5. Hi Katelyn! Your blog was very helpful on informing me on accessibility tactics when web building. I personally did not know much on the strategies for making sites a welcoming place for everyone interested in using it. This is something so incredibly important that doesn’t get talked about enough. Especially when it comes to alt text. I believe this is a tool that most able-bodied individuals do not think about since they don’t have to use it on a daily basis. The contrast is also something that is so important. I learn about this in my document design class as well. Designing something readable is accomplished using these methods. You did a thorough job at explaining the importance of these elements, while also giving tips on how to implement them effectively. I found this article on more tips for writing the BEST alt text for your users.
    https://supercooldesign.co.uk/blog/how-to-write-good-alt-text
    Thank you so much!

  6. Hi, Katelyn. You did a great job summarizing how important it is to have your website’s design and code be accessible. Although, I was a bit surprised afterwards when I inspected your image’s code and found no alt-text. After all of our exercises this week, I was thinking about other problems on websites that could affect those with impairments, and I remembered an accessibility feature I scarcely see discussed: limiting motion on the webpage. I found an article from Medium that talks about why it’s important for motion to be accessible. In my opinion, it’s a very interesting read; it provides multiple ways one could reduce motion for their website, for their computer, or for a completely alternative web program. If anyone else is reading this comment, I highly suggest perusing this article.

    Link: https://medium.com/design-ibm/accessible-motion-why-its-essential-and-how-to-do-it-right-ff38afcbc7a9

  7. Hi Katelyn, I really enjoyed your blog post! Your discussion of the various types of usability testing is insightful and provides a great comprehensive overview. Your emphasis on the importance of web accessibility for individuals with disabilities is super important, and I like how you highlighted the need for a more inclusive online environment. The specific suggestions for improving website accessibility, such as using descriptive labels and testing keyboard-only navigation, really stuck out to me from your post. In terms of additional topics to explore, I wanted to take a closer look at the evolving technologies and tools available for accessibility testing that could be valuable for people seeking up-to-date solutions so I found this article: https://www.innocaption.com/recentnews/5-technological-innovations-that-are-improving-accessibility

  8. Katelyn, I enjoyed your post, it was well-written and organized. You kept text in digestible chunks with lists and quotes, it made your post one of the easiest to read. Your headings made sense in a timeline and outlined your post well. Detailing what accessibility is and why it is important makes it easy to read for new users who have no experience. Outlining the common problems and going into further depth was a good way to round it out, and finishing it out by reminding readers that it’s a simple fix that doesn’t take a huge amount of time will hopefully persuade them to follow your advice. I found a Website Accessibility guidelines website that definitely helped me. https://www.w3.org/WAI/standards-guidelines/wcag/

Leave a Reply

Close Menu