12.16前端無障礙學習小計

KingBinwei發表於2018-12-16

螢幕閱讀器的兩種方式:1.讀角色名;2.輕鬆識別的聲音

一般,如果配置正確,螢幕閱讀器一般會有Role,Name(lable),State,Value

控制元件的文字繫結:放入<lable>標籤或<lable>標籤加入for=“目標id”繫結目標互動控制元件

img的alt屬性是圖片的替代文字

將圖片不需要的代替文字設定為空,將會從無障礙樹移除,從而跳過

在合適的情況下,應該使用標題表示內容部分

語義標記用於指定標題h1

標題結構可以作為繞過內容部分的有效辦法

螢幕之外放一些標題以便螢幕閱讀器使用者或其他輔助技術使用者發現,應對了外觀不需要標題或者沒有地方放的情況,但輔助技術使用者可能能看到螢幕因而體驗糟糕,而且國際化工作中帶來維護問題,慎用,

* 

1.3.2:http://webaim.org/standards/w… (英)

* 

2.4.10:http://webaim.org/standards/w… (英)

* 

1.3.1:http://webaim.org/standards/w… (英)

* 

2.4.1:http://webaim.org/standards/w… (英)

* 

2.4.6:http://webaim.org/standards/w… (英)

* 






2.4.9: http://webaim.org/standards/w… (英)

* 






2.4.9: http://webaim.org/standards/w… (英)

任何行為像連結的元素必須包含href屬性,包括單頁面網頁應用

圖片連結需要有alt屬性,為了能讓螢幕閱讀器能找到這個連結,連結具備文字可讀性(連結目的可通過文字判斷,如常見的learn more連結後應接其目的),甚至將連結改為標題,那樣快速尋找連結不用回到段頭看連結內容是什麼

相關文章