Week 8: The importance of web accessibility and how to incorporate it into your website


Web Accessibility (Developer Circles Lagos)

One of the most important parts of designing a website is making sure that it’s accessible to all. But, this is also often the thing that is most overlooked. Many web designers forget to create a website that includes things that will help those with disabilities comprehend the content freely, making the website accessible to all users.

But, making your website accessible is not as difficult as it may seem! There are many ways that you can make your website more accessible. Along with this, there’s a set of guidelines that you can follow to make sure that you’re taking all types of users into consideration.

What is accessibility?

According to Developer Circles Lagos, accessibility can be defined as the ability of everyone regardless of their condition to have access to something. This definition of accessibility can be applied to a wide range of things, including transportation systems, buildings, or even the internet.

What is web accessibility?

So, then what is web accessibility? According to Web FX, web accessibility focuses on making every website on the internet accessible to everyone. This may seem like a simple concept, but when designing websites, people often forget to take those who experience disabilities into account. This can include those with visual, cognitive, physical, or auditory disabilities. At first glance, this may not seem like a large portion of a website’s users, but one in five people in the U.S. lives with a disability, which emphasizes how important it is to make sure that they are receiving equal access to resources online.

Why incorporate web accessibility into your website? 

So, why should you incorporate web accessibility into your website? Well, according to UNC Greensboro, there are three main reasons that website accessibility is important to incorporate into your website. 

It’s inclusive and provides equal access to everyone

To start, it allows everyone, including those with disabilities, to access information on the web. This may not seem like a big problem, but, according to WebAIM, users with disabilities expect to encounter errors on 1 in every 17 home page elements with which they engage. And, as mentioned previously, about one in five in the U.S. lives with a disability, making this large number of people who may be encountering errors on each website, limiting their access to important resources.

It promotes usability

Creating a website that’s accessible to all can also enhance the usability of the resource for users, which can result in a better experience overall. In other words, web content that meets the requirements of accessibility is more likely to be more user-friendly for everyone. Even those without disabilities can benefit from an accessible design. For example, many people may use closed captioning on videos that they’re watching when they’re in an environment that’s too loud.

Other examples of this include adjusting screen brightness, reading a transcript of a presentation, or using your keyboard to navigate through websites when your mouse may not be functioning properly. All of these aspects are important for providing an accessible website, but can also play a part in promoting usability for all users. And, by making the website more user-friendly, you can also increase the number of users who may visit your website.

It’s the right thing to do

Accessibility not only allows for everyone to access the information that they need, but it also allows for people with disabilities to participate in our society. This is why, as Essential Accessibility says, you should want to create an experience that is possible for everyone and is in compliance with the Americans with Disabilities Act (ADA).

And, although the ADA doesn’t have the authority to enforce the accessibility of websites, it has expanded in recent years to technology. According to TechCrunch+, the ADA is working towards expanding the accessibility that’s required of technology. Originally, this act only applied to things like government resources and buildings. So, although there isn’t a set law to ensure that these guidelines be considered by all web users, following these guidelines is the right thing to do.

How to make sure you’re creating an accessible website

So, you may be wondering, how can I make my website more accessible to all types of users? The answer falls in the WCAG guidelines. As The C2 Group explains, these guidelines have the goal of providing a standard for the accessibility of web content that meets the needs of all users. 

These guidelines can be used as a tool for anyone who is creating a website and offer guidance on how to determine if a page is inaccessible. The WCAG guidelines do not verify whether a webpage is accessible or not. But, these guidelines support all web users and can be used to incorporate more accessibility into your website. These guidelines include ways to help users with cognitive, language, or learning disabilities and low vision. Although, the guidelines shouldn’t be taken too literally because they may make the accessibility of a website suffer.

To give more detail into what the WCAG guidelines entail, you first need to know how the guidelines are categorized. There are 3 different categories, also known as conformance levels, which are named Level A, Level AA, and Level AAA. 

  • Level A is the lowest and easiest level, which means that your website doesn’t acheive accessibility.
  • Level AA is the mid-range level and is the recommended level of conformance for any website.
  • Level AAA is the hardest and highest level of conformance that a website can obtain. It’s not recommended to strive for Level AAA, since it’s impossible to satisfy for some types of content.

Typically, WCAG sorts its guidelines into 4 different categories. Each category covers a different aspect of accessibility that should be taken into consideration. These categories include perceivable, operable, understandable, and robust. 

  • Perceivable: Are all users able to perceive your content? This includes providing text alternatives for audio and video content and vice versa.
  • Operable: Are all users able to operate your website? Many users with disabilities use the keyboard to navigate through websites. So, your website should account for this, along with forgiving users for mistakes and offering options to retract or correct information.
  • Understandable: Do the users understand your website? This takes into consideration the interactive elements of your website, such as menus, icons, and links. These elements should all be able to help users to their destination.
  • Robust: Are all users able to access your website from any device, browser, or platform? 

Tips for creating an accessible website

Now that you’ve learned more about the WCAG guidelines, you can apply techniques that align with these guidelines in order to make your website more accessible. The following tips are meant to serve as suggestions for things that will make a website more accessible.

Include Alt Text

According to WebAIM, alternative text (alt text) serves the purpose of allowing screen readers to see content in the form of words instead of images, to be seen in place of an image if the image isn’t loading, or provide a meaning for images that can be read by search engines. Alt text must explain the content and function of the images so that the user is able to fully understand.

For example, when showing users complex images, such as charts or tables, the alternative text should include a descriptive summary of the data. An example of an appropriate alternative text for a graph can be seen underneath the image of the graph below.

Chart Example (WebAIM)

Along with this, “pretty images”, or images that don’t add to the content should be excluded from alt text since they don’t add any meaning for the screen reader. An example of a pretty image would be a stock photo of a woman smiling, which can be seen in the example below.

Smiling Lady (WebAIM)

Use meaningful text attributes

Title attributes can be thought of as short summaries to describe where the hyperlink is planning to take the user. You should not be making the title attribute the same as the link text. This is because it’s redundant to screen readers. For example, you should not have a title attribute that looks like this:

<a href=”portfolio.html” title =”Portfolio”>Portfolio</a>

Instead, it should say something like:

<a href=” portfolio.html” title=”Some artwork of the artist”>Portfolio</a>

Use headings correctly

Headings are important for a webpage because they allow the reader to skip to the sections that they’re most interested in. But, you need to make sure that you’re using them correctly in order for the reader to be able to navigate as easily as possible. This can be done through using an <h2> after an <h1>, denoting the sections into subsections. This will make your website easier to navigate and therefore more accessible.

Use skip navigation

Skip navigation allows people that are screen reading or who cannot use their mouse to skip long lists of links. This is usually formatted as a link at the top of a webpage that repositions your page to the content section after it’s clicked. This helps the user to navigate through more quickly.

Forms

When it comes to incorporating forms on your website, there are many ways that you can ensure that they are accessible to all users. Here are a few ways that you can do so.

  • Every element should be reachable by the keyboard: This is one of the most important usability elements for those filling out a form. This is because some users aren’t able to use a mouse and rely on the keyboard to navigate through websites. So, you must make sure that a user can reach every element through their keyboard. 
  • Required fields should be identified: If the user has to enter any information about themselves, there should be an indication of what information is required. Many websites use asterisks to identify these fields. This is something that will save the user time, making the website more accessible overall. In the images below, you can see a good and bad example of identifying required fields.
Good Example of Required Fields (UX Collective)
Bad Example of Required Fields (UX Collective)
  • Color should not be the only indicator of feedback: When there is an error message, there should be a clear indication of the error that is formatted in more than just color. For example, a success message should not just show green. Instead, there should be another type of response along with the color, if color is used. This avoids problems that may be run into for those who have red-green colorblindness, which is the most common form of colorblindness. A good and bad example of feedback can be seen below.
Good Example of Feedback Indication (UX Collective)
Bad Example of Feedback Indication (UX Collective)

How to test your website’s accessibility

Now, you may be wondering how you can be sure that your website is accessible to all. The answer is simple. You can test your web pages with CSS and JavaScript Disabled. This allows the web designer to see what it’s like to use assistive technology. This offers a perspective that can help the web designer better understand what needs to be done to the website to make it more accessible to all users.

Final thoughts

Overall, ensuring the accessibility of your website will not only ensure that all of your site visitors can access your information, but it can also create an easier and more enjoyable experience for users. This, in turn, can create equal opportunities for every type of user to access information and contribute to society. And, although website accessibility is something that is easily overlooked, it’s an important step that should be taken by everyone when designing a website!

Sources

3, W. F. X. T. on D. (2020, June 8). 10 tips for how to make your website more accessible. WebFX Blog. Retrieved October 17, 2021, from https://www.webfx.com/blog/web-design/10-simple-web-accessibility-tips-you-can-do-today/.

Alternative text. WebAIM. (n.d.). Retrieved October 17, 2021, from https://webaim.org/techniques/alttext/.

The C2 Group. (2020, October 5). WCAG 2.1 guidelines explained with examples. Medium. Retrieved October 17, 2021, from https://medium.com/c2-group/wcag-2-1-guidelines-explained-with-examples-5c7c5d8b69eb.

Coldewey, D. (2020, July 27). As Ada turns 30, Tech is just getting started helping people with disabilities. TechCrunch. Retrieved October 17, 2021, from https://techcrunch.com/2020/07/27/as-ada-turns-30-tech-is-just-getting-started-helping-people-with-disabilities/.

Emmanuel, O. T. (2020, February 18). Why web accessibility is important and how you can accomplish it. Medium. Retrieved October 17, 2021, from https://medium.com/fbdevclagos/why-web-accessibility-is-important-and-how-you-can-accomplish-it-4f59fda7859c.

The unexpected benefits of web accessibility: Why it’s more than just “The right thing to do”. eSSENTIAL Accessibility. (2021, August 18). Retrieved October 17, 2021, from https://www.essentialaccessibility.com/blog/the-unexpected-benefits-of-web-accessibility-why-its-more-than-just-the-right-thing-to-do.

The WEBAIM millionan annual accessibility analysis of the top 1,000,000 home pages. WebAIM. (n.d.). Retrieved October 17, 2021, from https://webaim.org/projects/million/.

Why Web Accessibility is Important. Accessibility Resources at UNCG. (n.d.). Retrieved October 17, 2021, from https://accessibility.uncg.edu/why-web-accessibility-is-important/. 

Leave a Reply

Close Menu