HTML高級教程親和力的連接_XHTML教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
tabbing瀏覽
不或不能使用指點設備的用戶可以用快捷鍵tab鍵來打開連接,并且本身也要有邏輯tab順序。盡管HTML是線性的,tabindex屬性答應你定義它快捷鍵們的順序,而且這些邏輯tab應該可以自動落入自己位置。
快捷鍵
快捷鍵可以通過鍵盤的特定按鍵進行更方便的導航(當按住Alt鍵或者Ctrl鍵時獲得焦點)。對于那些沒有指點設備的用戶,比起使用tab鍵操作連接更快捷,更方便。
沒有必要為每一個連接都設置快捷鍵,但為主要導航連接都設置是一個不錯的主意。
注重
連接的標題
為連接添加標題屬性title是一個好主意,這會給用戶所指向連接的予說明,所以能改進導航。
假如這個連接是執行Javascript的,這也有利于為沒有使用Javascript功能的用戶解釋什么將會(或不會)發生。
彈出窗口
說到Javascript彈出窗口,你要堅持使用的話,或者很多人(你的用戶)告訴你要使用,你可以用onkeypress和onclick來使得頁面更易用。并且,在功能上定義了返回false的彈出窗口,包含一個帶有href屬性指向普通頁面的連接,對于一個沒有使用Javascript功能的用戶來說,可以以普通方式載入這個頁面。
比如:
相鄰的連接
相鄰的連接應該至少用空格隔開,以便為屏幕閱讀器清楚辯明。
這也可以用字符來完成,連接之間的(比如豎線 |── 連接 | 連接),或者包圍連接的(如中括號 [] ── [連接] [連接])。把連接放在列表里面也是一個好主意。然后可以用CSS來樣式化顯示,甚至可以是并行的列表(用 display: in-line)。
跳過導航
你應該讓使用屏幕閱讀器的用戶一個跳過導航直接到內容的機會。這是因為,假設你的連接是固定的(應該是),用戶不必經受每一頁同樣的信息,尤其是大量的。你可以設置一個連接,跳過導航直接跳到內容的連接。
看起來像是這樣的:
顯然,你沒有必要在可視化瀏覽器中顯示它,所有你可以用CSS開隱藏它。
注重
不或不能使用指點設備的用戶可以用快捷鍵tab鍵來打開連接,并且本身也要有邏輯tab順序。盡管HTML是線性的,tabindex屬性答應你定義它快捷鍵們的順序,而且這些邏輯tab應該可以自動落入自己位置。
快捷鍵
快捷鍵可以通過鍵盤的特定按鍵進行更方便的導航(當按住Alt鍵或者Ctrl鍵時獲得焦點)。對于那些沒有指點設備的用戶,比起使用tab鍵操作連接更快捷,更方便。
沒有必要為每一個連接都設置快捷鍵,但為主要導航連接都設置是一個不錯的主意。
示例代碼 [www.wf0088.com]
<a href="somepage.html" accesskey="s">Some page</a>
注重
示例代碼 [www.wf0088.com]
快捷鍵的麻煩是,用戶經常沒有辦法知道它們在哪里和到底是什么鍵(除非查看源代碼)。雖然JAWS──一個可以大聲讀出快捷鍵的屏幕閱讀器,但要掘盡其能,你還是得讓快捷鍵更直白。
你可以使用像“跳過導航”的連接技術(下詳),或者選擇一個獨立的頁面來說明你網站的這些易用性相關功能,包括快捷鍵。一個越來越流行的辦法是在一個與快捷鍵相一致的字母上加下劃線,類似于Windows程序菜單中的方法。
你可以使用像“跳過導航”的連接技術(下詳),或者選擇一個獨立的頁面來說明你網站的這些易用性相關功能,包括快捷鍵。一個越來越流行的辦法是在一個與快捷鍵相一致的字母上加下劃線,類似于Windows程序菜單中的方法。
連接的標題
為連接添加標題屬性title是一個好主意,這會給用戶所指向連接的予說明,所以能改進導航。
假如這個連接是執行Javascript的,這也有利于為沒有使用Javascript功能的用戶解釋什么將會(或不會)發生。
示例代碼 [www.wf0088.com]
<a href="#" onclick="opennastypopup()" onkeypress="opennastypopup()"
title="Open a nasty Javascript pop-up window">Monster</a>
title="Open a nasty Javascript pop-up window">Monster</a>
彈出窗口
說到Javascript彈出窗口,你要堅持使用的話,或者很多人(你的用戶)告訴你要使用,你可以用onkeypress和onclick來使得頁面更易用。并且,在功能上定義了返回false的彈出窗口,包含一個帶有href屬性指向普通頁面的連接,對于一個沒有使用Javascript功能的用戶來說,可以以普通方式載入這個頁面。
比如:
示例代碼 [www.wf0088.com]
<script type="text/javascript">
function opennastypopup()
{
window.open("monster.html", "", "toolbar=no,height=100,width=200");
return false;
}
</script>
...
<a href="monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Monster</a>
function opennastypopup()
{
window.open("monster.html", "", "toolbar=no,height=100,width=200");
return false;
}
</script>
...
<a href="monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Monster</a>
相鄰的連接
相鄰的連接應該至少用空格隔開,以便為屏幕閱讀器清楚辯明。
這也可以用字符來完成,連接之間的(比如豎線 |── 連接 | 連接),或者包圍連接的(如中括號 [] ── [連接] [連接])。把連接放在列表里面也是一個好主意。然后可以用CSS來樣式化顯示,甚至可以是并行的列表(用 display: in-line)。
跳過導航
你應該讓使用屏幕閱讀器的用戶一個跳過導航直接到內容的機會。這是因為,假設你的連接是固定的(應該是),用戶不必經受每一頁同樣的信息,尤其是大量的。你可以設置一個連接,跳過導航直接跳到內容的連接。
看起來像是這樣的:
示例代碼 [www.wf0088.com]
<div id="header">
<h1>The Heading</h1>
<a href="#content" accesskey="n">Skip navigation</a>
</div>
<div id="navigation">
<!--loads of navigation stuff -->
</div>
<div id="content">
<!--lovely content -->
</div>
<h1>The Heading</h1>
<a href="#content" accesskey="n">Skip navigation</a>
</div>
<div id="navigation">
<!--loads of navigation stuff -->
</div>
<div id="content">
<!--lovely content -->
</div>
顯然,你沒有必要在可視化瀏覽器中顯示它,所有你可以用CSS開隱藏它。
注重
示例代碼 [www.wf0088.com]
這是雖然只是一個CSS的小技巧,但是“跳過導航”的特效藥。這涉及到隱藏連接的方法。
最常見的辦法可能是使用display: none,但有些瀏覽器看到但不理解這個連接,“跳過導航”的連接必須顯示。
然而沒有必要顯示──沒有理由顯示給醒目的用戶。所以堅持使用包含display: none的樣式,還不如把元素寬和高設置為零(width: 0; height: 0; overflow: hidden;),這有相同的視覺效果,但可以使屏幕閱讀器理解。
最常見的辦法可能是使用display: none,但有些瀏覽器看到但不理解這個連接,“跳過導航”的連接必須顯示。
然而沒有必要顯示──沒有理由顯示給醒目的用戶。所以堅持使用包含display: none的樣式,還不如把元素寬和高設置為零(width: 0; height: 0; overflow: hidden;),這有相同的視覺效果,但可以使屏幕閱讀器理解。
相關XHTML教程:
- 相關鏈接:
- 教程說明:
XHTML教程-HTML高級教程親和力的連接。