HTML教學:建立超級連接

黄舟
發布: 2016-12-26 15:22:33
原創
1553 人瀏覽過

tabbing瀏覽

不或不能使用指點設備的用戶可以用快捷鍵tab鍵來打開連接,並且本身也要有邏輯tab順序。儘管HTML是線性的,tabindex屬性允許你定義它快速鍵們的順序,而這些邏輯tab應該可以自動落入自己位置。

快捷鍵

快捷鍵可以透過鍵盤的特定按鍵進行更方便的導航(按住Alt鍵或Ctrl鍵時獲得焦點)。對於那些沒有指點設備的用戶,比起使用tab鍵操作連接更快捷,更方便。

沒有必要為每個連接都設定快捷鍵,但為主要導航連接都設定是一個不錯的主意。

Some page


注意

快捷鍵的麻煩是,使用者常常沒有辦法知道它們在哪裡和到底是什麼鍵(除非查看原始碼)。雖然JAWS——一個可以大聲讀出快捷鍵的螢幕閱讀器,但要掘盡其能,你還是得讓快捷鍵更直白。
你可以使用像是「跳過導航」的連線技術(下詳),或是選擇一個獨立的頁面來說明你網站的這些易用性相關功能,包括快速鍵。一個越來越流行的辦法是在一個與快捷鍵一致的字母上加下劃線,類似於Windows程式選單中的方法。


連接的標題

為連接添加標題屬性title是一個好主意,這會給用戶所指向連接的予說明,所以能改進導航。

假如這個連線是執行Javascript的,這也有利於為沒有使用Javascript功能的使用者解釋什麼將會(或不會)發生。

Monster


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

例如:



... 

Monster

相鄰的連接


相鄰的連接應該至少用空格隔開,以便為屏幕閱讀器清晰辯明。
這也可以用字元來完成,連接之間的(例如豎線 |── 連接 | 連接),或包圍連接的(如中括號 [] ── [連接] [連接])。把連接放在清單裡面也是一個好主意。然後可以用CSS來樣式化顯示,甚至可以是並行的列表(用 display: in-line)。

跳過導航

你應該讓使用螢幕閱讀器的使用者一個跳過導航直接到內容的機會。這是因為,假設你的連線是固定的(應該是),使用者不必經歷每一頁相同的訊息,尤其是大量的訊息。你可以設定一個連接,跳過導航直接跳到內容的連接。

看起來是這樣的:





The Heading

Skip navigation

The Heading

Skip navigation






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

注意


這是雖然只是一個CSS的小技巧,但是「跳過導航」的特效藥。這涉及到隱藏連接的方法。

最常見的辦法可能是使用display: none,但有些瀏覽器看到但不理解這個連接,「跳過導航」的連接必須顯示。
然而沒有必要顯示──沒有理由顯示給醒目的使用者。所以堅持使用包含display: none的樣式,不如把元素寬和高設為零(width: 0; height: 0; overflow: hidden;),這有相同的視覺效果,但可以使螢幕閱讀器理解。

 以上是HTML教學:建立超級連結的內容,更多相關內容請關注PHP中文網(www.php.cn)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!