新聞資訊

WebAIM團隊博客的(de)一(yī)篇關于網站(zhàn)易用(yòngλ<)性的(de)文(wén)章(zhāng)，比較基礎，簡單翻譯一(y®δī)下(xià)：

1. 給你(nǐ)的(de)logo添加替代文(wén)本→£§<

這(zhè)樣有(yǒu)兩個(gè)好(hǎo)處：屏幕閱讀(dú)器(qσ↓∞δì)能(néng)識别logo圖片代表的(de)含義，圖片未加載到(dào∞ ®δ)時(shí)，也(yě)能(néng)告訴非視(shì)障用(yòng)戶那φλ✔(nà)裡(lǐ)是(shì)你(nǐ)的☆™♠(de)logo。

幾種方法：

<img src="logo.png" alt="前端≈λ界">

或者，你(nǐ)用(yòng)背景圖來(lái)實現(xià©∑σ‌n)logo的(de)話(huà)，也(yě)可(kě)以添加title屬性 ​÷來(lái)實現(xiàn)：

<span title="前端界"&gε←t;</span> </code>

當然，鏈接+背景圖的(de)方式是(shì'δ)最好(hǎo)的(de)，但(dàn)最好(hǎo)也(yě)加上(s✘ ✘hàng)title屬性：

<a title="前端界">§‌前端界</a>

2.添加基本的(de)Landmarks♦≠<•

ARIA Landmark是(shì)W3☆™C定義的(de)一(yī)套網站(zhàn)可(kě)用(yòng&σ<β)性規則，對(duì)于網站(zhàn)♠®$α不(bù)同的(de)模塊添加描述性的(de)Lan  ¥♠dmark——或者直接叫role，有(yǒu)利于₹"♣ 讀(dú)屏軟件(jiàn)更好(hǎo ‍)的(de)理(lǐ)解你(nǐ)的(de)網頁，從(cóng♦☆¶)而讓視(shì)障用(yòng)戶更好(hǎo)的(de)使用↕✘(yòng)你(nǐ)的(de)網站(zhàn)。

<nav role="navigation"> <div"$ id="maincontent" role="♣£main"> <form action="sear σch.php" role="search">

等等，具體(tǐ)的(de)規則請(qǐng)©γ查看(kàn)W3C的(de)建議(yì)。

3.增強focus定義

其實很(hěn)多(duō)網站(zhàn)會(huì)用(yòng)π≠γ₹盡一(yī)切辦法去(qù)掉浏覽器(qì)的(de):foc₩∞us樣式，特别是(shì)對(duì)于IE浏覽器(qì)，其實，∑$☆浏覽器(qì)默認帶上(shàng):foδ'Ωεcus樣式是(shì)有(yǒu)道(dào)理↑<<(lǐ)的(de)，它能(néng)指示用(yòng)戶當前的(de)λ★"鼠标焦點位置是(shì)在哪裡(lǐ)。這(zhè)個(gè)對(duì)π'↑于鍵盤流特别重要(yào)。

所以請(qǐng)不(bù)要(yào)去(qù)掉:focus樣式，甚☆↑'至，你(nǐ)覺得(de)默認的(de)樣式不(bù)好(hǎ★∏↕≤o)看(kàn)或者不(bù)統一(yī)（IE是(shì)虛線框，Webk'€it是(shì)高(gāo)亮(liàng)的(de)實線框，并且®∑™•，Safari是(shì)藍(lán)色，Chrome是(↑<€≠shì)橙色）也(yě)可(kě)以自(zì)己給定義一(™ε ‌yī)個(gè)高(gāo)亮(liàn±§g)色：

a:focus{ outline:1px solid red; bφβ±¥ackground:yellow; }

如(rú)果你(nǐ)的(de)産品經理(lǐ)或者視(shìσβ )覺設計(jì)師(shī)堅持要(yào)去(qù)掉focus狀≤≤✔₩态的(de)話(huà)，把TA的(de)鼠标拿(ná)走一(y→δī)天并告訴TA隻能(néng)用(yòn™×☆g)Tab切換鏈接就(jiù)好(hǎo)了(le™&★)。。。

4.定義必填表單項

用(yòng)aria-required屬性可(kě)以定義表單中的(de)必填項——嗯，<¥₹主要(yào)還(hái)是(shì)告訴讀(dú)屏↔δ∞₹軟件(jiàn)：

<input type="text" name="userna™↕λφme" aria-required="true">

5.給你(nǐ)的(de)頁面添加一(yī)個(gè)h1

原因很(hěn)簡單，不(bù)隻是(shì)有(yǒu)利于←♥±SEO，對(duì)網站(zhàn)整體(tǐ)的(de)可(kě)用(yòn≤σg)性和(hé)可(kě)讀(dú)性都(dōu)很(hěn)有(yǒu ‍↓ )幫助。另外(wài)，你(nǐ)沒有(yǒu)代碼潔癖‌☆ 麽？

6.定義表格的(de)表頭

通(tōng)常很(hěn)多(duō)人(rén)習(xí'Ω∑)慣表格全部使用(yòng)td标簽，其實，表格不(bù)止有(yǒu)hd标簽，還↔♥(hái)有(yǒu)th、col、scope等。

所以簡單來(lái)說(shuō)，表頭換成th标簽吧(ba)：

<th scope="col">Date</th>

7.定義表格描述

不(bù)要(yào)簡單的(de)在表格前'∑α‌面/後面加個(gè)p了(le)事(shì)了(le)，表¥Ω ☆格有(yǒu)專用(yòng)的(de)∑₩ ≤caption标簽可(kě)用(yòng)，就(jiù)像圖" π₩片一(yī)樣。

<table> <caption>Cl£≈✔ass Schedule</caption> <tr&g↑δ✘t; ……

關于表格部分(fēn)，強烈推薦重新發現(xiàn)HT‌&ML表格

8.避免“點擊此處”

雖然這(zhè)樣的(de)鏈接描述對(duì)普通(tōng<φφ)人(rén)都(dōu)無所謂，但(dàn&§↔)是(shì)對(duì)讀(dú)屏軟件(jiànε♥)來(lái)說(shuō)，是(shì)相(xiàng)當糟糕的(de)，它®§♣®其實是(shì)對(duì)視(shì)障用(yòng)♥↓‌戶的(de)一(yī)種幹擾。

所以，直接把鏈接用(yòng)到(dà★♣ o)正地(dì)方吧(ba)。

9.去(qù)掉tabindex

曾經，很(hěn)多(duō)人(rén)用(yò•£→ng)tabindex來(lái)“增強”用(yòng)戶體(β  tǐ)驗，但(dàn)是(shì)這(zhè)個(gè☆"σ§)屬性卻會(huì)打亂頁面的(de)正常閱讀≤€(dú)順序，對(duì)視(shì)障用(₹∞∏yòng)戶是(shì)災難性的(de)，對® ±Ω(duì)普通(tōng)用(yòng)戶也(₹σ‌yě)未必是(shì)友(yǒu)善的(de)。

所以千萬不(bù)要(yào)濫用(yòng)tabindex屬性。

10.在線檢測一(yī)下(xià)

呃，看(kàn)到(dào)這(zhè)裡(lǐ)發現(xiàn)其±★​'實是(shì)個(gè)廣告，但(dàn)是(shì)如(π'rú)果能(néng)檢測出來(lái)網站(zhàn)♥÷≥可(kě)用(yòng)性問(wèn)題，也(yě)是(shì)件(jiàn)¶'好(hǎo)事(shì)情，WebAIM開(kā≤λ£i)發的(de)一(yī)個(gè)網頁工(gō∞ ≤ng)具，輸入URL就(jiù)會(huì)自(zì)動檢測。