Edit February 1, 2024: The inert attribute is now fully stable and can be used to prevent a user escaping a modal by making everything outside the modal inert. Additionally, you can use the dialog element with the showModal function to handle modal dialog focus automatically. Using showModal will open the dialog element as a … Read more
To represent control states that are not natively conveyed in HTML, such as expanded (for example), then leaning on ARIA attributes as style selectors can be a good fit. In this case you are relying on CSS to add content to a page based on ARIA I do not think you need. First, support for … Read more
All the same principles apply, such as using alt text for images, good use of headings, use the appropriate HTML(5) structures for content. You might be creating it via JavaScript, but screen readers of the last ~5 years understand that, and use the browser’s accessibility API to access the DOM. The non-JavaScript aspect is simply … Read more
Both aria-controls and aria-owns are used when the relation between the two element can’t be determined from the DOM hierarchy itself. aria-controls is intended to indicate that an element controls another one. E.g. control buttons for a video for instance, a toolbar for a visual editor or a button for a collapsible element. Screen readers … Read more
No reason other than laziness. <label>s are essential for accessibility, and are also pretty handy for those of us who have poor aim with our mouse clicks 🙂
You can use the “User defined runtime attributes” and specify your accessibility information there:
Maybe it may come in handy this css property: .button { speak: spell-out; } Edit: this only works in firefox, see Mozilla docs
After considering other answers on this question and “How to detect if JavaScript is disabled?” as well as some further research on AngularJS. First off you will want to hide all variables displayed through the databindings. This can be done using ng-cloak which is appended to an HTML tag. <div ng-cloak> <!– page content here … Read more