Created With

link親和性

參考資料:無障礙網頁 | MDN


link文字內容

優秀的內容結構應該要有標題、段落、清單等標籤

撰寫文章時應力求淺顯易懂,不要過度複雜,避免使用艱澀的詞彙及術語

避免使用 - 橫線符號

使用全稱而非縮寫

link排版

不要用表格做排版

比起使用 div,更應該使用語意化標籤,例如 header, nav, main, section, article, aside, footer

link介面控制

介面控制指的是網頁中使用者可以互動的元件,主要包括:

預設情況下,瀏覽器允許使用者用鍵盤操作介面控制元件

表單元件應該要有對應的標籤 <label>

連結 <a> 和表單中的標籤 <label> 的文字內容應該要是有意義的、可理解的、獨特的

link資料表格

利用 <th> 標示表格的標題

利用 <caption> 標示表格的替代文字,提供表格內容的快速總結

link圖片

圖片 <img> 可使用以下方法來提供文字訊息:

link連結

連結文字和非連結文字的差異應該不只一項,例如採用不同的色彩和文字裝飾

要注意所有文字和背景的對比度

會開啟新分頁或檔案的連結要有文字說明,例如:

link工具

測試網頁親和性的工具:

WAVE (opens in new tab)

Colorable (opens in new tab)

親和性文字內容排版介面控制資料表格圖片連結工具

技術筆記

準備chevron_right
HTMLchevron_right
CSS 基礎chevron_right
JS 基礎chevron_right
Git & GitHubchevron_right
CSS 進階chevron_right
Node.jschevron_right

返回個人網站