wai-aria

I'm doing some code clean up / validation in a web site, and have run into an issue. The site have a main menu (menubar) where the current page should be indicated. The menu structure as is: <nav role="navigation"> <ul role="menubar"> <li role="menuitem" aria-selected="true"> <a href="currentpage">Current page</a> </li> <li role="menuitem"> <a href="anotherpage">Another page</a> </li> </ul> </nav> According to the WAI-ARIA spec, the state aria-selected is not allowed on the role menuitem: http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected . Neither can I find any state for

I've built an image gallery that uses div s that contains a background image whose size is set to cover , but I am concerned about accessibility. My questions are as follows: May I use the title attribute on a div in lieu of alt-text attribute on an img tag? Would adding a figcaption element as a sibling to the div , and nesting both in a figure element help accessibility? May I use aria-labeledby on the div ? Should I inject the text into the div as well? Thanks in advance for any insight into these questions! You are using a div to show an image, then you do not use the native element. You

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 I cannot seem to find one. E.g.: <time datetime="2015" aria-?="Two thousand and fifteen">MMXV</time> unobf 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

Is there any lightbox solution (along the lines of Fancybox, etc.) that is both accessible (VoiceOver & JAWS, etc., compatible, with perhaps WAI-ARIA roles) and mobile-friendly? Bonus points for being a jQuery plugin. It might be too late for you but I'll answer for people who may land here from Google search: recently I used NETEYE Touch-Gallery and it worked pretty well, at least on iPhone and Android. I am making the same research at the moment to integrate into our project! I have looked at a lot of them and so far my favorite in terms of quality is: Swipe box http://brutaldesign.github.io

I have seen aria-haspopup attribute being used on toolbar menu of applications such as WYSIWYG editor . However, I haven't seen it being used on the main navigation in any ARIA demonstration website. Was this attribute introduced mainly for toolbar menu of applications? Is it appropriate and reasonable to use it on the main navigation (which has submenu) of a website? Just saw this attribute being used on the markup of jQuery UI Selectmenu (on the a element, which is the switch of selectmenu). So it seems to be okay to use it on any code. <span class="ui-selectmenu-button css-scope"> <a class=

I'm just wondering whether I should expect browsers and assistive technilogy circa January 2015 to use speak:none in a manner equivalent to setting aria-hidden="true". I'd like to indicate that some semi-opaque text should be ignored, and am wondering whether I can do it in one operation (just adding a class that sets the opaque style and speak:none, rather than adding the class and setting the aria-hidden attribute). 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

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> 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 role="listitem" whose baseConcept is defined as HTML li. And the baseConcept HTML li is almost identical to

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. 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 text editor while the screen reader is running, because it is locked. Open a command prompt or bring up the Run

A few days ago, I have started searching on the Internet for tutorials and documentation about WAI-ARIA for just about any kind of AJAX requests. I am used to coding nested dropdown lists using jQuery and AJAX. It works pretty well but is not natively accessible. We need to use WAI-ARIA specific tags to "enable" accessibility for all kind of dynamic stuffs like AJAX, for instance. One of my requirement is the following: Let's say I have a State dropdown that updates a Region dropdown using the onchange event. How can I interact with the screen reader using WAI-ARIA and jQuery in order to tell