wai-aria

问题 Issue: I have an accessibility issue that I am struggling with. I have an angular web application. A page loading spinner/indicator is shown when content is loading. And when the page content has loaded the spinner is hidden. This "div" is never removed from DOM. Content of the loading div are not read (by NVDAor jaws) when the loading div is shown. <div class='loading' aria-live='polite' aria-label='Do not refresh the page' tabindex="-1">Do not refresh the page</div> I wouldn't like to

问题 Typically, HTML headings are only able to go up to <h6> before it becomes invalid. As far as I can tell, the following is a completely valid way to create a <h7> element in HTML: <h6 aria-level="7">This is a heading level 7 element</h6> I have tested this in NVDA in Chrome, Firefox and Internet Explorer and it works as intended. I don't really have access to any other screen readers though. Can someone with access to lots of screen reader / browser combinations confirm whether the above is

问题 We have a web-based app which uses a side-by-side experience for desktop users where the left side of the screen is a file browser and editor and the right side of the screen is an interactive preview. Users of our app will make constant and iterative changes on the left and and then interact with the preview on the right, switching back and forth many times in quick succession. Is there a "best practice" for allowing quick and easy navigation between these two interactive areas? I know this

问题 From MDN: In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies. <button aria-label="Close" onclick="myDialog.close()">X</button> According to the Bootstrap Documentation: Hide an element to all devices except screen readers with .sr-only So I guess I could also write:

问题 I'm working on a site that needs to (a) work without JavaScript and (b) be keyboard-accessible. I have used the label target trick to build a tab view (https://css-tricks.com/functional-css-tabs-revisited/), but I've noticed that it relies on the label being clicked. I can't figure out how to make it work with the keyboard. Is this possible? .tabs { background-color: #eee; min-height: 400px; } .tabs__list { border-bottom: 1px solid black; display: flex; flex-direction: row; list-style: none;

问题 I'm working on a site that needs to (a) work without JavaScript and (b) be keyboard-accessible. I have used the label target trick to build a tab view (https://css-tricks.com/functional-css-tabs-revisited/), but I've noticed that it relies on the label being clicked. I can't figure out how to make it work with the keyboard. Is this possible? .tabs { background-color: #eee; min-height: 400px; } .tabs__list { border-bottom: 1px solid black; display: flex; flex-direction: row; list-style: none;

问题 For a webpage with multiple images of a single product, such as with different angles. Is there a requirement for alt tags for each image? Viewing examples on Amazon it seems they only have an alt tag on the first product image, but after which there is no alt tag or aria related tags. The first example here says that the stars have empty alt tags. My question is, to follow proper standards, is it required to have an empty alt tag after the first image? To completely hide the extra non

问题 I have run into an issue with the JAWS screen reader & Firefox. I have a tree like the one below. Whenever any of the <a> elements gain focus, either by tabbing from the window or from the <button> , JAWS narrates the element three times . As far as i can tell, Firefox is the only browser that does this. Is there something wrong with my markup here? <nav role="tree"> <ol role="group"> <li role="presentation"> <a href="javascript:void(0)" role="treeitem">Parent Link 1</a> <ol role="group"> <li

问题 Is there any guidance on when to choose aria-describedby instead of aria-labelledby? Reading the MDN guidance on the two attributes, I get the feeling they are similar and interchangeable. Both seem to suggest that they can be used for input labels and other content but many compliance tools do not seem to like aria-describeby on input tags. I hate applying a particular attribute blindly just because a tool says I should and I would prefer to know something concrete about the when and why

问题 I am styling a table that has table cells with (non-interactive) checkmarks in it. The checkmark icons are added via CSS. As there is no accessible content in it, I added an aria-label to it. Now I wonder if it is a good idea to use this attribute as a CSS selector to add those checkmark icons like this: td[aria-label="yes"] { &:after { content: '\f00c'; font-family: $font-family-icons; } } I learned that using ARIA attributes as selectors is generally a good practice, at least for state