HTML打造極具親和力的連接_XHTML教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

tabbing瀏覽

不或不能使用指點(diǎn)設(shè)備的用戶可以用快捷鍵tab鍵來打開連接，并且本身也要有邏輯tab順序。盡管HTML是線性的，tabindex屬性允許你定義它快捷鍵們的順序，而且這些邏輯tab應(yīng)該可以自動(dòng)落入自己位置。

快捷鍵

快捷鍵可以通過鍵盤的特定按鍵進(jìn)行更方便的導(dǎo)航（當(dāng)按住Alt鍵或者Ctrl鍵時(shí)獲得焦點(diǎn)）。對(duì)于那些沒有指點(diǎn)設(shè)備的用戶，比起使用tab鍵操作連接更快捷，更方便。

沒有必要為每一個(gè)連接都設(shè)置快捷鍵，但為主要導(dǎo)航連接都設(shè)置是一個(gè)不錯(cuò)的主意。

示例代碼 [hl5o.cn]

注意

示例代碼 [hl5o.cn]

快捷鍵的麻煩是，用戶常常沒有辦法知道它們?cè)谀睦锖偷降资鞘裁存I（除非查看源代碼）。雖然JAWS──一個(gè)可以大聲讀出快捷鍵的屏幕閱讀器，但要掘盡其能，你還是得讓快捷鍵更直白。
你可以使用像“跳過導(dǎo)航”的連接技術(shù)（下詳），或者選擇一個(gè)獨(dú)立的頁(yè)面來說明你網(wǎng)站的這些易用性相關(guān)功能，包括快捷鍵。一個(gè)越來越流行的辦法是在一個(gè)與快捷鍵相一致的字母上加下劃線，類似于Windows程序菜單中的方法。

連接的標(biāo)題

為連接添加標(biāo)題屬性title是一個(gè)好主意，這會(huì)給用戶所指向連接的予說明，所以能改進(jìn)導(dǎo)航。

假如這個(gè)連接是執(zhí)行Javascript的，這也有利于為沒有使用Javascript功能的用戶解釋什么將會(huì)（或不會(huì)）發(fā)生。

示例代碼 [hl5o.cn]

<a href="#" onclick="opennastypopup()" onkeypress="opennastypopup()"
title="Open a nasty Javascript pop-up window">Monster</a>

彈出窗口

說到Javascript彈出窗口，你要堅(jiān)持使用的話，或者很多人（你的用戶）告訴你要使用，你可以用onkeypress和onclick來使得頁(yè)面更易用。并且，在功能上定義了返回false的彈出窗口，包含一個(gè)帶有href屬性指向普通頁(yè)面的連接，對(duì)于一個(gè)沒有使用Javascript功能的用戶來說，可以以普通方式載入這個(gè)頁(yè)面。

比如：

示例代碼 [hl5o.cn]

相鄰的連接

相鄰的連接應(yīng)該至少用空格隔開，以便為屏幕閱讀器清晰辯明。
這也可以用字符來完成，連接之間的（比如豎線 |── 連接 | 連接），或者包圍連接的（如中括號(hào) [] ── [連接] [連接]）。把連接放在列表里面也是一個(gè)好主意。然后可以用CSS來樣式化顯示，甚至可以是并行的列表（用 display: in-line）。

跳過導(dǎo)航

你應(yīng)該讓使用屏幕閱讀器的用戶一個(gè)跳過導(dǎo)航直接到內(nèi)容的機(jī)會(huì)。這是因?yàn)�，假設(shè)你的連接是固定的（應(yīng)該是），用戶不必經(jīng)受每一頁(yè)同樣的信息，尤其是大量的。你可以設(shè)置一個(gè)連接，跳過導(dǎo)航直接跳到內(nèi)容的連接。

看起來像是這樣的：

示例代碼 [hl5o.cn]

<div id="header">
<h1>The Heading</h1>
<a href="#content" accesskey="n">Skip navigation</a>
</div>
<div id="navigation">

</div>
<div id="content">

</div>

顯然，你沒有必要在可視化瀏覽器中顯示它，所有你可以用CSS開隱藏它。

注意

示例代碼 [hl5o.cn]

這是雖然只是一個(gè)CSS的小技巧，但是“跳過導(dǎo)航”的特效藥。這涉及到隱藏連接的方法。
最常見的辦法可能是使用display: none，但有些瀏覽器看到但不理解這個(gè)連接，“跳過導(dǎo)航”的連接必須顯示。
然而沒有必要顯示──沒有理由顯示給醒目的用戶。所以堅(jiān)持使用包含display: none的樣式，還不如把元素寬和高設(shè)置為零（width: 0; height: 0; overflow: hidden;），這有相同的視覺效果，但可以使屏幕閱讀器理解。