重归基础：提升可访问性与用户体验的5大HTML属性

重归基础：提升可访问性与用户体验的5大HTML属性

在Web开发领域，随着新技术的不断涌现，我们往往容易忽视一些基础但极其重要的HTML属性。本文将介绍5个能够显著提升网站可访问性和用户体验的HTML属性，帮助开发者创建更加友好和包容的Web体验。

1. hreflang

hreflang属性用于为<a>或<link>元素中的链接资源指定语言种类，其功能与lang属性相似，但特别适用于标注链接目标的语言属性。

为什么使用 hreflang?

在多语言网站中，使用hreflang属性可以显著改善用户体验和搜索引擎优化（SEO）。通过这一属性，搜索引擎能够识别并导向用户至最适合其语言或地区需求的网页版本。例如，英语用户将自动访问英文版内容，而中文用户将自动访问中文版内容，从而无需用户手动选择，大大提升了浏览体验的顺畅度。

如何使用 hreflang?

在<a>元素中添加带有相应ISO语言代码的hreflang属性，以确保国际化的准确导向。例如，针对英文网站，该属性值应设置为'en'，针对中文网站，该属性值应设置为'zh-CN'。

<a href="https://example.com/en/" hreflang="en">English</a>
<a href="https://example.com/zh-CN/" hreflang="zh-CN">中文</a>

当您的网站具备多语言版本时，利用hreflang属性能有效指示每个特定URL所关联文档的语言和地区。通过这一属性，您可以让搜索引擎更精准地识别并理解各网页版本所针对的语言及地域定位，从而优化用户体验与搜索引擎的适配度。为每个链接集成指向相应语言版本的hreflang属性，确保囊括所需的语言代码。设定一个默认备用版本的链接，通过标记hreflang属性为'x-default'而非具体语言代码来实现。此外，务必在语言切换器的每一个链接上，将rel属性设定为'alternate'，以此明确指示这些链接指向的是当前页面的不同语言版本，即替代页面。

<a href="https://example.com/en/" hreflang="en" rel="alternate">English</a>
<a href="https://example.com/zh-CN/" hreflang="zh-CN" rel="alternate">中文</a>
<a href="https://example.com/" hreflang="x-default" rel="alternate">Default</a>

当然，您也可以在语言切换器中使用hreflang属性。

<a href="https://example.com/zh-CN/" hreflang="x-default">中文</a>
<a href="https://example.com/en/" hreflang="en">English</a>

有时候，语言切换使用者会在他们转换后的语言中嵌入链接文本。为了明确这一点，您可以采用额外的lang属性进行标识。

<a href="https://example.com/zh-CN/" hreflang="x-default">中文</a>
<a href="https://example.com/en/" hreflang="en" lang="en">English</a>

注意：添加lang属性对于辅助技术用户尤其重要。例如，屏幕阅读器会根据语言属性更改其声音和发音。另一种提升页面可访问性的方法是，在当前激活的链接中融入属性aria-current='true'。

<a href="https://example.com/zh-CN/" hreflang="x-default" aria-current="true">中文</a>
<a href="https://example.com/en/" hreflang="en" lang="en">English</a>

2. translate

translate属性用于指示元素是否应该被翻译。

为什么使用 translate?

在一般情况下，多数网站内容默认是可翻译的，尽管存在例外，比如嵌入图像内的文本或SVG格式中的文字。当访问者的浏览器语言偏好与网站设定的语言不一致时，诸如Google浏览器自带的工具会提示用户进行页面内容的翻译。然而，并非所有场景都需要这种翻译功能。

对于特定专有名词，如公司名称、电子邮件地址及编程示例等，保持原文不动更为妥当，以防止误解。自动翻译技术虽便利，但并不完美，尤其在处理专业术语或领域特定词汇时，其准确性往往有待提升。

如何使用 translate?

您能够在任何HTML元素上应用translate属性。若希望进行翻译，请指定空字符串("")或使用”yes”；如需排除某元素于翻译之外，则应设置为”no”。

<p>This paragraph can be translated.</p>
<p translate="no">This paragraph will not be translated.</p>

3. reversed

reversed属性的作用是使有序列表<ol>中的项目以相反的顺序显示，实现列表项的逆序排列。

为什么使用 reversed?

应用reversed属性能够确保视觉展示与语义顺序的一致性，尽管列表项会从最高编号逐级递减。这意味着，当你在有序列表<ol>中使用此属性时，并不会改变列表项的实际排列，而是反转其编号顺序。例如，若要倒序列出你最喜爱的五种甜点，这一功能尤为实用。然而，需要注意的是，reversed属性对无序列表<ul>并不起作用。

注意，reversed属性对于无序列表<ul>元素并不起作用。

如何使用 reversed?

<ol reversed>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>

这将会产生一个颠倒顺序的列表如下：

注意：屏幕阅读器会以DOM顺序沿着显示列表

4. controls

controls属性告知浏览器展示默认的视频或音频控制栏。

为什么使用 controls?

在您的视频和音频资料中集成播放控制元素，对于提升用户体验、确保可访问性及增强实用性至关重要。这些功能使观众能够轻松地暂停、播放、调节音量或跳转至内容的任意位置，尤其为那些容易在浏览网页时感到晕动不适或容易分心的用户提供了便利。

标准播放控件涵盖基本操作，如播放与暂停、进度拖动（以便快速定位）、以及音量调节，同时，针对视频内容，还提供全屏观看选项、字幕开关及不同语言或解说轨的选择，进一步丰富了用户的观看体验。

注意：在使用默认提供的浏览器控件时，务必采取谨慎态度。存在情况下，键盘导航可能导致诸如焦点丢失的问题，这会迫使用户重新定位。为此，建议探索自定义控件的实现方式，或是集成那些已具备辅助功能的外部媒体播放器。尽管如此，我们的首要选择仍然是包含对照功能，而非省略它们，以确保最佳用户体验。

如何使用 controls?

您可以在<video>或<audio>元素中加入controls属性。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签
</video>

注意：默认控件不能使用CSS样式化。

5. autocomplete

autocomplete属性赋予浏览器自动填充表单字段的能力，适用于包括<form>、<input>、<select>及<textarea>在内的元素，从而提升用户输入效率与体验。

为什么使用 autocomplete?

借助autocomplete属性，浏览器能够为用户在表单字段中提供以往输入过的值作为建议，从而免除他们记忆或重复键入个人信息的负担。这对于认知困难、行动受限、注意力不集中、视力障碍或完全失明的群体而言，其积极影响尤为显著。它极大便利了那些希望减少表单填写过程中手动输入工作量的人群，有效降低了长时间打字的需求。通过向浏览器及辅助技术明确指示表单字段的预期用途，autocomplete属性显著增强了HTML表单的易用性和效率。具体而言，屏幕阅读器利用这些自动完成提示来辨识输入栏目的特性，助力用户更加高效地完成信息输入过程。例如，当浏览器存储了用户诸如姓名或电子邮件地址等特定信息时，屏幕阅读器将指引用户进行自动填充，进一步简化操作流程。

如何使用 autocomplete?

您能够为autocomplete功能设定不同的选项。当您选择设置为”off”时，浏览器将不再自动填充或推荐该字段的值。

<input type="text" name="username" autocomplete="off">

注意：许多密码管理应用程序可能依旧会提示用户保存新的登录信息，或是建议使用已存储的数据。

当启用’on’选项时，浏览器将自动填充输入内容。但请注意，若未提供关于所需数据的具体指引，浏览器将依据其自身算法进行判断。

<form action="/" autocomplete="on">
  <label for="firstname">First Name</label>
  <input type="text" name="firstname" id="firstname" />
  <label for="lastname">Last Name</label>
  <input type="text" name="lastname" id="lastname" />
  Email</label>
  <input type="email" name="email" id="email" />
</form>

最优化的解决策略是，通过选取与需求相符的项自输入目标列表中，为所需数据各自指定恰当的值。

<form action="/" autocomplete="on">
  <label for="firstName">First Name</label>
  <input autocomplete="given-name" name="firstName" id="firstName" type="text" />
  
  <label for="lastName">Last Name</label>
  <input autocomplete="family-name" name="lastName" id="lastName" type="text" />
  
  Email</label>
  <input autocomplete="email" name="email" id="email" type="email" />
</form>

注意：若输入框未正确设置或遗漏了autocomplete属性，可能会给用户带来困扰，尤其是对认知有障碍的群体。这会导致浏览器无法自动推荐恰当的内容，用户在输入信息时便会遇到困难。因此，请务必确认已选用合适的autocomplete属性值以优化用户体验。