首页 Logo 链接

页面顶部的徽标应将用户引导至您网站的首页。
如果您使用推荐的功能，即 the_custom_logo() 函数或站点徽标块，徽标默认已链接到首页。

您也可以手动添加您的徽标。假设您的徽标位于主题目录中，这就是如何在 header.php 模板文件中显示它的方法。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="<?php esc_attr_e( 'Home Page', 'textdmomain' );?>" /></a>

描述性锚文本

锚文本是超链接的可见文本。良好的链接文本应让读者了解点击时将要发生的操作。

一个糟糕的例子：

学习 WordPress 的最佳方法是开始使用它。要下载 WordPress，点击这里。

更好的例子：

下载 WordPress并开始使用它。这就是学习的最佳方法。

为链接添加下划线样式

默认情况下，浏览器会对链接加上下划线以让用户知道哪些是可点击的。一些设计师使用 CSS 来取消超链接的下划线。这会导致可用性和可访问性问题，因为它使得从周围文本中识别超链接变得更加困难。

不同的链接颜色

颜色是另一种表明文本可点击的视觉提示。将超链接样式设置为与周围文本不同的颜色，使其更容易区分。

超链接是具有状态的少数 HTML 功能之一。最重要的两种状态是 已访问 和 未访问。

为这两种状态设置不同颜色有助于用户识别他们之前访问过的页面。消除猜测 visited 链接颜色的一个好技巧是将它们的颜色设置为比未访问的链接暗 10%-20%。

链接还有另外三种状态：

  • 悬停 (hover)，当鼠标位于元素上方时
  • 聚焦 (focus)，类似于悬停，但是针对键盘用户
  • 激活 (active)，当用户点击链接时

由于悬停和聚焦具有相似的含义，因此最好赋予它们相同的样式。

尽管悬停和聚焦具有相似的含义，但它们有不同的交互模式。如果您选择一个微妙的悬停状态，您应该有一个更容易识别的聚焦状态。在链接上悬停是一种定向活动，用户知道自己在页面的位置，只需确定该位置是否已建立链接即可。而聚焦则是一种非定向活动，用户需要发现他们在从上一个位置转移焦点后，其焦点移动到了哪里。

颜色对比度

颜色对比度指的是 两种颜色之间的差异。海军蓝和黑色之间的对比度较低。白色和黑色之间的对比度高。WebAIM 是一个非营利性网络无障碍组织，它提供了一个 颜色对比度计算器 帮助您确定网站设计中的对比度。WCAG 2.0 要求正常文本的比率至少为 4.5:1 才能符合 AA 标准。

足够的字体大小

让您的文本易于阅读。通过使您的文本足够大，您可以提高网站的可用性并使内容更容易理解。14px 是最小的文本尺寸。

将标签与输入关联

标签告知用户输入字段的用途。您可以通过在标签中使用 for 属性将其连接到输入字段。这将允许用户点击标签并将焦点置于输入字段上。

<label for="username">用户名</label>
<input type="text" id="username" name="login" />

标签也适用于单选按钮。由于它是使用 id 字段而不是 name，因此组中的每个输入都有自己的标签。

<input type="radio" id="user_group_blogger" name="user_group" value="blogger" />
<label for="user_group_blogger">博主</label>
 
<input type="radio"  id="user_group_designer" name="user_group" value="designer" />
<label for="user_group_designer">设计师</label>
 
<input type="radio"  id="user_group_developer" name="user_group" value="developer" />
<label for="user_group_developer">开发者</label>

表单中的占位符文本

占位符文本向用户显示输入示例。当用户将光标放入字段时，占位符文本会消失，而标签保留。

<label for="name">姓名</label>
<input type="text" id="name" name="name" placeholder="John Smith" />

使用占位符来建议字段所需的数据类型，而不是作为字段标签的替代品。

描述性按钮

网络充满了含义不清的按钮。回想一下您上次在登录表单中使用“确定”或“提交”的情况？选择更好的单词显示在您的按钮上可以使您的网站更容易使用。尝试 [动词] [名词] 模式——创建用户、删除文件、更新密码、发送消息。每个都描述了当用户点击按钮时会发生什么。