wai-aria

Making links with no href accessible

由 时光总嘲笑我的痴心妄想 提交于 2019-11-28 07:09:17
问题 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

Setting focus of a screen reader on a modal alert in ember

由 我怕爱的太早我们不能终老 提交于 2019-11-28 05:21:47
问题 I am attempting to make my ember.js app more accessible and am doing my testing via Apple's built-in VoiceOver utility. I'm adding ariaRoles as necessary to my views and tacking on aria-label attributes where the purpose of navigation is unclear. I'm having issues getting the focus on modal alerts, as the reader's focus stays on the page items behind the modal. Does anyone have experience handling focus on modal alerts for screen readers? I'm under the impression that declaring "ariaRole:

How to keep focus within modal dialog?

由 喜夏-厌秋 提交于 2019-11-28 04:03:59
问题 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

What are these attributes: `aria-labelledby` and `aria-hidden`

由 白昼怎懂夜的黑 提交于 2019-11-28 03:09:48
Using Bootstrap modal, I've seen these aria attributes a lot, but I never knew how to make use of them. Does anyone know what cases to use these attributes? I googled—just didn't find any straightforward answers. HTML5 ARIA attribute is what you're looking for. It can be used in your code even without bootstrap. Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. To be precise for your question, here is what your attributes are called as ARIA

HTML5 main element versus ARIA landmark role=“main”

由 假装没事ソ 提交于 2019-11-27 21:36:14
问题 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

When to use the disabled attribute vs the aria-disabled attribute for HTML elements?

由 吃可爱长大的小学妹 提交于 2019-11-27 17:10:49
问题 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> 回答1: I can take your

How to notify screen readers using WAI-ARIA that a div is now visible

由 北城以北 提交于 2019-11-27 11:40:30
问题 How do you notify screen readers using WAI-ARIA that a div is now visible? If we got the html <div id="foo">Present main content</div> <div id="bar" style="display: none;">Hidden content</div> and then we $('#foo').hide(); $('#bar').show(); how do we notify screen readers that they should notify the user about the now visible div (or possibly automatically focus on the now visible div)? 回答1: You do not need generally to tell screen readers that content is now visible. Use of aria-hidden makes

Recommended WAI-ARIA implementation for navigation bar/menu

由 心不动则不痛 提交于 2019-11-27 10:09:39
We are in the process of implementing (i.e. adding) WAI-ARIA support to the main navigation menu of a web portal. Menu is the one shown here: Menu is implemented by means of classic <ul> / <li> / <a> DOM tree, styled with CSS to look like horizontal tabs. What is the recommended WAI-ARIA implementation for such a widget? I'm going to post a possible implementation here as an answer, so to get things going. Skip the remaining paragraphs if you know/don't care about CSS navigation menus in WAI-ARIA context. TA Preamble (so to say) I've read many parts of most recent WAI-ARIA specs from w3org for

What is HTML5 ARIA?

由 六眼飞鱼酱① 提交于 2019-11-27 10:02:15
What is HTML5 ARIA? I do not understand how to implement it. Franci Penov WAI-ARIA is a spec defining support for accessible web apps. It defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers. Of course, for ARIA to work, the HTTP user agent that interprets the markup needs to support ARIA, but the spec is created in such a way, as to allow down-level user agents to ignore the ARIA-specific markup safely

Accessible toggle

由 让人想犯罪 __ 提交于 2019-11-27 07:32:51
问题 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? 回答1: WCAG 2.0 allows a conforming alternate version (under some conditions): For Level A conformance (the minimum level of conformance),
订阅 wai-aria