Creating Web Accessibility: HTML Attributes

Back on the topic of accessibility and today we'll be focusing on some of the HTML attributes that can enhance accessibility.

Before diving right in, let's fulfill all righteousness by defining what HTML Attributes are

According to Java point, HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML elements.

Now that we've gotten that out of the way let's dive into some attributes that enhance accessibility for users

1. alt attribute:
   This attribute provides a text description of an image, which is read aloud by screen readers for users who are blind or visually impaired. It is important to provide an accurate and descriptive alt text for every image on a web page.

2. title attribute:
   This attribute displays a tooltip when the user hovers over an element and also provides additional information about that element. It is very useful when using icons or symbols that are not very familiar to users, also for users who have difficulties with small or hard-to-read text.

3. aria-label attribute:
   This attribute provides a text label for an element that is not visible on the screen or cannot be interacted with. aria-label is almost exactly like the image alt attribute, it can be used to provide more information for users who are blind or visually impaired. They are used in elements such as buttons, inputs, tables, links etc.

There are so many aria attributes that can be used to enhance accessibility but unfortunately cannot make it on this list, visit the W3C comprehensive list of ARIA attributes on their website to learn more. Back to the list!

1. tabindex attribute:
   This attribute controls the order in which elements are focused when a user navigates a web page using the keyboard. It is important to ensure that the focus order is logical and intuitive for users with mobility impairments or who rely on the keyboard to navigate. You can read more about the tabindex attribute here

2. role attribute:
   This attribute can also be used to control the focus order of elements on a web page, which can be helpful for users with mobility impairments or who rely on the keyboard to navigate.
   For example, if you have a section of your website that contains a list of links, you could use the role attribute to indicate that the section is a navigation menu. This would allow a screen reader to announce to the user that the section is a menu, and provide additional navigation options.

3. accesskey attribute:
   This attribute can be used to assign a keyboard shortcut to an element, such as a link or a button. This can be helpful for users who have difficulty using a mouse or other pointing device, allowing them to navigate a web page more quickly and easily.

Conclusion

When creating a website or application, it is paramount that you have all types of users in mind, because, of what use will your app be if your users can't make sense of their left from their right. Accessibility should be your first thought!

As usual, thank you for reading and I hope you got value for your time. Follow @frontend_jedi to stay updated on this series and other frontend development topics. Follow me on twitter @Frontend_Jedi let's connect and learn more together!