新聞資訊

WebAIM團隊博客的(de)一(yī / yì ／yí)篇關于(yú)網站易用性的(de)文章，比較基礎，簡單翻譯一(yī / yì ／yí)下：

1. 給你的(de)logo添加替代文本

這(zhè)樣有兩個(gè)好處：屏幕閱讀器能識别logo圖片代表的(de)含義，圖片未加載到(dào)時(shí)，也(yě)能告訴非視障用戶那裏是(shì)你的(de)logo。

幾種方法：

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

或者，你用背景圖來(lái)實現logo的(de)話，也(yě)可以(yǐ)添加title屬性來(lái)實現：

<span title="前端界"></span> </code>

當然，鏈接+背景圖的(de)方式是(shì)最好的(de)，但最好也(yě)加上(shàng)title屬性：

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

2.添加基本的(de)Landmarks

ARIA Landmark是(shì)W3C定義的(de)一(yī / yì ／yí)套網站可用性規則，對于(yú)網站不(bù)同的(de)模塊添加描述性的(de)Landmark——或者直接叫role，有利于(yú)讀屏軟件更好的(de)理解你的(de)網頁，從而(ér)讓視障用戶更好的(de)使用你的(de)網站。

<nav role="navigation"> <div id="maincontent" role="main"> <form action="search.php" role="search">

等等，具體的(de)規則請查看W3C的(de)建議。

3.增強focus定義

其實很多網站會用盡一(yī / yì ／yí)切辦法去掉浏覽器的(de):focus樣式，特别是(shì)對于(yú)IE浏覽器，其實，浏覽器默認帶上(shàng):focus樣式是(shì)有道(dào)理的(de)，它能指示用戶當前的(de)鼠标焦點位置是(shì)在(zài)哪裏。這(zhè)個(gè)對于(yú)鍵盤流特别重要(yào / yāo)。

所以(yǐ)請不(bù)要(yào / yāo)去掉:focus樣式，甚至，你覺得默認的(de)樣式不(bù)好看或者不(bù)統一(yī / yì ／yí)（IE是(shì)虛線框，Webkit是(shì)高亮的(de)實線框，并且，Safari是(shì)藍色，Chrome是(shì)橙色）也(yě)可以(yǐ)自己給定義一(yī / yì ／yí)個(gè)高亮色：

a:focus{ outline:1px solid red; background:yellow; }

如果你的(de)産品經理或者視覺設計師堅持要(yào / yāo)去掉focus狀态的(de)話，把TA的(de)鼠标拿走一(yī / yì ／yí)天并告訴TA隻能用Tab切換鏈接就(jiù)好了(le／liǎo)。。。

4.定義必填表單項

用aria-required屬性可以(yǐ)定義表單中的(de)必填項——嗯，主要(yào / yāo)還是(shì)告訴讀屏軟件：

<input type="text" name="username" aria-required="true">

5.給你的(de)頁面添加一(yī / yì ／yí)個(gè)h1

原因很簡單，不(bù)隻是(shì)有利于(yú)SEO，對網站整體的(de)可用性和(hé / huò)可讀性都很有幫助。另外，你沒有代碼潔癖麽？

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

通常很多人(rén)習慣表格全部使用td标簽，其實，表格不(bù)止有hd标簽，還有th、col、scope等。

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

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

7.定義表格描述

不(bù)要(yào / yāo)簡單的(de)在(zài)表格前面/後面加個(gè)p了(le／liǎo)事了(le／liǎo)，表格有專用的(de)caption标簽可用，就(jiù)像圖片一(yī / yì ／yí)樣。

<table> <caption>Class Schedule</caption> <tr> ……

關于(yú)表格部分，強烈推薦重新發現HTML表格

8.避免“點擊此處”

雖然這(zhè)樣的(de)鏈接描述對普通人(rén)都無所謂，但是(shì)對讀屏軟件來(lái)說(shuō)，是(shì)相當糟糕的(de)，它其實是(shì)對視障用戶的(de)一(yī / yì ／yí)種幹擾。

所以(yǐ)，直接把鏈接用到(dào)正地(dì / de)方吧。

9.去掉tabindex

曾經，很多人(rén)用tabindex來(lái)“增強”用戶體驗，但是(shì)這(zhè)個(gè)屬性卻會打亂頁面的(de)正常閱讀順序，對視障用戶是(shì)災難性的(de)，對普通用戶也(yě)未必是(shì)友善的(de)。

所以(yǐ)千萬不(bù)要(yào / yāo)濫用tabindex屬性。

10.在(zài)線檢測一(yī / yì ／yí)下

呃，看到(dào)這(zhè)裏發現其實是(shì)個(gè)廣告，但是(shì)如果能檢測出(chū)來(lái)網站可用性問題，也(yě)是(shì)件好事情，WebAIM開發的(de)一(yī / yì ／yí)個(gè)網頁工具，輸入URL就(jiù)會自動檢測。