iT邦幫忙

a11y相關文章
共有 60 則文章
9 Like 2 留言 18142 瀏覽
鐵人賽 Modern Web DAY 5
實踐無障礙網頁設計（Web Accessibility） 系列 第 5 篇

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

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

Askie Lin ‧ 2019-09-20 ‧團隊好想工作室 v3.0
3 Like 0 留言 16816 瀏覽
鐵人賽 Modern Web DAY 15
實踐無障礙網頁設計（Web Accessibility） 系列 第 15 篇

技術 實作無障礙網頁功能：真・button —— 按鈕的世界比你想像複雜，別再用 div 刻假按鈕了！

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-09-30 ‧團隊好想工作室 v3.0
5 Like 1 留言 14807 瀏覽
鐵人賽 Modern Web DAY 16
實踐無障礙網頁設計（Web Accessibility） 系列 第 16 篇

技術 實作無障礙網頁功能：真・button —— RWD 漢堡選單應用

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-10-01 ‧團隊好想工作室 v3.0
6 Like 3 留言 10390 瀏覽
鐵人賽 Modern Web DAY 7
實踐無障礙網頁設計（Web Accessibility） 系列 第 7 篇

技術 無障礙網站之 WAI-ARIA 的角色介紹（Role）

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

Askie Lin ‧ 2019-09-22 ‧團隊好想工作室 v3.0
3 Like 0 留言 9622 瀏覽
鐵人賽 Modern Web DAY 14
實踐無障礙網頁設計（Web Accessibility） 系列 第 14 篇

技術 實作無障礙網頁功能：麵包屑 Breadcrumb

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-09-29 ‧團隊好想工作室 v3.0
1 Like 1 留言 7315 瀏覽
鐵人賽 Modern Web DAY 20
實踐無障礙網頁設計（Web Accessibility） 系列 第 20 篇

技術 實作無障礙網頁功能：今天沒有拖棚之表單 radio，要選就只選我吧！

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-10-05 ‧團隊好想工作室 v3.0
2 Like 0 留言 7024 瀏覽
鐵人賽 Modern Web DAY 24
實踐無障礙網頁設計（Web Accessibility） 系列 第 24 篇

技術 實作無障礙網頁功能：無障礙定位點（導盲磚 `:::`）

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-10-09 ‧團隊好想工作室 v3.0
4 Like 1 留言 6967 瀏覽
鐵人賽 Modern Web DAY 2
實踐無障礙網頁設計（Web Accessibility） 系列 第 2 篇

技術 無障礙標章：WCAG 與 NCC 國家通訊傳播委員會的無障礙規範（申請流程與標章使用規定）

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

Askie Lin ‧ 2019-09-17 ‧團隊好想工作室 v3.0
3 Like 0 留言 6203 瀏覽
鐵人賽 Modern Web DAY 8
實踐無障礙網頁設計（Web Accessibility） 系列 第 8 篇

技術 無障礙網站 WAI-ARIA 的 States and Properties，都是 Attribute 啊！

（圖片來源：How to Make Custom Accessible Checkboxes and Radio Buttons） 狀態與屬性 States...

Askie Lin ‧ 2019-09-23 ‧團隊好想工作室 v3.0
3 Like 0 留言 6046 瀏覽
鐵人賽 Modern Web DAY 9
實踐無障礙網頁設計（Web Accessibility） 系列 第 9 篇

技術 無障礙網站之 CSS 注意事項

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

Askie Lin ‧ 2019-09-24 ‧團隊好想工作室 v3.0
4 Like 4 留言 6008 瀏覽
鐵人賽 Modern Web DAY 1
實踐無障礙網頁設計（Web Accessibility） 系列 第 1 篇

達標好文 技術 無障礙網站又稱為可訪問的網站，難道還有不可訪問的網站嗎？

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

Askie Lin ‧ 2019-09-16 ‧團隊好想工作室 v3.0
5 Like 1 留言 5880 瀏覽
鐵人賽 Modern Web DAY 6
實踐無障礙網頁設計（Web Accessibility） 系列 第 6 篇

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

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

Askie Lin ‧ 2019-09-21 ‧團隊好想工作室 v3.0
3 Like 2 留言 5756 瀏覽
鐵人賽 Modern Web DAY 4
實踐無障礙網頁設計（Web Accessibility） 系列 第 4 篇

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

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

Askie Lin ‧ 2019-09-19 ‧團隊好想工作室 v3.0
1 Like 0 留言 5656 瀏覽
鐵人賽 Modern Web DAY 19
實踐無障礙網頁設計（Web Accessibility） 系列 第 19 篇

技術 實作無障礙網頁功能：全都要不行嗎...之 checkbox 複選元件

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-10-04 ‧團隊好想工作室 v3.0
6 Like 1 留言 5105 瀏覽
鐵人賽 Modern Web DAY 10
實踐無障礙網頁設計（Web Accessibility） 系列 第 10 篇

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

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

Askie Lin ‧ 2019-09-25 ‧團隊好想工作室 v3.0
1 Like 0 留言 4894 瀏覽
鐵人賽 Modern Web DAY 28
實踐無障礙網頁設計（Web Accessibility） 系列 第 28 篇

技術 真實世界：使用 iOS 輔助功能 VoiceOver 來瀏覽行動版網頁

（圖片來源：Apple） 維基百科：VoiceOver is a screen reader built into Apple Inc.'s macOS, i...

Askie Lin ‧ 2019-10-13 ‧團隊好想工作室 v3.0
2 Like 0 留言 4317 瀏覽
鐵人賽 Modern Web DAY 21
實踐無障礙網頁設計（Web Accessibility） 系列 第 21 篇

技術 實作無障礙網頁功能：表格（Table）原來可以補充的語義這麼多！

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-10-06 ‧團隊好想工作室 v3.0
1 Like 0 留言 4255 瀏覽
鐵人賽 Modern Web DAY 17
實踐無障礙網頁設計（Web Accessibility） 系列 第 17 篇

技術 實作無障礙網頁功能：超連結還能怎樣無障礙呢？

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-10-02 ‧團隊好想工作室 v3.0
1 Like 0 留言 4057 瀏覽
鐵人賽 Modern Web DAY 18
實踐無障礙網頁設計（Web Accessibility） 系列 第 18 篇

技術 實作無障礙網頁功能：輪播圖 Carousel

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-10-03 ‧團隊好想工作室 v3.0
1 Like 0 留言 4011 瀏覽
鐵人賽 Modern Web DAY 29
實踐無障礙網頁設計（Web Accessibility） 系列 第 29 篇

技術 真實世界：使用 Android 輔助功能 TalkBack 來瀏覽行動版網頁

（圖片來源：Google） 維基百科：Google Talkback was an accessibility service for Android th...

Askie Lin ‧ 2019-10-14 ‧團隊好想工作室 v3.0
3 Like 1 留言 3939 瀏覽
鐵人賽 Modern Web DAY 3
實踐無障礙網頁設計（Web Accessibility） 系列 第 3 篇

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

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

Askie Lin ‧ 2019-09-18 ‧團隊好想工作室 v3.0
1 Like 0 留言 3907 瀏覽
鐵人賽 Modern Web DAY 27
實踐無障礙網頁設計（Web Accessibility） 系列 第 27 篇

技術 開發無障礙網頁：免費檢測工具介紹（Testing & Linting）

在前一篇文章當中，介紹了瀏覽器的開發者工具中有工具哪些能適時幫助我們建立可訪問的網站。 而今天要來介紹的內容將涵蓋： 檢測訪問性的步驟 檢測訪問性的工具...

Askie Lin ‧ 2019-10-12 ‧團隊好想工作室 v3.0
1 Like 0 留言 3384 瀏覽
鐵人賽 Modern Web DAY 26
實踐無障礙網頁設計（Web Accessibility） 系列 第 26 篇

技術 開發無障礙網頁：使用瀏覽器開發者工具 Chrome vs Firefox

開發者工具（Devtools）在網頁開發中是日常生活的一環，很多除錯的功能在很多大大的文章都有介紹，這篇文章要介紹的是如何使用瀏覽器內建的開發者工具作為無障礙檢...

Askie Lin ‧ 2019-10-11 ‧團隊好想工作室 v3.0
2 Like 0 留言 3189 瀏覽
鐵人賽 Modern Web DAY 12
實踐無障礙網頁設計（Web Accessibility） 系列 第 12 篇

技術 實作無障礙網頁功能：鍵盤也能操作的手風琴 Accordion

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-09-27 ‧團隊好想工作室 v3.0
2 Like 1 留言 2718 瀏覽
鐵人賽 Modern Web DAY 13
實踐無障礙網頁設計（Web Accessibility） 系列 第 13 篇

技術 實作無障礙網頁功能：當使用者輸入錯誤的警告視窗 Alert

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡...

Askie Lin ‧ 2019-09-28 ‧團隊好想工作室 v3.0
0 Like 0 留言 2411 瀏覽
鐵人賽 自我挑戰組 DAY 2
無障礙網頁設計大叔日記 系列 第 2 篇

技術 第二日：反正 HTML 常用的就那幾種標籤，為什麼要全部都看過一遍？

大概每年的這個時候，在台灣凌晨一點都會有一場饗宴， 那就是蘋果發表會！！ 我以為我大喊「我好興奮啊！我好興奮啊！！」但沒想到十二點一到直接睡死， 「已經過了會追...

我愛無障礙網頁設計的大叔 ‧ 2022-09-08
5 Like 16 留言 2285 瀏覽
鐵人賽 Modern Web DAY 30
實踐無障礙網頁設計（Web Accessibility） 系列 第 30 篇

技術 Web Accessibility：這 30 天的遺珠之憾與補充

（圖片來源：Unsplash） My idea of society is that while we are born equal, meaning th...

Askie Lin ‧ 2019-10-15 ‧團隊好想工作室 v3.0
2 Like 1 留言 2284 瀏覽
鐵人賽 Modern Web DAY 11
實踐無障礙網頁設計（Web Accessibility） 系列 第 11 篇

技術 以設計層面來思考無障礙網站

（圖片來源：Inclusive Design - Microsoft） 設計雖不是我的專業，不過網站的製作可不是僅靠工程師的力量而已啊啊，所以也將找到的相關資...

Askie Lin ‧ 2019-09-26 ‧團隊好想工作室 v3.0
0 Like 0 留言 2215 瀏覽
鐵人賽 自我挑戰組 DAY 3
無障礙網頁設計大叔日記 系列 第 3 篇

技術 第三日：無障礙網頁設計 HTML 標籤注意事項

今天租路邊車帶孩子去動物園，結果回到家小孩完全沒有記憶，因為整天都在魯小小，回程路上睡爽爽，到了美麗華醒來爽玩摩天輪、旋轉木馬、湯姆熊... 在這樣精疲力盡的情...

我愛無障礙網頁設計的大叔 ‧ 2022-09-09
0 Like 0 留言 2081 瀏覽
鐵人賽 自我挑戰組 DAY 1
無障礙網頁設計大叔日記 系列 第 1 篇

技術 第一日：意識到無障礙網頁設計的重要性

大家好，我是愛無障礙網頁設計的大叔，一個近年不得不研究無障礙網頁、但是暸解了又愛上它的中年男子。 這次是第一次參賽，雖然有在其他地方寫過技術文章，但內容都硬梆梆...

我愛無障礙網頁設計的大叔 ‧ 2022-09-07
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙