iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
自我挑戰組

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

第二日:反正 HTML 常用的就那幾種標籤,為什麼要全部都看過一遍?

  • 分享至 

  • xImage
  •  

大概每年的這個時候,在台灣凌晨一點都會有一場饗宴,

那就是蘋果發表會!!

我以為我大喊「我好興奮啊!我好興奮啊!!」
但沒想到十二點一到直接睡死,

「已經過了會追蘋果發表會的年紀了呢...」

想想不看的原因,除了體力沒那麼好之外,
沒有可以一起熬夜看直撥發表會的同伴也是其中一個因素,
啊啊,還有懶人包,因為朋友通常都會說「明天看懶人包就好啦」,
慢慢的大家就沒有聚在一起(連線上都沒有),
當然 $$ 也是重要考量,為了給小孩最好的,叔我的錢都花在家庭上了,
也沒有多餘的 $$ 可以跟上最新裝置。(iPhone 8 再戰 n 年!)

說到發表會,軟硬體的更新,就會嚴重影響開發,
通常軟硬體在發布正式版前的 beta 版,
開發者就必須去暸解與關注,
否則等到真正發布才要改,那已經慢別人好多步了。

視覺設計師可能會關注可視範圍的改變,
網頁切版師(雖然好像比較少這個職位,但就容許我這樣稱呼)要關注的,
那就是瀏覽器的更新,因為可能以前不能用的技術可以派上用場,
或是什麼東西已經被屏棄(可能是安全的疑慮或是什麼的)。

所以說,必須不斷的更新知識,才有辦法因應不斷變化的環境,
HTML 也是一樣的,當瀏覽器不斷在更新,HTML 的支援也會不同,
再加上無障礙網頁設計,那要懂的就更多了。

「喔!我懂了,鋪陳那麼多,今天就是要教 HTML,對嗎?」

叔我才沒那麼有空,我還有小孩要顧,大概說一下就好了。

當初我手邊剛好有這一本書:HTML5.CSS3精緻範例辭典
這本有點久了,是 HTML5 與 CSS3 剛出沒多久的時候買的,
建議各位手邊都要放一本辭典,
雖然現在線上查很容易,但翻書還是比較快,
我這一本內容都會有瀏覽器版本提示、用途說明、範例、屬性(還有 HTML4 & 5的標注)
所以很容易可以理解該標籤是用來做什麼的。

就好像 input 有個 type 是 date,
我會先確定一下這個屬性能否用在我的瀏覽器版本需求上,
政府專案要用 IE11 的話,我就不會使用這個屬性,
就要另外找套件來使用。

然後我推崇盡量使用原生系統,是因為瀏覽器在支援 HTML 的時候,
一定有先考量過無障礙的問題了,若連原生的都無法通過無障礙使用,
那我們這些無障礙網頁開發者根本就都不用玩了。

另外,站在 UX 的角度上,每個系統都有自己的生態,
如果硬要把自己的設計,硬套在每個不同系統的話,
就有可能造成誤按之類的事情發生。
例如,我設計了一個 Dialog,
底部有兩個按鈕,主要按鈕在右側,
那如果原生系統的 Dialog,主要按鈕是在左側,
那就會造成行為衝突,偶爾就會讓使用者操作失誤。
當然另一派就會說我想要讓我的畫面在所有系統上都有一樣的體驗,
這說法也沒錯,所以必須考量使用者習性跟服務的特性,
思考使用者每天都花多久的時間黏在你的服務上,
再決定這件事情要如何設計,
反之,若你的服務只佔使用者每天一點點時間,
那怎麼比得過他使用原生系統的時間呢?

另另外,大叔我啊,最不喜歡使用套件了,每使用套件就多一層依賴,
然後如果套件沒更新,又要用其他的或是就不更新了,都不是好事,
所以啊,如果是自己設計的,那就又要花時間去維護他...何必呢?何苦呢?

當然我也不是要阻止大家不要使用套件的意思,
精確的意思應該是必須注意套件的活躍程度,
不要看到很好用或很美的外觀就好,
還是至少要看一下上 code 的頻率跟上次修改日期。

哎,話題扯遠了,
不過這些議題都是在要不要使用某個 HTML 的時候有關,
請看官們要多注意,在你下手前,先思考過。

回歸標題:
「反正 HTML 常用的就那幾種 tag,為什麼要全部都看過一遍?」

這題的解答很簡單,如果你不了解所有的 tag ,
那你就不知道要在什麼時候、什麼地方、使用方法,
讓使用者得到最好的體驗,
我也可以內容從頭到尾全部使用 div 就好,
但這樣不僅 SEO 會很糟,也沒辦法讓報讀軟體正確解析文章結構。

再舉個例子,
例如有一個表單輸入框,目的是要讓人家填寫電話號碼,
用桌機的人可能不覺得有差,
但是用手機打字的人差異就很大,
沒有先設定好的話,點擊輸入框彈出來的鍵盤模式,
如果是文字那就還要讓使用者自行切換,
也許您操作的很好,
但對於視覺或肢體不太方便的人,他所要花費的時間就更多了,
那這樣你說重不重要呢?要不要全部看過一遍呢?

我是覺得啦,文件至少一定要看,
多了解一點 HTML 特性,也就能提升 UX ,進而達成無障礙網頁設計。(順便呼應標題)

「畢竟大家都不想自己做出來的東西像垃圾一般給人唾棄,對吧?」

「對...對吧?」

大叔我是決不允許自己做出來的東西是垃圾,
不然還乾脆不要做。


上一篇
第一日:意識到無障礙網頁設計的重要性
下一篇
第三日:無障礙網頁設計 HTML 標籤注意事項
系列文
無障礙網頁設計大叔日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言