Skip to main content


Accessible Rich Internet Applications: Building Accessible Websites with Native HTML Part 2 of 5

Screenshot 2023 04 23 223632

A Guide to Creating Accessible and Meaningful Web Content

In the world of web development, accessibility has become a crucial factor in designing and building websites. Accessibility ensures that everyone, regardless of their abilities, can access and use a website without any barriers. Semantic HTML is one of the most essential tools in creating an accessible website.

Semantic HTML is the foundation of accessible web content. It provides a clear and structured markup that allows web browsers and assistive technologies to understand the purpose and meaning of each element on a web page. However, even with semantic HTML, there may be instances where additional information is necessary to provide full accessibility. This is where ARIA or Accessible Rich Internet Applications comes in.

ARIA is a set of attributes that can be added to HTML elements to provide additional semantic information about their purpose and behavior. While semantic HTML provides a standard way to define the structure of a web page, ARIA provides a way to define the behavior of interactive elements on that page.

For example, consider a button element on a web page. Semantic HTML defines the button as an interactive element that can trigger an action when clicked. However, ARIA can be used to provide additional information about the button’s purpose, such as whether it opens a dialog or submits a form. This information is critical for people who use assistive technologies, such as screen readers, as it helps them understand how the element should be used and what it does.

ARIA also provides a way to define custom roles, states, and properties for elements that do not have a predefined role in HTML.

It’s important to note that ARIA should be used judiciously and only when necessary.

Here is a list of all ARIA attributes as of 24 March 2023:

  1. aria-activedescendant
  2. aria-atomic
  3. aria-autocomplete
  4. aria-busy
  5. aria-checked
  6. aria-colcount
  7. aria-colindex
  8. aria-colspan
  9. aria-controls
  10. aria-current
  11. aria-describedby
  12. aria-details
  13. aria-disabled
  14. aria-dropeffect
  15. aria-errormessage
  16. aria-expanded
  17. aria-flowto
  18. aria-grabbed
  19. aria-haspopup
  20. aria-hidden
  21. aria-invalid
  22. aria-keyshortcuts
  23. aria-label
  24. aria-labelledby
  25. aria-level
  26. aria-live
  27. aria-modal
  28. aria-multiline
  29. aria-multiselectable
  30. aria-orientation
  31. aria-owns
  32. aria-placeholder
  33. aria-posinset
  34. aria-pressed
  35. aria-readonly
  36. aria-relevant
  37. aria-required
  38. aria-roledescription
  39. aria-rowcount
  40. aria-rowindex
  41. aria-rowspan
  42. aria-selected
  43. aria-setsize
  44. aria-sort
  45. aria-valuemax
  46. aria-valuemin
  47. aria-valuenow
  48. aria-valuetext

Each ARIA attribute serves a specific purpose in providing additional information to assistive technologies for improved accessibility. It’s important to use them correctly and in conjunction with semantic HTML to ensure that web content is truly accessible and usable for everyone.

Here are some examples of ARIA attributes:

  1. aria-label: Use this attribute to provide a label for an interactive element when a visible label is not present on the page. For example, if you have an icon that represents a search function, you can use aria-label to provide a text label that will be read by a screen reader.
  2. aria-hidden: Use this attribute to hide an element from screen readers. For example, if you have a decorative image that does not provide any meaningful information, you can use aria-hidden=”true” to hide it from screen readers and prevent it from being read aloud.
  3. aria-describedby: Use this attribute to provide a description of an element, such as a form control. For example, you can use aria-describedby to provide a description of how to fill out a form field or to provide additional instructions for using a particular feature.
  4. aria-disabled: Use this attribute to indicate whether an interactive element is currently disabled or not. For example, if you have a button that is currently disabled, you can use aria-disabled=”true” to indicate that it cannot be clicked.
  5. aria-live: Use this attribute to indicate that an element should be announced by a screen reader as soon as it changes. For example, if you have a chat application where new messages appear dynamically, you can use aria-live to ensure that new messages are read aloud by a screen reader as soon as they appear.
  6. aria-expanded: Use this attribute to indicate whether an expandable element, such as a dropdown menu or accordion, is currently expanded or collapsed. For example, you can use aria-expanded=”true” to indicate that a dropdown menu is currently open and visible to the user.
  7. aria-selected: Use this attribute to indicate which option is currently selected in a group of options, such as a list or radio button group. For example, you can use aria-selected=”true” to indicate which item in a list is currently selected.
  8. aria-haspopup: Use this attribute to indicate that an element has a popup or dialog associated with it, such as a dropdown menu or modal window. For example, you can use aria-haspopup=”true” to indicate that clicking on a button will open a dropdown menu.
  9. aria-valuemin/aria-valuemax/aria-valuenow: Use these attributes to indicate the minimum, maximum, and current values of a range widget, such as a slider or progress bar. For example, you can use aria-valuemin=”0″, aria-valuemax=”100″, and aria-valuenow=”50″ to indicate that a progress bar is currently halfway full.
  10. aria-labelledby: Use this attribute to associate an element with a visible label on the page, such as a form field that is labeled with text. For example, you can use aria-labelledby to associate a form field with a visible label elsewhere on the page.
  11. aria-controls: Use this attribute to indicate that an element is controlled by another element, such as a tab panel that is controlled by a set of tabs. For example, you can use aria-controls to indicate that a set of tabs controls a corresponding set of tab panels.

ARIA is a powerful tool for improving the accessibility of web content. By providing additional semantic information about interactive elements, ARIA enables assistive technologies to understand how they should behave and what they do. This, in turn, makes web content more accessible and usable for people with disabilities.

For more information on why web accessibility is important in general, you can check out my previous blog post here.

For further information on how to make your product accessible to your audience, contact our experience design experts, check out our Accessibility IQ for your website, download our guide Digitally Accessible Experiences: Why It Matters and How to Create Them, read more from our UX for Accessible Design series.

So, What Comes Next?

In our next installment, we’ll be discussing the importance of accessible forms, and how to create forms that are inclusive and easy to use for everyone. Stay tuned!

Follow my next post: Accessible Forms Using Semantic HTML : Building Accessible Websites with Native HTML Part 3 of 5.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Gulen Yilmaz

Highly dedicated Web Accessibility Consultant who is driven by a passion for contributing to team success. With a strong work ethic, meticulous attention to detail, excellent communication skills, and outstanding collaborative abilities, she consistently goes above and beyond to ensure project success. Her cross-functional capabilities enable her to effectively work across various roles and departments. Additionally, she holds a CPACC certification in the field of accessibility, further validating her expertise. With over 3 years of experience working on accessibility teams, she has honed her skills in different types of testing and has gained proficiency in analysis, design, development, implementation, enhancement, and accessibility testing of applications within the IT industry. Her unwavering commitment to accessibility and her extensive experience make her an invaluable asset to any team.

More from this Author

Follow Us