## Logo主頁鏈接 每個頁面頂部的標志應將用戶發送到您網站的主頁。 假設你的標志在你的主題目錄中，這是如何在header.php模板文件中顯示它的。 ``` <a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="Website Logo" /></a> ``` ## 描述性錨文本 錨文本是超鏈接的可見文本。 良好的鏈接文本應該給讀者一個點擊它將發生的動作的想法。 一個壞的例子： 學習WordPress的最好方法是開始使用它。 要下載WordPress，請點擊這里。 一個更好的例子： 下載WordPress并開始使用它。 這是最好的學習方式。 ## 風格鏈接與下劃線 默認情況下，瀏覽器強調了鏈接，讓用戶知道什么是可點擊的。 一些設計師使用CSS來關閉超鏈接的下劃線。 這導致可用性和可訪問性問題，因為它更難以識別來自周圍文本的超鏈接。 ## 不同的鏈接顏色 顏色是另一種視覺提示，文本是可點擊的。 使用與周圍文字不同的顏色進行樣式化超鏈接，使其更易于區分。 超鏈接是擁有狀態的少數HTML功能之一。 兩個最重要的國家被訪問和未訪問。 為這兩個狀態使用不同的顏色可以幫助用戶識別他們以前訪問的頁面。 將訪問鏈接中的猜測工作的一個好方法是將它們的顏色比未訪問鏈接的顏色深10％-20％。 鏈接可以有其他3個狀態： - 鼠標懸停在一個元素上時 - 焦點，類似于懸停，但鍵盤用戶 - 當用戶點擊鏈接時激活 由于懸停和焦點具有相似的含義，因此賦予它們相同的風格是有用的。 ## 顏色對比度 顏色對比度是指兩種顏色之間的差異。 海軍藍與黑之間的對比度較低。 白色和黑色之間的對比度很高。 Jonathan Snook提供了色彩對比計算器，可以幫助您確定網站設計的對比度。 WCAG 2.0在正常文本中需要4.5：1的比例才符合AA標準。 ## 足夠的字體大小 使您的文本容易閱讀。 通過使文本足夠大，您可以增加網站的可用性，并使內容更容易理解。 14px是最小的文本應該是。 ## 將標簽與輸入相關聯 標簽通知用戶什么是輸入字段。 您可以使用標簽中的for屬性將標簽連接到輸入。 這將允許用戶單擊標簽并將焦點放在輸入字段上。 ``` <label for="username">Username</label> <input type="text" id="username" name="login" /> ``` 標簽也可用于單選按鈕。 由于它使用id字段而不是名稱，因此該組的每個輸入都將獲得自己的標簽。 ``` <input type="radio" id="user_group_blogger" name="user_group" value="blogger" /> <label for="user_group_blogger">Blogger</label> <input type="radio" id="user_group_designer" name="user_group" value="designer" /> <label for="user_group_designer">Designer</label> <input type="radio" id="user_group_developer" name="user_group" value="developer" /> <label for="user_group_developer">Developer</label> ``` ## 表單中的占位符文本 占位符文本顯示用戶要輸入的內容的示例。 當用戶將光標放在字段中時，占位符文本將消失，而標簽保留。 ``` <label for="name">Name</label> <input type="text" id="name" name="name" placeholder="John Smith" /> ``` ## 描述性按鈕 網頁上填滿了不清楚的按鈕。 請記住，上次您在登錄表單上使用“確定”或“提交”？ 當然你做:)選擇更好的單詞顯示在您的按鈕可以使您的網站更容易使用。 嘗試模式[動詞] [名詞] - 創建用戶，刪除文件，更新密碼，發送消息。 每個描述當用戶點擊按鈕時會發生什么。