wai-aria

问题 I have seen several behaviors: No element is focused. The close icon (usually at top right of overlay) is focused. Some other element inside of the overlay is focused. If conforming to ADA / ARIA standards, should any element be in focus? 回答1: The current recommend behavior is to focus the first focusable element in the dialog. However, there has been some debate on that implementation recently as it poses problems for users who use screen magnification software and screen readers. in cases

问题 It seems redundant to use an ARIA landmark if the most semantic and accessible way to define the main section of your content is the standard <main> element. Is adding role="main" to the element really necessary? 回答1: Not all modern browsers have already mapped the aria-role main to the <main> element (so far only Firefox 21+ and Chrome 26+ have mapped it). When all browser will support this feature, then the attribute role="main" could be dropped, but in the meanwhile it's better to still

问题 I want to ignore text inside the button when Jaws reads, My Code is : <span style="display:none;" id="text1">Hai</span> <button aria-labelledby="text1"><span>firstbutton</span></button> But Jaws reads as Hai first button Thanks in advance 回答1: This markup is announced at 'Hai button' in Voiceover OSX 10.8.4, ChromeVox 1.29.1, and JAWS 14. <button aria-label='Hai'> <span aria-hidden='true'>firstbutton</span> </button>` 来源： https://stackoverflow.com/questions/18209327/to-avoid-screen-reader

问题 I have an angular2 application and I am binding some dynamic text to ARIA-LABEl for a nested DIV. But when I use the JAWS reader to locate DIVs on the page , it is not reading the assigned text.This is the text I am trying to read - attr.aria-label="Product details for {{productDetails?.ProductName}}" Also if I give assign a role of heading to this div, it reads the dynamic text but doesn't prefix "Product details for " before the text <div [ngClass]="getDescClass()" class="prdDetails-div"

问题 I'd like to pair WAI-ARIA aria-hidden support with jQuery's .toggle() method. So given <p id="myElement">Hi there</p> $('#myElement').toggle() would hide the element, and set aria-hidden="true" : <p id="myElement" style="display: none;" aria-hidden="true">Hi there</p> And executing the same $('#myElement').toggle() script again would show (toggle) the element, and set (toggle) aria-hidden="false" : <p id="myElement" style="display: block" aria-hidden="false">Hi there</p> I probably want to

问题 I'm trying to dig into ARIA and make my websites more accessible. I understood using ARIA attributes is a good start but I'd like to understand the actual effects of doing so. If, for instance, I add a role="navigation" on my nav tag used as a menu, what effect will this have for the user? What will its screenreader (or any app helping him) do? Is it really useful to add this if I'm already using a nav tag, which obviously is already telling the user that this is a navigation item? Thanks!

问题 In my HTML document I am using roman numbers (e.g.: MMXV = 2015). Is there a way to inform screen readers to interpret certain text in another way (e.g.: roman numerals as "Two thousand and fifteen" instead of M-M-X-V)? My guess was that there would be an ARIA attribute, but I cannot seem to find one. E.g.: <time datetime="2015" aria-?="Two thousand and fifteen">MMXV</time> 回答1: Use the aria-label tag to give the element a meaningful description. Then, hide the roman numerals from screen

问题 I have a list of options from which one can be selected. For all intents and purposes HTML's <select> element covers this. Since we need a different visual presentation, I'm looking at using WAI ARIA role="listbox". I'm unclear on how to use aria-activedescendant , aria-selected and aria-checked . Questions regarding focus/active state: If I use aria-activedescendant on the listbox to point to the [role="option"] that is currently active (has "virtual focus"), I would use [aria-selected] .

问题 I'm in the process of improving accessibility in my HTML using HTML5 and WAI-ARIA. It is OK to have the following set up? <!-- main content --> <section id="main" role="main"> <h1>The main content</h1> <!-- This div needs to be here for styling reasons --> <div class="the-content"> <p>All the text that goes with the main content</p> </div> <!-- the sidebar --> <aside id="sidebar" role="complementary"> <h2>A title</h2> <p>Some text</p> <aside> </section> The thing I'm not sure of is if I

问题 I have an HTML Structure which really has 2 headers: At the tippity top of the page it has some navigation items and buttons, below that is another section which holds the logo and what I would call the main navigation. Both are sectioned off in wrappers because of full width CSS3 gradients so my structure looks something like this: <div id="topWrap"> <div id="topNavWrap"> <nav id="utilityLinks"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li>