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
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
The best solution I could come up with was using role alert, and aria-busy=”true”. <div id=”loading” style=”display: none;”> <div class=”mgBot15″><span class=”txt16″ role=”alert” aria-busy=”true”>Working…</span></div> <img src=”https://stackoverflow.com/questions/38704467/loading.png” alt=”loading” /> </div>
I think it should be on the footer tag in your case. It is meant to give information about the parent document, so I would use it if your footer elements give a good context of the parent. https://www.w3.org/TR/wai-aria/#contentinfo
Officially it should be used only for menus or sub-menus, from the ARIA spec 1.0: Indicates that the element has a popup context menu or sub-level menu. The Whatsock style guide covers this under the ‘modals’ section: It might sound like a good idea to notify screen reader users that a ‘Popup’ is attached by … Read more
When John Foliot wrote that article in 2012 it was very much true. You needed both. Today that is no longer the case. I can take your example, put it in a CodePen, and check it in JAWS and NVDA (sorry, no VoiceOver today): <label for=”textbox1″>Input</label> <input id=”textbox1″ type=”text” name=”Text Box” required> You will be … Read more
This is described in the aria specification. It gives the id of an element that provides some additional information about the current element that some users might need.
A possible implementation would be: HTML structure: <div> <!– Outer wrapper –> <ul> <!– Main navigation bar container –> <li> <!– First-level item without submenu –> <a> <!– Destination URL –> </a> </li> <li> <!– First-level item with submenu –> <a> <!– Destination URL –> </a> <ul> <!– Second-level menu container –> <li> <!– Second-level … Read more
An important distinction is that when using voice-over the item with just the ‘disabled’ property will not be tabbed to. However the item with aria-disabled=”true” will still be able to receive focus and report to the screen reader as dimmed.