FAQ Database Discussion Community


Using Aria to make a div table accessible

html,html5,wai-aria
Context: I have a div table that a client wants to be screen reader accessible like a regular html table is using the table commands Problem: Cant get aria to work to announce the header with the row value to keep the integrity intact with the data. Solutions: Only using...

How can I make an HTML input element in a WAI-ARIA tree accessible to VoiceOver in Safari?

html,safari,accessibility,wai-aria,voiceover
I want to put an <input> element inside an element with role="tree" like this: <div role="tree"> <div role="treeitem"> <h1>Tree Input</h1> <input> <a href="#">Submit</a> </div> </div> However, when I do this, I am unable to access the <input> element using my screen reader – VoiceOver in Safari on OS X. When...

Does an html element require focus to be read by screen readers

screen,wai-aria,reader
If I show a modal somewhere on the screen, and I want the screen reader to read it at some point, does setting the aria-live to one of the values suffices, or do I also have to explicitly focus the element when I show it?

What ARIA roles and attributes are appropriate for a non-semantic table?

html5,wai-aria
I am rendering tables of data in two ways, one using semantic table tags and the other a non-semantic groups of <div>s using css display: table and the like. <div class="table"> <div class="table-header"> <div class="table-header-row"> <div class="table-header-cell"></div> </div> </div> <div class="table-body"> <div class="table-body-row"> <div class="table-body-cell"></div> </div> </div> </div> I would...

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
I've created a page using Bootstrap with a standard layout of next and previous page links. On the first page, I disable the 'previous page' link as follows: <div role="navigation"> <ul class="pager"> <li class="previous disabled" aria-disabled="true"> <a href="#">Previous page</a> </li> <li class="next"> <a href="search.php?page=2">Next page</a> </li> </ul> </div> It seems...

aria-label, h-card, or both?

wai-aria,microformats,hcard
Do I need aria-label attributes when I'm using h-card (this is for company contact information in a page footer)? <div class="h-card"> <a class="u-url" href="http://example.com"> <img src="http://example.com/static/logo.svg" alt="Example Logo"> <span class="p-name sr-only">Example Corp.</span> </a> <div aria-label="Address" class="p-adr h-adr"> <span class="p-locality">Eugene</span> <span class="p-region">OR</span> <span class="p-postal-code">97403</span>...

Is there anything that shows what works/doesn't for various screenreader/browser combinations?

accessibility,wai-aria,screen-readers,jaws-screen-reader
I'm enhancing the UI for an application to be more compatible with screen readers. The problem is I keep running into issues and I'm beginning to suspect that it' due to the screen reader itself. Right now I'm mostly testing JAWS 15 with IE 8 (due to corporate limitations it's...

How to hide unnecessary reorder arrows in list

javascript,jquery,css,wai-aria,wai
But the top list should have only down arrow and bottom list should have only up arrow after reordering. i have tried below check this code $('#testidone ul li').append('<span ><img class="down-arrow" id="theImg" src="grey-darrow.png" tabindex="0" /><img class="up-arrow" id="2img" src="theImg.png" tabindex="0" /></span>'); $('#testidone ul li:first span img.up-arrow').css("visibility", "hidden"); $('#testidone ul li:last span...

HTML5 Checkboxes: Which element should have the 'aria-describedby'-attribute

html5,twitter-bootstrap,wai-aria
I currently write a user-interface for a search page on a local application. This search must have checkboxes to limit the scope of the search query. To make this functionality accesible I want to use "wai-aria"-Attributes. So far my markup looks like this: <div class="input-group"> <div class="checkbox-inline"> <input type="checkbox" id="check-bd-1">...

Does an elements with the attribute aria-hidden and css visibility:hidden get read by screen readers?

javascript,html,html5,accessibility,wai-aria
I have a mobile menu that I am hiding from view on desktop with visibility:hidden. I would like to also hide this menu from screen readers on a desktop without using display:none or hidden=hidden if possible. Is aria-hidden=true enough to prevent all the hidden menu links from being read out...

Chrome Vox not getting radio buttons

html,google-chrome,radio-button,accessibility,wai-aria
I'm testing a website for accessibility using Chrome Vox. I have 3 radio buttons, one of which is selected. I have no idea why, but Chrome Vox only reads the selected radio button, the others are ignored. Here's an example: <p>Chrome Vox test</p> <input type="radio" id="radio1" name="radio" tabindex="0" role="radio" aria-checked="false">...

Correct way to mark HTML text as decorative with ARIA

html,accessibility,wai-aria,screen-readers
In an earlier version of the http://getbootstrap.com/components/#pagination page/section, it had the code: <nav> <ul class="pager"> <li class="previous"><a href="#"><span role="presentation">&larr;</span> Older</a></li> ... </ul> </nav> This has been changed to: <nav> <ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li> ... </ul> </nav> The left arrow...

“rel” attribute or “aria-attribute” to link a button to relative div?

html,wai-aria
I'm asking for a suggestion more than for a real problem. I would like to use the more appropriate approach rather than limit to solve my problem. I have a DIV containing text, and a button, that toggle "contenteditable" attribute on it, in order to make it editable. Obviously, I...

Find all display:none attributes and add in aria-hidden attribute using JavaScript

javascript,jquery,accessibility,wai-aria
Is there a way to search for all the instances where display:none is used and add the attribute aria-hidden="true" using JavaScript. My site has hundreds of instances of this and i am looking for a quicker way. Could it be something like this: (added to a function) $(*).css( "display", "none"...

ARIA attributes for reading different text than in the HTML document

html5,accessibility,wai-aria
In my HTML document I am using roman numbers (e.g.: MMXV = 2015). Is there a way to inform screen readers to interpret certain text in another way (e.g.: roman numerals as "Two thousand and fifteen" instead of M-M-X-V)? My guess was that there would be an ARIA attribute, but...

Hide Text from Onpage Search

css,html5,wai-aria
Is there a reliable way to hide text from browsers onpage search capability (e.g. Ctrl+F) while remaining visible? I would expect adding an aria-hidden="true" to solve the problem, but the text is still searchable by browsers....

How to set priority for screen readers of some HTML page parts?

html,accessibility,wai-aria,screen-readers,wcag2.0
I want to make my HTML page suitable for screen readers. Currently, the page have 3 main parts: header, sidebar and content: Screen readers read header at first, then sidebar and finally search results. Unfortunately, users which has problems with eyesight wait for a long time while the program will...

Get child ID and add to parent as ARIA attribute

javascript,jquery,wai-aria
I have a number of images and captions on a page, set up in <figure><img><figcaption> groups. I'd like to use JavaScript (or jQuery) to grab the ID of the figcaption and add an 'aria-labelledby' attribute to the parent <figure>. For example, I have the following (simplified): <figure id="figure1"> <img src="x.jpg">...

WAI-ARIA HTML. How to force 2 divs to be read out as one?

html,accessibility,wai-aria,voiceover
I'm new to ARIA and I'm having trouble combining two divs (both just text) into one readout. The layout is an iOS like table with 2 text labels in one row. The idea is to readout the row as a whole as opposed to labels one by one. I have...

ARIA Roles: Can an 'owned element' be nested arbitrarily deep in the DOM?

html,html5,dom,accessibility,wai-aria
W3C's Accessible Rich Internet Applications (WAI-ARIA) 1.1 defines an owned element as follows (from Part 4): Owned Element: An 'owned element' is any DOM descendant of the element, any element specified as a child via aria-owns, or any DOM descendant of the owned child. (Let's ignore aria-owns, a property that...