iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
自我挑戰組

無障礙網頁設計大叔日記系列 第 19

第十九日:無障礙網頁設計的地圖( Map) 要注意些什麼?

  • 分享至 

  • xImage
  •  

今天早上本來要去打籃球,可惜下雨了,
上一次打已經是小孩出生前的事了,
那時候有租國中的室內籃球場地,
而且每週都會去打球,
重點是還都可以打 5 vs 5,
大叔我那時候正處於顛峰狀態,
什麼是巔峰狀態?不會是 18 來歲時隨便都體力充沛,
而是經過比賽的洗禮以及持續性的運動,
得到的比賽經驗與體能狀態,
就好像 Michael Jordan 在 Last Dance 裡說過,
1998 那年,才是他的巔峰,

結果大叔我在巔峰狀態時摔了一跤手腕骨折,
適逢小孩要出生之前,
大叔我被罵到臭頭,
所以到現在幾乎都還沒碰過球,難過。


其實齁,
前面講了 18 篇,
客官們有沒有注意到,
我們說來說去其實就是那幾個重點,
如果你現在還沒有感覺到,
大叔我...用地圖再講一次吧~

網頁地圖的設計依舊要注意以下重點,這些重點整理自 Minnesoda IT Service

  • 主題:地圖一定都有一個主題,資料的提供也都圍繞在這主題上,避免不必要得資訊影響。
  • 標題:提供此主題代表的文字。
  • 區域:地圖初始化時,請聚焦在主題的區域。
  • 顏色:對比要足夠。
  • 樣式:不能只以顏色作為區分依據。
  • 圖例:提供地圖元件所代表的意義。另外圖例的大小,最好等於在地圖上展示的大小。
  • 文字:大小最好要有 16px 以上,且不要使用陰影等阻礙資訊的裝飾。
  • 符號與關聯:符號或提示與現實世界的物品可以聯想的到,若符號不足以表達,請佐以文字一起展示。
  • 邊界:若有必要,提供有清楚可區分邊界的樣式。
  • 描述:需要提供長描述或表格顯示資料。
  • 搜尋:提供快捷鍵搜尋資訊。
  • 快捷鍵:提供鍵盤快捷鍵設定說明與操作動作。
  • 匯出:輸出檔案盡量選擇無太多圖層的檔案,例如 PDF,且提供至少一種開放格式。
  • 互動:
    • 鍵盤可操作。
    • 注意螢幕報讀順序。
    • 提供可調整的功能,例如放大縮小、拖曳或鍵盤移動地圖、回到中心點、切換圖磚等。
    • 使用 aria 補充狀態,例如點擊地標後開啟的小框框,可以使用 aria-live 表示狀態。

大致上重點就是這些,
其實跟我們之前學的無障礙網頁知識差不了多少,
只是要更好的體驗,我們就必須盡可能提供多一點資訊與方便操作的功能。
當然,還有很多可能沒有提到,有待大家之後慢慢挖掘,
而且這些準則在實體地圖也是類似的,
所以如果你有要印出實體地圖,這些準則您也需要考慮進去,只是單位可能有些不一樣。

接下來,我們來看看我們最常用的地圖之一:Google maps 的 Accessibility提供的無障礙功能有哪些,
首先區分三種裝置:桌機、Android、iOS,
桌機的話支援三種:Chromebooks 開啟 ChromeVox 並使用 Chrome、在有 NVDA 或 JAWS 的 Windows 上使用 Firefox 以及MMac 使用者開啟旁白 VoiceOver 在開啟 Safari。

Android 使用 TalkBack,iOS 使用 VoiceOver。

三種裝置皆能操作文字大小變更、地圖縮放以及地圖移動。

其實大致上都還是那些注意事項,
不過用嘴巴說的比較快就是了...
因為地圖我們還可以使用聲音傳遞、虛擬觸覺,
還有好多可以發展的地方,
而這些其實我們相對比較方便的人來說,也是有加分效果的,
例如開車的時候,有時候我們可以不看螢幕直接聽聲音叫我們在哪裡要轉彎,
讓我們更專注在路況與路標上,
這也是一種回饋的表現形式。


已經是第十九日了,再 11 天,這三十天的流水帳日記就可以不用再寫了,
其實啊寫到現在,有時候一直在猶豫到底要不要把文章弄得美輪美奐、搭配圖文說明,
但身體實在是有點負荷不了,光打字就有夠累了,還要把圖上傳到線上空間,然後還要取得連結,
光是弄一張圖就耗費不少時間了,所以就懶了。

不過是這樣子的啦,重點都有寫到、連結都有給到,那至少還有給人去補充細節,那就夠了,
因為沒有去點連結的人,可能也就是想稍微暸解知識一下,這也很棒,
有點連結進去看的人,就是被大叔推了一把更深入的研究,這也很棒,
不管那種,因為看到標題與簡述進來看文章的人,
大叔都很感謝,
還是那句話,
只要多一個人暸解無障礙網頁設計,就多一份力量貢獻於社會,
大叔只能給兩個字,

感激!


上一篇
第十八日:已經 Hot 很久的資料/資訊視覺化的無障礙網頁設計又如何呢?
下一篇
第二十日: 從無障礙網路空間服務網調查報告,思考令人煩惱的問題(一):三大項目
系列文
無障礙網頁設計大叔日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言