我們正在實施(即添加)WAI-ARIA支持到門戶網站的主導航菜單。菜單是這裏所示:推薦WAI-ARIA實施導航欄/菜單
菜單是由經典<ul>
/<li>
/<a>
DOM樹來實現,用CSS看起來像水平製表風格。
對於這樣一個小部件,推薦的WAI-ARIA實現是什麼?
我打算在這裏發佈一個可能的實現作爲答案,以便讓事情順利進行。
如果您知道/不關心WAI-ARIA上下文中的CSS導航菜單,請跳過其餘段落。
TA
序言(這麼說)
我讀過從w3org最近WAI-ARIA規範的許多地方的一般理解,分類,等等。然後,我已閱讀了有關UI小部件實現的幾個示例。在這樣一個CSS導航菜單中,我找不到任何特別針對目標的例子。我一直髮現的最接近的小部件是Menu,MenuBar和TabPanel。當然,我也看過Free ARIA Community group(這個問題最初是在這裏發佈的)。
我會說,沒有這些小部件完全匹配(CSS)導航菜單。例如,TabPanel可以控制頁面中的一些內容( - > aria-controls),也可能是MenuBar;但我不確定導航菜單是否控制頁面中的內容(它控制着要顯示的下一頁)。沒有更進一步,還有一些其他的差異。 參考文獻在帖子末尾。如果有人認爲導航菜單更好(或更適合),我們很樂意瞭解它們。
參考
- https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu
- http://wiki.jqueryui.com/w/page/38666403/Menubar
- http://www.oaa-accessibility.org/examplep/menubar2/
- http://test.cita.illinois.edu/aria/menubar/
-
- http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
- http://www.w3.org/TR/wai-aria-practices/#menu
- http://www.w3.org/TR/wai-aria/roles
- http://www-03.ibm.com/able/resources/wai_aria_intro.html
我幾乎已經準備好放棄詠歎調規格,直到我讀到你的答案。對我來說,這是我在菜單中缺少的「演示文稿」角色,導致出現奇怪的行爲,例如每個菜單項被讀作「1之1」而不是「1 [長度]」。我在網上看到的大多數例子都會導致這種不受歡迎的行爲,除了你的回答之外,我還沒有發現任何說'ul [role = menu]> li [role = presentation]> [role = menuitem]。做得好。 –
實際上,當我嘗試使用'ul [role = menu]> li> a [role = menuitem]'時,「1的1」問題。可以肯定的是,大多數人都在推薦'ul [role = menu]> li [role = menuitem]> a',這根本不起作用!它會讀取菜單項,但由於沒有鏈接集中,你不能去任何地方。 –
很高興幫助!據我所知,每當你爲* aestetichal *目的插入一些(嵌套的)節點,即定位,顯示/隱藏,背景着色等時,就需要xxx [role = presentation]。但是這些節點對於* content *的觀點來說沒有任何意義,因此您將它們標記爲任何可訪問性工具。 – superjos