wai-aria

问题 If a HTML5 <div> element requires a role="button" attribute to secure a success outcome in an accessibility audit (Success Criterion 4.1.2 [Name, Role, Value]..the div is acting as a button in a UI), does it then also require a valid name attribute (which would normally be invalid HTML5 for a div ). If the answer is no - what other accessibility friendly attribute can I add to describe the div button and meet the criteria? A simple title attribute or aria-label ? 回答1: I think the original

问题 I work on web accessibility for blind people interacting with a screen reader Jaws and a vocal synthesizer. I am using x/html with wai-aria and JavaScript to design accessible web pages of a questionnaire user test. In this kind of application, main difficulty is to face with different behaviors on different browsers and also versions of Jaws screen reader generate different behaviors. However, problems started after the release of Firefox 4 (and next 4.01). The same code of a web

问题 I have a div like this: <div class="whatever">17:03</div> And when someone using a screen reader hovers over that text, I'd like it to read "17 minutes and 3 seconds" What's the standard practice for doing this? 回答1: You can include some additional text for screenreader only: <div class="whatever">17<span class="sr-only"> minutes and </span>:03<span class="sr-only">seconds</span></div> and CSS (taken from Bootstrap 3) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin:

问题 I'm working on an accessibility task for a mobile web app (HTML+Angular+ARIA). I tested some potential ways: aria-flowto and aria-owns , not working for web page tabIndex , not working In my local test with iOS 9.2.1 Safari, the default screen reader is linear way from top. Is there a way I can define elements reading order? Like what aria-flowto is doing. 回答1: aria-flowto is supposed to provide this sort of functionality (and it is the only proposed way to do so) but it has not been

问题 I have a link within an unordered list as follows: <li class="savelink"> <a href="/save"><span>Save</span></a> </li> Normally the screen readers read "Save". Is it possible, and with which attribute, to change that without changing the actual link text? The business need is to have a link, styled with an icon. The icon will be complementary to the link text. For example: An icon of a "+" sign and a link text "menu" that is equal to the "add menu item" action. I tried aria-label, with no

问题 So I have a project in React where the modal does not have the proper markup. I know I need to have aria-modal="true" , but I am not 100% sure if this attribute is added everywhere I have a className . So for example: renderModal() { return ( <Modal isOpen={this.props.isOpen} onRequestClose={this.toggleModal} contentLabel="Address Book" className={this.props.parentClassName ? this.props.parentClassName + " address-modal" : "address-modal"} role="dialog" > {this.renderAddressForm()} </Modal> )

问题 I have an HTML page, with multiple hidden elements that become visible only under certain circumstances. When I set the focus on the page wrapper (to read all the content), Windows Narrator reads all the elements, even the hidden ones. I have tried using aria-hidden="true", CSS display: none, HTML5 hidden attribute, all are completely ignored. So far, the only mechanism that I found that works is to remove this elements from the DOM, before setting the focus on the wrapper. But it's not an

问题 I'm currently trying to make a DOM element with one to several child elements as accessible as possible. The element will contain illustrative content using background images in several layers. I'm currently using a child element for providing the image description as described in this informative blog post about how to label illustrative content inside of a content group. The container element may also contain other child elements containing text content. An example element would currently

问题 I am working on accessibility issue. I have a spinny/loader which appears on screen when data is getting loaded. <spinny aria-live="polite" role="alert" aria-label="Loading Page"> So when the spinny appears on screen, screen readers give me alert that spinny is loaded. Now I want that when the spinny goes away from screen i want the screen reader to provide message such as data loaded or something like that. I have tried aria-relevant, aria-atomic etc but nothing seems to have worked. 回答1:

问题 From the W3C wiki When authors use collapsible content, for example, to hide navigation menus or lists of content, the triggering link or button should indicate to screen reader users whether the collapsable content below is in the expanded or in the collapsed state. The aria-expanded attribute is used for this purpose. Does this include <select> elements or is this only for navigation items? 回答1: The select element can accept any global aria-* attribute, and any aria attribute applicable to