wai-aria

Text console for development in JAWS?

二次信任 提交于 2019-12-21 12:18:36
问题 I'm working on a web application and I want to make it easy to use via screen reader. Testing stuff in JAWS is time consuming. Is it possible to make JAWS display text instead of reading it? I don't want actually to hear the content during development. I just want to see what would be read by JAWS. 回答1: There is no speech viewer for Jaws, as far as I know. However, you can make it write all speech output to a log file using the "/z" switch. Unfortunately, you cannot view the log file in a

The reason to use role=“list” and role=“listitem”?

本小妞迷上赌 提交于 2019-12-21 10:44:12
问题 Are there any benefits of using the following code? <ul role="list"> <li role="listitem"></li> <li role="listitem"></li> <li role="listitem"></li> </ul> Does the following code have the same meaning to assistive technologies? <ul> <li></li> <li></li> <li></li> </ul> 回答1: The answer is yes, assistive technologies work well when correct semantic markup is used for structuring the document. If it is a simple static list then there is no need to mark them with the roles. For example: Consider the

How does CSS opacity affect accessibility?

喜欢而已 提交于 2019-12-20 17:28:11
问题 After browsing a number of Google and other SO articles, I've decided to ask my question plainly in hopes of a simple, direct answer. To add one further step to the discussion on Does opacity:0 have exactly the same effect as visibility:hidden: I understand that display:none and visibility:hidden hide elements from screenreaders and the like, but what about opacity:0 ? The table in one of the answers to the linked question notes that opacity participates in taborder , so does that necessarily

aria-live and JAWS

馋奶兔 提交于 2019-12-20 09:37:42
问题 I'm trying to get an aria-live region to work correctly with JAWS 11 and IE8. Using the code below, I can get JAWS to announce the new value when the button is clicked, but the behaviour is not what I would expect. JSFiddle of this example <!DOCTYPE html> <html> <head></head> <body> <button onclick="document.getElementById('statusbar').innerHTML = parseInt(document.getElementById('statusbar').innerHTML) + 1">Update</button> <div id="statusbar" aria-live="polite">0</div> </body> </html> Using

Proper ARIA handling of breadcrumb navigation

↘锁芯ラ 提交于 2019-12-20 09:23:52
问题 What can be done to improve the accessibility of a breadcrumb menu similar to: <ul class="breadcrumbs" aria-label="breadcrumb navigation" role="navigation"> <li><a href="~/">Home</a></li> <li><a href="~/news">News</a></li> <li class="unavailable"><a href="#">@Model.Title</a></li> </ul> Given in this example Home is the site root, News is the first child, and the unavailable class is the current item the /news/article item. Is there anything that could be done to improve this such as using rel

HTML5 role attribute for tags

一笑奈何 提交于 2019-12-20 07:58:30
问题 My HTML5 template has h1 elements on every page (that I use for keyword) on top left part of the page. Is there a role attribute to sign them as tags like the tags in WorPress? 回答1: As defined by W3C, you can use this values for role attribute: banner complementary contentinfo definition main navigation note search contentinfo purpose is to provide meta information about the content, so it could be used for tag management. That said, <h1> shouldn't be used as tags, as it's main purpose is to

aria-labelledby not working with NVDA/Firefox

强颜欢笑 提交于 2019-12-20 05:17:27
问题 I need some help to make NVDA screen reader read a custom description of a math expression I've written in my index.html. The math expression is inside of a sentence. So it looks pretty much like this: <div> some text here... ε<sub>x</sub> = -200(10<sup>-6</sup>), ε<sub>y</sub> = 550(10<sup>-6</sup>), γ<sub>xy</sub> = 150(10<sup>-6</sup>) some more text here... <div> The problem is that screen readers do not read the superscripts nor the minus symbols. To fix this problem I added a aria

aria-labelledby not working with NVDA/Firefox

不羁岁月 提交于 2019-12-20 05:17:09
问题 I need some help to make NVDA screen reader read a custom description of a math expression I've written in my index.html. The math expression is inside of a sentence. So it looks pretty much like this: <div> some text here... ε<sub>x</sub> = -200(10<sup>-6</sup>), ε<sub>y</sub> = 550(10<sup>-6</sup>), γ<sub>xy</sub> = 150(10<sup>-6</sup>) some more text here... <div> The problem is that screen readers do not read the superscripts nor the minus symbols. To fix this problem I added a aria

Is presence of aria-hidden sufficient or is value set to “true” required (aria-hidden=“true”)

吃可爱长大的小学妹 提交于 2019-12-20 03:07:07
问题 The html "hidden" attribute is a boolean and does NOT need a value set. It's mere presence is sufficient. What about the "aria-hidden" attribute? Is it's mere presence sufficient? Or does it require the value "true" to be set? 回答1: aria-hidden must have a value of true|false. Note, however, that aria-hidden is not needed if you are using the hidden attribute or if you are using CSS visibility:none or display:hidden . All three of these latter three ways to hide will also hide the element from

How to select all elements with particular ARIA value using jQuery?

你离开我真会死。 提交于 2019-12-19 05:17:14
问题 Given i have a sample page that looks like this: <!DOCTYPE html> <html> <body> <h1 aria-controls="name1">heading</h1> <p aria-controls="name2">paragraph</p> <span aria-controls="name1">span</span> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html> How would i use jQuery to select the (2) elements with their aria-controls attribute set to name1 ? (ignoring the fact that the element types are different). Thank you!