wai-aria

I just noticed that although the aria-label , aria-labelledby and aria-describedby attributes are said to work on every element (see https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-describedby ), they only seem to work for a few elements like a , and not for e.g. div or p in NVDA and JAWS. I have created a small codepen to demonstrate the issue (browse it using browse and focus mode): https://codepen.io/jmuheim/pen/avWbPe For example, in NVDA, on the a element, the aria-label and aria-labelledby seem to work in both browse and focus mode. But aria-describedby is only announced in

I have a component <Button> . If the component doesn't has this.props.children , I want to set the prop ariaLabel as isRequired , otherwise in can be optional. How do I do that? ariaLabel prop not required: <Button>Add to bag</Button> ariaLabel prop has to be required: <Button ariaLabel="Add to bag" icon={ favorite } /> if this.props.children and this.props.ariaLabel are empty, it throws an error saying that this.props.ariaLabel is isRequired <Button icon={ favorite } /> propTypes: Button.propTypes = { /** icon inside Button. */ icon: React.PropTypes.object, /** Content inside button */

A third party script is being used on a site I work on that replaces a few instances of <a href=""> with simple <a> . The links still work thanks to another part of the script. But they are no longer treated as links by user agents. I can restore them to the tabbed navigation order by adding tabindex="0" but how can I make assistive technologies announce them as links or include them in a list of all links on a page? Would adding role="link" help at all? I am pushing the third party to improve their script so that the href is left intact. But in the meantime how do I best repair the damage

I'm developing an app with Angular and Semantic-UI . The app should be accessible, this means it should be compliant with WCAG 2.0. To reach this purpose the modals should keep focus within the dialog and prevents users from going outside or move with "tabs" between elements of the page that lays under the modal. I have found some working examples, like the following: JQuery dialog: https://jqueryui.com/dialog/#modal-confirmation dialog HTML 5.1 element: https://demo.agektmr.com/dialog ARIA modal dialog example: http://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html (that I have

I'm trying to make a form accessible. Should I make my inputs have both disabled and aria-disabled attributes, or just one? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" disabled> Or like this? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" aria-disabled="true"> Or like this? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" aria-disabled="true" disabled> aardrian I can take your example, put it in a CodePen , and check it in JAWS and NVDA (sorry, no VoiceOver today): <label for=

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 there any reason I should include role="button" and/or type="button" in my code? Many HTML5 elements come

I'm interested to learn more about the relationship, and possible distinctions, between the HTML5 <main> element, and the ARIA landmark role attribute role="main" . I'm under the impression that the purpose of the <main> element is to map the ARIA roll attribute role="main" onto a specific HTML element. But does that sum it up? Are there benefits to using <main> over, say, <div role="main"> ? Or will these, for now and the foreseeable future, yield the same result? Any insights in comparing the following examples would be greatly appreciated: <body> <main> <p>Paragraph</p> <main> </body> <body

We are redesigning our website and there are some concerns internally that accessibility affects the design element. A toggle mode was suggested. Our standard version would still be accessible with the exception of contrast ratio and larger font size, which would be made available when you toggle to accessible mode. Has anyone had any experience with this? WCAG 2.0 allows a conforming alternate version (under some conditions ): For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.