In samples of Lightning design system I have seen a lot of aria-* attributes, for example:
<ul role="tree" aria-labelledby="treeheading" ...> <button aria-controls="accordion-details-01" aria-expanded="true" ...> <div aria-hidden="false" ...>
Can somebody explain me what is the purpose of using those in Lightning components and what is the difference if I just skip them?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
The Accessible Rich Internet Applications specification provides accessibility features for disabled individuals, as stated in the RFC:
Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document-level markup.
You can skip these codes if you don’t care about supporting accessibility for disabled individuals, particularly if it’s for your own website or Lightning components you use internally in your org. However, if you’re trying to sell an app to government entities and some other orgs, your app may not be recommended or possibly even rejected if it does not meet Section 508 Requirements (in the United States), or similar requirements that may be enforced by other governments around the world.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0