Laucher

2024年 05月 22日

0

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

在高速发展的Web开发领域，常常令人目不暇接的是层出不穷的新框架、库以及前沿技术。然而，有时最为显著的提升源自于对基础知识的重新探索。本篇博客文章旨在引领您深入了解五个HTML属性，它们不仅对提升网站的可访问性至关重要，同时也能极大增强用户的整体体验。无论您是编程老手还是初涉此领域的新人，让我们一起探索这些元素的潜力，以创建更具包容性的Web体验。

1. hreflang

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

为什么使用 hreflang?

改善用户体验及搜索引擎优化（SEO）的一个有效策略是在您的网站内外部链接中巧妙运用hreflang属性。这一策略使得搜索引擎能够识别并导向用户至最适合其语言或地区需求的网页版本。例如，英语用户将自动访问英文版内容，而中文用户将自动访问中文版内容，从而无需用户手动选择，大大提升了浏览体验的顺畅度。

如何使用 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>

另一种提升页面可访问性的方法是，在当前激活的链接中融入属性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>

1. 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?

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

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

• 5
• 4
• 3
• 2
• 1

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>

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" />

  <label for="email">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" />
  
  <label for="email">Email</label>
  <input autocomplete="email" name="email" id="email" type="email" />
</form>