- All
- HTML5
Powered by AI and the LinkedIn community
1
What are data attributes?
2
What are aria attributes?
3
How do they differ?
4
When to use data attributes?
5
When to use aria attributes?
6
How to choose between them?
Data attributes and aria attributes are both ways to add extra information to HTML elements, but they have different purposes and effects. In this article, you will learn what they are, how they differ, and when to use them for accessibility.
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
1 What are data attributes?
Data attributes are custom attributes that start with the prefix data- and can store any data you want. For example, you can use data attributes to store the rating of a product, the color of a button, or the name of a user. Data attributes are not part of the HTML specification, but they are valid and supported by all browsers. You can access and manipulate data attributes using JavaScript or CSS.
Help others by sharing more (125 characters min.)
-
(edited)
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
1
2 What are aria attributes?
Aria attributes are predefined attributes that start with the prefix aria- and can provide additional information about the role, state, or properties of an element. For example, you can use aria attributes to indicate that a button is disabled, that a list is expandable, or that a form field is required. Aria attributes are part of the Accessible Rich Internet Applications (ARIA) specification, which aims to improve the accessibility and usability of web applications. You can access and manipulate aria attributes using JavaScript, but not CSS.
Help others by sharing more (125 characters min.)
- Álvaro Montoro Senior Software Engineer @ LinkedIn | HTML, CSS, Web Accessibility
(edited)
- Report contribution
Thanks for letting us know! You'll no longer see this 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"] { ... }
LikeLike
Celebrate
Support
Love
Insightful
Funny
4
- Cristoforo C.
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
-
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
3 How do they differ?
The main difference between data attributes and aria attributes is that data attributes are meant for your own use, while aria attributes are meant for assistive technologies, such as screen readers or voice assistants. Data attributes do not affect the semantics or behavior of an element, while aria attributes can modify how an element is perceived or interacted with by users with disabilities. Data attributes are not exposed to the accessibility tree, while aria attributes are.
Help others by sharing more (125 characters min.)
- Qian Wan Software Engineer
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
8
4 When to use data attributes?
You should use data attributes when you want to store some data that is relevant to your application, but not to the accessibility of your web page. For example, you can use data attributes to store the ID of a product, the URL of an image, or the date of a post. Data attributes can help you simplify your HTML structure, reduce the need for extra elements or classes, and make your code more readable and maintainable.
Help others by sharing more (125 characters min.)
- Cristoforo C.
(edited)
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
2
- Hugo Carvajal Software Engineer at Florida Reliability Coordination Council.
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
-
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
5 When to use aria attributes?
You should use aria attributes when you want to provide some information that is essential for the accessibility of your web page, but not available from the native HTML attributes. For example, you can use aria attributes to provide a label for an icon, a description for a complex widget, or a live region for dynamic content. Aria attributes can help you enhance the accessibility and usability of your web page, especially for users who rely on assistive technologies to navigate and understand your content.
Help others by sharing more (125 characters min.)
- Garrett Welson Senior Engineer @ LinkedIn
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
10
6 How to choose between them?
When deciding between data attributes and aria attributes, consider the purpose of the attribute, its effect, and the audience. Is it for your own use or for accessibility? Does it change the semantics or behavior of the element or not? Is it for all users or only for users with disabilities? Data attributes and aria attributes are not mutually exclusive, so you can use them together to create accessible and data-rich web pages. Remember to ask yourself these questions when making your decision.
Help others by sharing more (125 characters min.)
- Cristoforo C.
- Report contribution
Thanks for letting us know! You'll no longer see this 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.
LikeLike
Celebrate
Support
Love
Insightful
Funny
HTML5
HTML5
+ Follow
Rate this article
We created this article with the help of AI. What do you think of it?
It’s great It’s not so great
Thanks for your feedback
Your feedback is private. Like or react to bring the conversation to your network.
Tell us more
Tell us why you didn’t like this article.
If you think something in this article goes against our Professional Community Policies, please let us know.
We appreciate you letting us know. Though we’re unable to respond directly, your feedback helps us improve this experience for everyone.
If you think this goes against our Professional Community Policies, please let us know.
More articles on HTML5
No more previous content
- How do you maintain HTML5 web projects when frameworks change? 60 contributions
- How can you ensure HTML5 accessibility with WCAG 2.1? 76 contributions
- How can you manipulate binary data using the file API? 24 contributions
- How can you use HTML5 authentication for secure and user-friendly login? 32 contributions
- What new HTML5 framework features should you know? 46 contributions
- How can you create web apps that use your location? 7 contributions
- How do you describe the accessibility of your web content using HTML5 metadata? 7 contributions
- What is the best way to debug HTML5 code with custom elements, templates, or shadow DOM? 8 contributions
- How do you use HTML5 forms to handle network connectivity issues? 18 contributions
- What's your strategy for testing HTML5 semantic errors? 2 contributions
No more next content
More relevant reading
- HTML5 How can you attach more information to web elements with HTML5 custom data attributes?
- HTML5 What are some common use cases and examples of custom data attributes in web development?
- Web Development How do you debug a web form that is not submitting data?
- HTML5 How can you use offline storage API to store data locally?