Website Accessibility: Useful Tips You Should Know!

At AccessIT, we want to raise awareness on the importance of online accessibility. But what exactly does online accessibility entail? There are many different platforms online that will have varying guidelines as well as tools and methods available. In this week's blog entry, I want to share with you key elements to accessible design for websites! Since last week we have already briefly covered the law and regulations for online accessibility, this week’s blog will focus on providing you with specific tools and methods that you can implement to create an accessible website.

---

Alt Text

When uploading images to your website, you should be adding alt text to assist those who cannot see the image. People who are blind or are visually impaired often use screen readers when on the web. These tools help narrate what is on the user's screen, including reading out the alt text for images (Peterson, 2016). Another great feature in having alt text on your website is in the case where the image fails to load for a user; your alt text can display the description so that they would still know what you are trying to show them (Moz Inc, 2021).

Every website creation tool will have its own method of allowing you to implement alt text, however, let me go over what you should look out for when writing it. You want to deliver your message as quickly as possible but also not too brief. Therefore, you must choose your words wisely. Try describing the colors, setting, items, and actions that you see. If the image is showing a recognizable public figure, include their name (Becker, 2021).

Here are examples:

Poorly written alt text: “Blonde girl in a gown”

Well written alt text: ”Billie Eilish posing at the 2021 Met Gala, wearing a peach colored gown”

Source:https://www.voguescandinavia.com/articles/all-the-looks-for-the-met-gala-2021

Poorly written alt text: “Man sitting on a chair”

Well written alt text: “Man sitting on a striped folding chair at the beach”

Source: https://unsplash.com/photos/tkM2wPNfe5I

---

Keyboard Navigation

Another important feature that will boost the accessibility of your website is keyboard navigation! Some users are keyboard dependent due to mobility disabilities, others might even use this feature just for preference. Keyboard navigation allows the user to move through the different parts of your website by pressing tab, and clicking with the SPACE bar or the ENTER key (Dolson, 2016). When building a website, you want to ensure that all parts are accessible with keyboard navigation including all buttons and links.

What brings this feature to the next level is ensuring that when pressing tab, the location the user is currently on is recognizable. While doing my research on keyboard navigation, I tested it out on different websites to see how it works. One website in particular had an almost invisible border around my current location which would be an accessibility issue. The user should not have to strain their eyes to see where they are on the page, nevermind the fact that those with visual impairment might not see it at all. Another website had a dark and bold border that was very easy for me to spot. This website definitely put a lot more thought and effort into making it user friendly.

---

Accessibility in Design

The overall design for your website must also be accessible. All your content should be easy to find and well organized. You can do this by including tabs which lead to different pages on your website, and having clear links. Additionally, it is important to put thought into your color choices. When choosing a color for a piece of text, make sure there is enough contrast between it and the background color, to ensure good readability. You can measure this with different tools such as Paciello Group Contrast Analyzer or Colorzilla (Breckley Web Access, n.d.).

Other components to consider for text are the size and typeface. It is especially important to consider the size for your body text, as the user will be reading it for a prolonged period of time, and you do not want their eyes to strain and get tired. Although there is no standard for font size on the web, it is recommended to use at least 16px for the body text (Austin, 2020). Another aspect to consider is the typeface. It is recommended to use a sans serif typeface on the web because it is easier to view at smaller sizes and our screens have a low resolution compared to how we see in real life. However, these days technology is rapidly evolving, so there is a debate on whether it really matters if you are using serif or sans serif fonts. Nonetheless, it is important for you to test it out in relation to your colors, images, and theme. Many people also prefer to choose sans serif because it is simpler and stands out no matter the size (Dvginteractive, 2017).

---

Accessibility is crucial in website design. Luckily, we have numerous resources available to us which can help in improving the accessibility of the content we create. I hope that you enjoyed reading this week’s blog on website accessibility, and that you learned about the importance of incorporating these elements into website design.

---

Sources:

Becker, B. (2021, July 12). Image alt text: What it is, how to write it, and why it matters to Seo. HubSpot Blog. Retrieved October 28, 2021, from https://blog.hubspot.com/marketing/image-alt-text.

Alt text for Images - Examples & 2021 best practices. Moz. (n.d.). Retrieved October 28, 2021, from https://moz.com/learn/seo/alt-text.

Peterson, A. (2016, December). How facebook is helping the blind 'see' pictures their friends share online. The Washington Post. Retrieved October 28, 2021, from https://www.washingtonpost.com/news/the-switch/wp/2016/04/05/how-facebook-is-helping-the-blind-see-pictures-their-friends-share-online/.

Dolson, J. C. (2016, March 30). Using keyboard-only navigation, for web accessibility. Practical Ecommerce. Retrieved October 28, 2021, from https://www.practicalecommerce.com/Using-Keyboard-only-Navigation-for-Web-Accessibility.

Austin, C. (2020, September 4). The best website font size, and how it affects UX and conversions. IMPACT Inbound Marketing Agency. Retrieved October 28, 2021, from https://www.impactplus.com/blog/best-font-size-for-website.

Serif vs Sans-Serif: How to increase your website’s readability by more than 50%. dvginteractive. (2017, April 26). Retrieved October 28, 2021, from https://www.dvginteractive.com/serif-vs-sans-serif-how-to-increase-your-websites-readability-by-more-than-50-2/.

Pearson, C. (2016, September 21). Typography on the web. Medium. Retrieved October 28, 2021, from https://medium.com/rareview/typography-on-the-web-4cd494d6b165.