The accessibility specification on W3.org recommends using attributes like aria-expanded on an accordion’s header element to signify when an accordion is open or closed. However, when an accordion is collapsed, the panel content is hidden, and it is usually good…
During an accessibility review of a website based on WCAG 2.1 level AA, the implementation of inactive buttons was criticized. The attribute aria-disabled="true" has been applied, and the appearance of the inactive button is appropriate for contrast. Despite this, I…
In our Frontend we're displaying toast notifications to the user in order to inform about status updates like tasks finished successfully or error notifications due to failed fetch operations. Each notification is based on the following structure: <div class="toast-notifiaction" role="status">…
Question: Top View Controller (CardVC) not focusable with Full Keyboard Access Issues: When CardVC is displayed, and if the Full Keyboard Access is enabled, the navigation by pressing Tab or Arrow buttons on external keyboard doesn't cycle back to the…
I'm trying to make a settings page with HTML and CSS. The single settings have a label on the left side and an interactive element / multiple interactive elements on the right side. I don't know which HTML tag is…
I am struggling to make the div with aria-label accessible. <main> <h1>Heading</h1> <input type="text" placeholder="text"> <p>Lorem ipsum dolor sit amet labore culpa! Ipsam.</p> <div role="region" aria-label="content summary"> summary </div> <button>Go back</button> </main> I tried aria-describedby and aria-labelledby, but those did…
I'm trying to make a list accessible using role="list" as the parent and role="listitem" for the items. I want each list item to have a description using aria-describedby in addition to its text content. Here is a simplified version of…
Can i use syntax such as <span class="subheader-uline">My custom emphasised txt</span> Without contravening accessibility rules (WCAG) I dont intend this custom header to be navigated via screen readers -its purely aesthetic. I tried to use this syntax and its flagged…
Steps to Reproduce the Issue: Open the link: https://nvda-test.w3spaces.com/button-accessibility-label.html Two buttons: This page contains two buttons, each with a focusable icon inside. ARIA Attributes: The first button has an aria-label attribute or an aria-labelledby attribute, while the second button does…
I have a component that has an eyebrow and below the eyebrow there is a larger heading. The heading is larger and more significant to the overall theme of the component. The eyebrow is more supplementary. Would it be allowable…