How do you choose between data attributes and aria attributes for accessibility? (2024)

Key takeaways from this article

• Prioritize semantic HTML:

  Before reaching for ARIA attributes, ensure you're using HTML elements that inherently convey the correct meaning and structure. This practice often removes the need for ARIA, streamlining accessibility efforts.

• Use ARIA sparingly:

  When semantic HTML falls short, add ARIA attributes to provide essential information for assistive technologies. Remember, less is more—overuse can lead to a cluttered experience for screen reader users.

This summary is powered by AI and these experts

• Qian Wan Software Engineer
• Garrett Welson Senior Engineer @ LinkedIn

• (edited)

  • Report contribution
  HTML has tags attributes values and contents,CSS has selectors, properties, values, declarations, and rules, and, Javascript has variables, operators, functions, objects, arrays, and control-structures, and data-attributes.

  Like

  1

• Álvaro Montoro Senior Software Engineer @ LinkedIn | HTML, CSS, Web Accessibility

  (edited)

  • Report contribution
  Aria-attributes can be accessed from CSS like a data attribute can: with an attribute selector (https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). For example, the following HTML element:<span data-value="3" aria-hidden="true"></span>Will be selected from CSS using the following:span[data-value="3"] { ... }span[aria-hidden="true"] { ... }

  See Also

  ARIA states and properties - Accessibility | MDNAccessibility InsightsWeb Accessibility – Common ARIA Mistakes to AvoidWebtools - Showcase | aria | 01_introduction

  Like

  4

• Cristoforo C.

  • Report contribution
  Aria attributes are HTML elements attributes primarily used for web applications and website usability.These are used to indicate element states (i.e. a required form element). Not only are they a great tool for the aforementioned accessibility and usability of web applications and websites for UX but also for developers as they are handy to keep tabs and track what the state of elements are which help us coders ensure our websites and apps’ function as they are intended to fir users.

  Like
• • Report contribution
  Aria-attributes should be reserved for scenarios where you have elements working in a new or unexpected manner. Otherwise current standards accurately applied will work just fine. It is easy to over use aria attributes and bloat page data if used unnecessarily.

  Like

• Qian Wan Software Engineer

  • Report contribution
  It is also important to note that aria attributes also do not modify how an element looks or behaves! It is only for assistive technologies, which reads the DOM's accessibility tree.https://developer.chrome.com/blog/full-accessibility-tree/Also to note, this article is likely comparing the aria "stateful" attributes, such as aria-expanded, aria-hidden to data attributes because they both represent state in an attribute.But beside state attributes, aria also has a large collection of "role" attributes, like "button", "progressbar".But one thing is for sure -- you wouldn't need to worry about this in the first place if you simply chose the correct HTML element. These attributes are meant for advanced/composite elements.

  Like

  8

• Cristoforo C.

  (edited)

  • Report contribution
  Manipulation of HTML elements is the key concept here. Data attributes allow for more dynamic and efficient changes to occur.A recommendation for readability in general would be to plan in advance your usage of data attributes, use where it makes sense and choose descriptive and consistent in naming conventions.One additional note I would point out is also be mindful of the data you are storing and manipulating as data attributes may not be the best tool to use for more robust requirements of your web app or for, say, privacy and encryption. That isn’t what data attributes are designed for.

  Like

  2

• Hugo Carvajal Software Engineer at Florida Reliability Coordination Council.

  • Report contribution
  they are great to use when posting to an API and managing data that you might need. If you create some sort of table or grid design you might have it so you can use it to call an event passing in that data tag value.

  Like
• • Report contribution
  Data attributes are great for storing and making use of additional data required for your page/content/features. They work best when utilizing dynamically generated content as they can fetch basic product information for instance. Keep in mind any data attributes you use may be scrapped by bots, etc.

  Like

• Garrett Welson Senior Engineer @ LinkedIn

  • Report contribution
  Another thing to note is to not over-rely on aria attributes. Well-structured, semantic HTML is generally very accessible to screen readers. It can be possible to over-use aria labels and convey *too much* information to screen reader users. Make sure you're only using aria labels when they are essential to convey information about an experience to screen reader users. For example, page titles should generally go in <h1> HTML tags. A misguided approach would be to put the title in a <div> and use aria labels to indicate "Page title" or something similar. Sticking to semantic HTML is simpler, cleaner, and better for accessibility, and it often removes the need for these labels entirely.

  Like

  10

• Cristoforo C.

  • Report contribution
  When choosing consider what your needs are. My recommendation is always choose the right tool for the task at hand and be mindful of over complicating a project whilst engaging in the admirable goal of making your code more efficient.

  Like