Databases
StackOverflow2013
Postsdbo
PORecommended WAI-ARIA implementation for navigation bar/menu
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORecommended WAI-ARIA implementation for navigation bar/menu
    primarykey
    data
    text
    <p>We are in the process of implementing (i.e. adding) WAI-ARIA support to the main navigation menu of a web portal. Menu is the one shown here: </p> <p><img src="https://i.stack.imgur.com/S4Ewa.png" alt="Navigation menu screenshot"></p> <p>Menu is implemented by means of classic <code>&lt;ul&gt;</code> / <code>&lt;li&gt;</code> / <code>&lt;a&gt;</code> DOM tree, styled with CSS to look like horizontal tabs.</p> <p>What is the recommended WAI-ARIA implementation for such a widget?</p> <p>I'm going to post a possible implementation here as an answer, so to get things going.</p> <p>Skip the remaining paragraphs if you know/don't care about CSS navigation menus in WAI-ARIA context.</p> <p>TA</p> <p><strong>Preamble</strong> (so to say)</p> <p>I've read many parts of most recent WAI-ARIA specs from w3org for a general understanding, taxonomy, and so on. Then I've read about several examples of UI widget implementations. I could not find any example specifically targetd at such a CSS navigation menu. The closest widgets I've always found around are the Menu, the MenuBar, and the TabPanel. Of course I also looked in <a href="https://groups.google.com/forum/?fromgroups=#!topic/free-aria/HWMoOUsnBOw" rel="noreferrer">Free ARIA Community group</a> (where this question was originally posted).</p> <p>I'd say that <em>none</em> of those widgets exactly match a (CSS) navigation menu. As an example, TabPanel may control some content in the page (--> aria-controls), maybe MenuBar too; but I'm not at all sure that a navigation menu controls content in the page (it controls the next page to show). Without going further, there are some other differences as well. References are at the end of the post. If anyone as better (or more fit) examples of navigation menu, we'd be glad to know about them.</p> <p><strong>References</strong></p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu</a></li> <li><a href="http://wiki.jqueryui.com/w/page/38666403/Menubar" rel="noreferrer">http://wiki.jqueryui.com/w/page/38666403/Menubar</a></li> <li><a href="http://www.oaa-accessibility.org/examplep/menubar2/" rel="noreferrer">http://www.oaa-accessibility.org/examplep/menubar2/</a></li> <li><a href="http://test.cita.illinois.edu/aria/menubar/" rel="noreferrer">http://test.cita.illinois.edu/aria/menubar/</a></li> <li><a href="http://dev.aol.com/dhtml_style_guide#menu" rel="noreferrer">http://dev.aol.com/dhtml_style_guide#menu</a></li> <li><a href="http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm" rel="noreferrer">http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm</a></li> <li><a href="http://www.w3.org/TR/wai-aria-practices/#menu" rel="noreferrer">http://www.w3.org/TR/wai-aria-practices/#menu</a></li> <li><a href="http://www.w3.org/TR/wai-aria/roles" rel="noreferrer">http://www.w3.org/TR/wai-aria/roles</a></li> <li><a href="http://www-03.ibm.com/able/resources/wai_aria_intro.html" rel="noreferrer">http://www-03.ibm.com/able/resources/wai_aria_intro.html</a></li> </ul>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USsuperjos
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORecommended WAI-ARIA implementation for navigation bar/menu
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PORecommended WAI-ARIA implementation for navigation bar/menu
      1. USJohnNKing
      1. VTFavorite
    3. VO
      singulars
      1. PORecommended WAI-ARIA implementation for navigation bar/menu
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload