wai-aria

问题 I've noticed in all of Bootstrap's examples using button elements, they include role="button" (and type="button" ), such as: <div class="dropdown"> <button id="dLabel" type="button" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown trigger <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> Won't accessibility software already know that a button element is meant to act as a button? Is

问题 I have a page that has 2 steps to register a user. After a user has filled out all fields of the first section, he needs to confirm the "Terms and Conditions" and press a button to confirm it. After he has pressed the button, first section is becomes readOnly and the second section (more fields to fill) appears at the bottom of the page and the page does a scrollTo this new section. I need to inform the screen reader that there is a new section on the same page but I don't know who can I do

问题 I have a layout that gives me the choice of either: including the sidebar within the article tag, even though it's not specific to the article having the title outside the article tag Currently I have the title outside the article tag, but the validator tells me that the itemprop="headline" isn't part of any item. What would be the best way to structure this? Is there a for attribute for relating a title with an article? If you're wondering what type of layout would force me to make this

问题 I am working on making an overlay modal more accessible. It works essentially like this JSFiddle. When you open the modal, the focus doesn't properly go into the modal, and it continues to focus on other (hidden, background) items in the page. You can see in my JSFiddle demo that I have already used aria-controls , aria-owns , aria-haspopup and even aria-flowto . <button aria-controls="two" aria-owns="true" aria-haspopup="true" aria-flowto="two" onclick="toggleTwo();" > TOGGLE DIV #2 </button

问题 Building a tree menu with jQuery, and I want it to be accessible, so I'm using aria attributes. What I want to do is toggle the "aria-expanded" attribute from true to false on click/enter. I've tried this, but it's obviously not correct: $(this).closest('ul').find('> li.tree-parent').toggleAttr( 'aria-expanded', 'true false' ); 回答1: You can use .attr() to manually write the toggle logic $(this).closest('ul').find('> li.tree-parent').attr('aria-expanded', function (i, attr) { return attr ==

问题 I'm working on a design system that's extending from the Bootstrap framework. One of the key goals is accessibility. When implementing Bootstrap tabs I see that they apply role="presentation" to the list items in their nav list. So I put together a little chunk of test HTML from the Bootstrap template: <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a><

问题 I'm trying to make a form accessible. Should I make my inputs have both required and aria-required attributes, or just one? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" required> Or like this? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" aria-required="true"> Or like this? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" aria-required="true" required> The article Accessible

问题 Let's say we have a classic form - a few input fields that must meet some pattern. When user enters incorrect data and submits this form all the fields that are filled wrong are marked as invalid and appropriate error message is provided for every incorrect field. I need to make this form WAI ARIA compliant, so that after form submission the accessibility tools will see these errors first. I've found solution that implements it by dynamic html modification using JS (http://jsfiddle.net/nS3TU

问题 aria-expanded="bool" is not support attribute that role="menuitem" . Please refer to W3C HTML Document. (https://www.w3.org/TR/html/) If use that, get markup error on Nu Html Checker . But when I create some menu widget I must use it. And W3C use the same way in the formula example: https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/menubar/menubar-1/menubar-1.html https://www.w3.org/WAI/tutorials/menus/application-menus-code/ What is right and what is wrong? 回答1: As

问题 I have heard that applying display:none to things that are not visible is more accessible then changing opacity. However using display:none messes up some of my css animations that are progressively layered onto the core functionality. Is it accessible if in my css the element is hidden with opacity:0 and give the element the aria-hidden=true role, or should the element also have display:none ? Another factor to be considered is the aria roles are controlled by javascript (the css has a