wai-aria

I have a list of options from which one can be selected. For all intents and purposes HTML's <select> element covers this. Since we need a different visual presentation, I'm looking at using WAI ARIA role="listbox" . I'm unclear on how to use aria-activedescendant , aria-selected and aria-checked . Questions regarding focus/active state: If I use aria-activedescendant on the listbox to point to the [role="option"] that is currently active (has "virtual focus"), I would use [aria-selected] . How would best I tell the option element itself that it is active (has "virtual focus") to represent

I'm in the process of improving accessibility in my HTML using HTML5 and WAI-ARIA. It is OK to have the following set up? <!-- main content --> <section id="main" role="main"> <h1>The main content</h1> <!-- This div needs to be here for styling reasons --> <div class="the-content"> <p>All the text that goes with the main content</p> </div> <!-- the sidebar --> <aside id="sidebar" role="complementary"> <h2>A title</h2> <p>Some text</p> <aside> </section> The thing I'm not sure of is if I should have the <aside> element outside of the <section> and the role="main" container. Does that matter? It

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 mean it will be mapped to the accessibility API ? Setting a giant negative text-indent is typically

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 attributes or aria-level attributes? I would avoid the use of aria-level and use a <ol> element

I wanted to know what the aria-* attributes are used for. What values can they have, and are they defined values or can I create my own values? ARIA stands for Accessible Rich Internet Applications and is designed to improve the accessibility of Rich Internet Applications, i.e. to make them more usable for people with disabilities. Help on the various attributes is available here . I don't think you can create your own ARIA attributes. 来源： https://stackoverflow.com/questions/4176844/can-someone-explain-the-html5-aria-attribute

I have an HTML Structure which really has 2 headers: At the tippity top of the page it has some navigation items and buttons, below that is another section which holds the logo and what I would call the main navigation. Both are sectioned off in wrappers because of full width CSS3 gradients so my structure looks something like this: <div id="topWrap"> <div id="topNavWrap"> <nav id="utilityLinks"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> </ul> </nav> <div id="quickLinks"> <ul> <li>

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? 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 a screen reader. You only need aria-hidden="true" if there's something on the display that you want to hide