Should aria-current="page" be used for a client-side table pagination component? Problem Description: It is my understanding that aria-current="page" should be used for a set of links when the link is for the current page. How does this relate to a table pagination component, where clicking the link does not navigate to a new page, but … Read more
What is the ARIA role of a div? Problem Description: What is the default ARIA role of a div or span in HTML? Or, in other words, what is the ARIA role of non-interactive elements and the elements that don’t have a specific ARIA role assigned to them? Is it none/presentation? Or is it not … Read more
What is the ARIA role of a div? Problem Description: What is the default ARIA role of a div or span in HTML? Or, in other words, what is the ARIA role of non-interactive elements and the elements that don’t have a specific ARIA role assigned to them? Is it none/presentation? Or is it not … Read more
Html accessibility – read another element's description Problem Description: Hello any accessibility gurus, I want to have this button element, when tabbed on, would trigger the screen read of an input element instead. I tried pointing the aria-labelledby from the button to the input, to have the input‘s aria-label being read out. But the button … Read more
Prevent child elements from being interactive and focusable Problem Description: I’m building an interactive widget that consists in making a button list out of a list of HTML markups. To achieve that, the HTML markup is wrapped with a button-like component <div role="button" tabindex="0" aria-label="Action…">. When clicking on the button, some script is executed. I … Read more
Aria undesirable result Problem Description: I have the follwing html on my site’s header <header> <div class="logo_container"> <a href="/"> <img src="xxx" alt=""> </a> </div> <nav class=""> <ul> <li> <a href="xxx" title="xxxx" >xxx</a> </li> <li> <a href="xxxx" title="xxx" >xxx</a> </li> <li> <a href="xxxx" title="xxxx">xxx</a> </li> <li> </ul> </nav> <div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em> … Read more
Aria undesirable result Problem Description: I have the follwing html on my site’s header <header> <div class="logo_container"> <a href="/"> <img src="xxx" alt=""> </a> </div> <nav class=""> <ul> <li> <a href="xxx" title="xxxx" >xxx</a> </li> <li> <a href="xxxx" title="xxx" >xxx</a> </li> <li> <a href="xxxx" title="xxxx">xxx</a> </li> <li> </ul> </nav> <div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em> … Read more
Aria undesirable result Problem Description: I have the follwing html on my site’s header <header> <div class="logo_container"> <a href="/"> <img src="xxx" alt=""> </a> </div> <nav class=""> <ul> <li> <a href="xxx" title="xxxx" >xxx</a> </li> <li> <a href="xxxx" title="xxx" >xxx</a> </li> <li> <a href="xxxx" title="xxxx">xxx</a> </li> <li> </ul> </nav> <div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em> … Read more
Aria undesirable result Problem Description: I have the follwing html on my site’s header <header> <div class="logo_container"> <a href="/"> <img src="xxx" alt=""> </a> </div> <nav class=""> <ul> <li> <a href="xxx" title="xxxx" >xxx</a> </li> <li> <a href="xxxx" title="xxx" >xxx</a> </li> <li> <a href="xxxx" title="xxxx">xxx</a> </li> <li> </ul> </nav> <div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em> … Read more
Aria undesirable result Problem Description: I have the follwing html on my site’s header <header> <div class="logo_container"> <a href="/"> <img src="xxx" alt=""> </a> </div> <nav class=""> <ul> <li> <a href="xxx" title="xxxx" >xxx</a> </li> <li> <a href="xxxx" title="xxx" >xxx</a> </li> <li> <a href="xxxx" title="xxxx">xxx</a> </li> <li> </ul> </nav> <div class="toggle_menu" role="button" aria-label="open menu" tabindex="1"><em class="fa-solid fa-bars"></em> … Read more