Is there anything that shows what works/doesn't for various screenreader/browser combinations?
accessibility,wai-aria,screen-readers,jaws-screen-reader
http://html5accessibility.com/ is a starting point to discover whether a browser has accessibility support for native elements and attributes. If you're looking for documentation of screen reader support for ARIA attributes, check out The Paciello Group. For example, Steve Faulkner published a post on role=alert that may be helpful....
ARIA role of list social media links
The role I would apply to the whole footer is 'contentInfo': Examples of information included in this region of the page are copyrights and links to privacy statements. User agents SHOULD treat elements with the role of contentinfo as navigational landmarks. So it is about the (main) content, but not...
What is the difference between aria-label and title attributes? [duplicate]
html,twitter-bootstrap,title,wai-aria
ARIA-tags are used for disabled visitors of your site. It's very nice of Bootstrap, that they support it by default. 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. For example, ARIA...
Using Aria to make a div table accessible
I don't know if this will actually work considering these roles are intended for real tables. Using an actual table would be a much better idea. Anyway, your roles could be improved. Looks like your columnheader context is wrong. The header row should use the row role: <div class="Heading" role="row">...
Does an elements with the attribute aria-hidden and css visibility:hidden get read by screen readers?
javascript,html,html5,accessibility,wai-aria
Your question is difficult to answer because each screen reader (like each browser) will be implemented with different features. Your best bet is to choose which screen readers you want to specifically support and then read their documentation to ensure that your website will work as expected. Even then, you'll...
Aria roles group or listbox for Material design card?
accessibility,roles,wai-aria,material
I would consider this to be a figure with a figcaption. I would mark this up as follows(in Jade): figure div.card-image img(src="", alt="If needed, any descriptive text here will be spoken by a screen reader, but will not be visible") span.card-title Card Title figcaption Anything within this figcaption tag will...
how to handle WAI ARIA role=“listbox”
aria-checked is indeed more something for a list of very closely related options with actual visible checkboxes that can be toggled on or off. This is most common in the Windows world. Explorer can be set to such a pseudo multi-select mode, or some apps use that to activate or...
Correct way to mark HTML text as decorative with ARIA
html,accessibility,wai-aria,screen-readers
The role attribute is used to override the default mapping of the role of the HTML element to the accessibility tree. This has no effect on the text content of the element. For example, role="button" on a div will allow the div to be announced as a button but will...
HTML5 Checkboxes: Which element should have the 'aria-describedby'-attribute
html5,twitter-bootstrap,wai-aria
According to The Mozilla Dev-Network both ways seem to be possible. "aria-describedby" can be utilized by the container and the input elements. Since the attributes on the input-Element correspond directly with the functionality, this way seems to fit this case.
ARIA attributes for reading different text than in the HTML document
Use the aria-label tag to give the element a meaningful description. Then, hide the roman numerals from screen readers by wrapping them in a span element that has the aria-hidden property set to true to hide the element from screen readers. <time datetime="2015" aria-label="Two thousand and fifteen"> <span aria-hidden="true">MMXV</span> </time>...
What's the difference between HTML 'hidden' and 'aria-hidden' attributes?
ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities. The aria-hidden property tells screen-readers if they should ignore the element. Have a look at the w3 docs for more details: http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden Needless to say we should all be...
How to hide unnecessary reorder arrows in list
javascript,jquery,css,wai-aria,wai
$('#testidone ul li').append('<span ><img class="down-arrow" id="theImg" src="grey-darrow.png" tabindex="0" data-direction="down" /><img class="up-arrow" id="2img" src="theImg.png" tabindex="0" data-direction="up"/></span>'); function setFirstLast(){ $('#testidone ul li:first span img.up-arrow').css("visibility","hidden"); $('#testidone ul li:last span img.down-arrow').css("visibility","hidden"); } setFirstLast(); $("#testidone ul li img").click(function(){ var parentEle = $(this).parent().parent("li");...
Does google index aria attributes?
There is no evidence of search engines paying any attention to ARIA attributes. They are not meant for such use but for making application-like HTML documents more accessible. In particular, aria-label associates an “accessible name” for an “object”, which is expected to be interactive, such as a button, and the...
Is the css setting speak:none now equivalent to aria-hidden=“true”?
html,css,wai-aria,assistive-technology,css-speech
There does not seem to be reliable data on support to speak, but it seems to be unimplemented. Independently of the implementation status, speak: none is not equivalent to aria-hidden="true". According to the CSS Speech Module CR, the speak property “determines whether or not to render text aurally”, i.e. audibly....
Does an html element require focus to be read by screen readers
According to the W3C: Depending upon the action to be performed by the dialog, the object with focus before the dialog box is opened should be saved. This will allow restoring focus to this element when the dialog box is closed. When the dialog box is opened, focus should be...
Does phonegap and cordova supports ARIA roles?
Phonegap does not control this. This question is, does the native webview version for the platform(s) your app supports have control for this? You can check here: http://caniuse.com/#feat=wai-aria Phonegap makes use of native platform webviews for applications so functionality is limited to the supports of the native webviews versions you...
Chrome Vox not getting radio buttons
html,google-chrome,radio-button,accessibility,wai-aria
Actually, this is "default" browser behavior. When navigating with tab one can enter the radio button group and, once inside the group, navigation through the different options is performed using the arrow keys. For me doesn't seem very obvious, but I'll try to understand if this is the expected behavior...
Get child ID and add to parent as ARIA attribute
You need to return that value, otherwise you're not doing anything with it. $('figure').attr('aria-labelledby', function() { return $(this).find('figcaption').attr('id'); }) Demo $('figure').attr('aria-labelledby', function() { return $(this).find('figcaption').attr('id'); }) [aria-labelledby] { color: #f00; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <figure id="figure1"> <img src="x.jpg"> <figcaption id="caption1">Sample</figcaption> </figure>...
What ARIA roles and attributes are appropriate for a non-semantic table?
From http://www.w3.org/TR/wai-aria/roles#grid grid (role) A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table. See also treegrid, row, rowgroup, gridcell, rowheader and columnheader However, if these are appropriate, then you should probably be using an HTML table....
ARIA Roles: Can an 'owned element' be nested arbitrarily deep in the DOM?
html,html5,dom,accessibility,wai-aria
All child relationships must be direct relationships unless the role="presentation" is used on interim structures. Failure to do this can/will cause the counts and values to get messed up. Generally, when there are interim structures, they are hooks for styling or scripting and you could restructure your code to get...
Find all display:none attributes and add in aria-hidden attribute using JavaScript
javascript,jquery,accessibility,wai-aria
use hidden() selector to identify all display none element $( ":hidden").attr( "aria-hidden", "true" ); DEMO...
Manipulating WAI-ARIA calls in Google Visualization API controls
charts,google-visualization,accessibility,wai-aria
If you can identify which element in the control needs the aria-live="polite" attribute, you can set that in a "ready" event handler for the control: google.visualization.events.addListener(control, 'ready', function () { // set aria attributes here }); Whenever the control draws or redraws, the event handler will fire and the attributes...
How to set priority for screen readers of some HTML page parts?
html,accessibility,wai-aria,screen-readers,wcag2.0
Do not try to hide the content from screen reader users, they will want to get access to that content. Instead, you can add landmarks to your content areas. Screen readers will then be able to jump directly to the relevant portion of the page, including the results, but will...
Difference between aria-live=“assertive” and aria-live=“polite”
The behavior of live regions depends on the browser and screen reader being used, but you're on the right track. According to the WAI-ARIA spec: The values of this attribute are expressed in degrees of importance. When regions are specified as polite, assistive technologies will notify users of updates but...
Hide Text from Onpage Search
You can disable the on page search funtion with the follow javascript <SCRIPT LANGUAGE="JavaScript"> window.addEventListener("keydown",function (e) { if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) { e.preventDefault(); } }) </script> Easy and works perfect...
How do I instruct screen readers to skip a SVG chart (axis labels) and read the associated table instead?
accessibility,wai-aria,screen-readers,jaws-screen-reader
Set aria-hidden="true" on the containing element that you do not want read, or on each element you do not want read if there is no common container. Be careful not to put this on a tab-focusable element such as a button or a link because these will still be tab-focusable...
aria-label, h-card, or both?
WAI-ARIA and Microformats don’t "compete": WAI-ARIA is a framework to enhance the accessibility of your web content. Microformats are a convention for marking up structured data on your HTML pages. They have different goals, and consumers of WAI-ARIA don’t necessarily support Microformats, and consumers of Microformats don’t necessarily support WAI-ARIA....
“rel” attribute or “aria-attribute” to link a button to relative div?
The button element can’t have a rel attribute (as you can easily check yourself), and WAI-ARIA does not define an aria-edit-div attribute. I don’t have experience with it, but maybe (!) the aria-controls attribute is appropriate: Identifies the element (or elements) whose contents or presence are controlled by the current...
WAI-ARIA HTML. How to force 2 divs to be read out as one?
html,accessibility,wai-aria,voiceover
First let me say that you really don't need to do this. Screen reader users are used to dealing with HTML structure like this and can get around it easily. However, if you want to do this: Create an offscreen style. .offscreen { border: 0; clip: rect(0 0 0 0);...
How can I make an HTML input element in a WAI-ARIA tree accessible to VoiceOver in Safari?
html,safari,accessibility,wai-aria,voiceover
According to Apple Accessibility, this is a bug. I guess I did nothing wrong and that I'll just have to wait for a fix. The bug is in WebKit, an open-source layout engine used by Safari. A bug report can be found here....
Can aria-disabled only be applied to a focusable element? Doesn't it also apply to child elements?
html5,twitter-bootstrap,accessibility,wai-aria,screen-readers
With JAWS 16, both IE and Chrome have the problem you describe, but FF 38 works correctly (not sure about previous versions of FF). When I tab to the link where the <li> has aria-disabled="true" and there's not an aria-disabled="true" on the <a>, FF 38 and JAWS 16 says "previous...