2017-06-23 107 views
1

在我的網頁中,我有一半是使用Google地圖的地圖顯示。我應該添加什麼aria-role到顯示地圖的canvas元素?我查看了WAI-ARIA docs以瞭解可能的角色定義,最近發現的是widget什麼是適合地圖元素的WAI-ARIA角色屬性

什麼是適合aria-role的頁面上的地圖?

+0

爲什麼要改變角色?如果地圖是'',那麼它已經有適當的語義。當本地元素的語義不正確時(例如,''實際上是一個按鈕),應該使用'role'屬性。 –

回答

1

Google Map是盲人可以訪問的嗎?編號

該問題的答案給了你一些線索:給它presentation角色和aria-hidden=true屬性。如果您的地圖描述行程,您應該正確替換缺失信息,如全文行程。

如:

<div role="presentation" aria-hidden="true">`<!-- my non accessible widget here -->`</div> 
<div>Visit us at our store, Penny Lane, 22, Liverpool<br /> 
    Liverpool City bus, Line 3</div> 

注:Widget是你不能給一個元素的抽象作用。

編輯:這將刪除能力的屏幕閱讀器與畫布進行互動,無論從鍵盤和鼠標,可能不適合使用屏幕閱讀器,例如文盲(當畫布具有更好的可訪問性功能比谷歌地圖')。如果您確實想訪問可訪問的畫布,請不要更改本機語義,否則,在此情況下,請先放置鏈接以跳轉畫布,指定它具有非常不直觀的鍵盤支持,並且可能無法使用鼠標。

+0

https://support.google.com/maps/answer/6396990?co=GENIE.Platform%3DDesktop&hl=zh-CN –

+1

我不同意此答案的原因很多。首先,無障礙不僅僅是盲人。其次,如果谷歌地圖是一個交互式小部件,而不僅僅是一個圖像,我甚至不確定您的「否」是正確的(https://support.google.com/maps/answer/6396990?co=GENIE.Platform %3DDesktop&HL = EN)。第三,'role =「presentation」'是爲了移除本地語義,這個問題是一個畫布,所以不需要刪除它。第四,將'role =「presentation」放在非語義'div'元素上是多餘的,根本沒有任何用處。 –

+0

@SteveRepsher可訪問性不是盲人,但是今天,只有屏幕閱讀器用戶才能看到元素和角色(爲他們提供文本替代或地址是更好的選擇)。角色是繼承的。當您穿上'div'的作用,這'div'內的所有元素將繼承這個角色,我假定TUSER對了'canvas'代碼 – Adam

1

如果使用的是谷歌地圖,你應該使用role="application",因爲它可以使用屏幕閱讀器與地圖進行互動,並根據ARIA規範的網站上的應用程序的作用是:

的結構包含一個或多個可聚焦元素,這些元素需要用戶輸入,例如鍵盤或手勢事件,這些輸入不會遵循小部件角色所支持的標準交互模式 。

對於沒有失明但視力低下並且實際上可以從地圖中受益的用戶尤其如此。

https://www.w3.org/TR/wai-aria/#application

+0

這在我的案例中效果最好