iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

實踐無障礙網頁設計(Web Accessibility) 系列

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee
關於實踐「無障礙網頁」,其實沒有這麼難!首先會在文章釐清「障礙」的定義,帶大家瞭解實作的每個環節。希望透過實踐過程的紀錄,讓自己及更多開發者可以有無障礙的概念,幫助產品擴大使用族群、也讓更多使用者受惠。最後也會羅列整理好的學習資源。

鐵人鍊成 | 共 30 篇文章 | 164 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室 v3.0
DAY 1

達標好文 無障礙網站又稱為可訪問的網站,難道還有不可訪問的網站嗎?

只要花 60 秒瞭解「無障礙網站」概念 Your Website + Accessibility = BFF —— Jenn Lukas 前言 「網站」是...

2019-09-16 ‧ 由 Askie Lin 分享
DAY 2

無障礙標章:WCAG 與 NCC 國家通訊傳播委員會的無障礙規範(申請流程與標章使用規定)

十個真實生活中的幫助 Web Accessibility: Essential for some, useful for all. - W3C WAI 一...

2019-09-17 ‧ 由 Askie Lin 分享
DAY 3

無障礙網站:HTML 元素與客製化控制組件的語義

TL;DR 本篇文章學習目的: 理解 HTML 之於瀏覽器與的示能性 理解 HTML 元素與客製化控制組件的語義賦予方式之差異 Affordance 示能...

2019-09-18 ‧ 由 Askie Lin 分享
DAY 4

無障礙網站之 HTML 屬性介紹:精通替代文字 alt 屬性

替代文字 Alternative text 看到文章標題也許你會想:「啊不是就是幫元素加上 alt 屬性這麼簡單嗎?」 沒錯,添加替代文字是很容易沒錯,不過理解...

2019-09-19 ‧ 由 Askie Lin 分享
DAY 5

達標好文 無障礙網站之 HTML 屬性介紹:tabindex

TL;DR 本篇文章學習之重點: 瞭解讓功能可以使用鍵盤操作功能的重要性 瞭解怎麼透過鍵盤瀏覽網頁 瞭解 tabindex 的用法 Foucs 焦點 什麼是...

2019-09-20 ‧ 由 Askie Lin 分享
DAY 6

實踐無障礙網站一定要先知道的 WAI-ARIA 的 5 個重要觀念

打造無障礙網站的基礎 無障礙的每個頁面內容需要在「表單」、「語義」、「結構」、「互動行為」下功夫,使用輔助科技的人們就能接受到真正的資訊。 以下基礎知識在前幾篇...

2019-09-21 ‧ 由 Askie Lin 分享
DAY 7

無障礙網站之 WAI-ARIA 的角色介紹(Role)

Hi there! 讀過前篇文章,對 WAI-ARIA 已經有基本認知,就可以來認識 ARIA 的基本要素:角色、狀態、屬性,它提供特殊的可訪問性「屬性 Att...

2019-09-22 ‧ 由 Askie Lin 分享
DAY 8

無障礙網站 WAI-ARIA 的 States and Properties,都是 Attribute 啊!

(圖片來源:How to Make Custom Accessible Checkboxes and Radio Buttons) 狀態與屬性 States...

2019-09-23 ‧ 由 Askie Lin 分享
DAY 9

無障礙網站之 CSS 注意事項

(Photo by Igor Miske on Unsplash) 為所有人考量樣式的呈現 使用 CSS 可以使網頁變得炫彩奪目、時尚、應用任何漂亮的效果及排...

2019-09-24 ‧ 由 Askie Lin 分享
DAY 10

無障礙網站之 JavaScript 迷思和 SPA 探討

迷思:無障礙和 JS 只能擇一? JavaScript isn’t the enemy of accessibility. - A11Y with linds...

2019-09-25 ‧ 由 Askie Lin 分享