5个改善用户体验的HTML属性

前端Q

我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～

公众号

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

本文翻译自 Back to Basics: 5 HTML attributes for improved accessibility and user experience，作者：Daniela Kubesch， 略有删改。

在快节奏的Web开发世界中，很容易被最新的框架，库和尖端技术所吸引。但有时最有影响力的改进来自于重新审视基本面。

在本篇博文中，我将向您介绍五种 HTML 属性，它们不仅能提高可访问性，还能增强整体用户体验。无论您是经验丰富的开发人员还是刚刚起步，让我们一起探索这些元素的潜力，创造更具包容性的web体验。

1. hreflang

hreflang属性指定<a>或<link>元素上链接资源的语言。它的工作原理类似于lang属性，但专门用于链接。

为什么使用 hreflang?

您可以通过在内部和外部网站链接中使用hreflang来改善用户体验和SEO。在内部网站链接上使用hreflang提供了一种方法，可以告诉搜索引擎其他语言或地区的页面的不同变化。这意味着讲英语的人将收到该网站的英文版，而讲瑞典语的人将收到瑞典文版。用户端无需手动切换，体验更加流畅。

如何使用 hreflang

将带有所需ISO语言代码的hreflang属性添加到<a>元素中。对于英文网站则是en。

<a href="https://example.com" hreflang="en">English Website</a>

您也可以使用更具体的语言代码，并使用区域变化。例如我们可以为英式英语添加en-GB。

<a href="https://example.at" hreflang="en-GB">English Website</a>

如果您的网站提供多种语言版本，您可以使用hreflang指定与特定URL关联的文档的语言和区域。添加该属性将有助于搜索引擎了解不同网页版本的语言和区域定位。

在每个链接中添加带有所需语言代码的hreflang。一个链接应该作为默认的后备版本，通过添加hreflang="x-default"而不是语言代码来识别。最后对于语言切换器中的每个链接，将rel属性的值设置为"alternate"，以指示所链接的页面是当前页面的替代页面。

<link href="https://example.com" rel="alternate" hreflang="x-default" />
<link href="https://example.com/de" rel="alternate" hreflang="de" />

您也可以在语言切换器中使用hreflang。

<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de">German</a>

有时语言切换者使用他们切换到的语言中的链接文本。您可以通过额外使用lang属性来指示这一点。

<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de" lang="de">Deutsch</a>

注意：添加lang属性对于辅助技术用户尤其重要。例如屏幕阅读器会根据语言属性更改其声音和发音。

增强可访问性的另一种方法是将aria-current="true"包含到当前活动的链接中。

<a href="https://example.com" hreflang="x-default" aria-current="true">English</a>
<a href="https://example.com/de" hreflang="de" lang="de">Deutsch</a>

2. translate

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

为什么使用 translate?

默认情况下，大多数网站文本都是可翻译的（除了一些例外，例如图像上或SVG中的文本）。如果网站的定义语言与浏览器的默认语言不同，翻译工具（如Google翻译）可能会建议翻译页面内容。

但可能存在这种行为是不需要的情况。公司名称、电子邮件地址或代码示例等特定术语通常不应翻译，以避免混淆。自动翻译并不总是完全准确的，特别是对于小众词汇或技术词汇。

如何使用 translate

您可以在任何HTML元素上使用translate。指定一个空字符串（""）或yes用于翻译，而no用于避免翻译。

<!-- 德语原文 -->
<p>
  <span>Wien<span> 
  ist (wieder) die lebenswerteste Stadt der Welt!
</p>
<p>
  <span translate="no">Wien<span> 
  ist (wieder) die lebenswerteste Stadt der Welt!
</p>

<!-- 翻译后 -->
<p>
  <span>Vienna<span> 
  named world's most liveable city (again)!
</p>
<p>
  <span translate="no">Wien<span> 
  named world's most liveable city (again)!
</p>

3. reversed

reversed属性用于以相反的顺序颠倒有序列表（<ol>）。

为什么使用 reversed?

使用reversed属性可以保持视觉和语义列表项的顺序相同，但它们从最高到最低编号。这意味着将此属性添加到您的有序列表（<ol>）不会反转列表项，而只是反转列表编号。例如你想倒数你最喜欢的五种甜点，这种行为是很有帮助的。但是reversed属性不影响无序列表（<ul>）。

如何使用 reversed

将reversed属性添加到列表元素中。

<ol reversed>
  <li>Cookies</li>
  <li>Crema Catalana</li>
  <li>Tiramisu</li>
  <li>Pastel de Nata</li>
  <li>Sacher cake</li>
</ol>

这将导致以下反转列表：

5. Cookies

4. Crema Catalana

3. Tiramisu

2. Pastel de Nata

1. Sacher cake

4. controls

controls属性指示浏览器显示标准的视频或音频控件。

为什么使用 controls?

在您的视频和音频内容中包含播放控制对于优化用户体验、可访问性和可用性至关重要。这些控件使用户能够停止或调整视频/声音播放，并帮助那些在浏览您的网站时可能会出现晕动病或分心的人。默认控件包括播放、暂停、搜索（移动位置）和音量等播放要素，以及仅用于视频内容的全屏切换、字幕/字幕和跟踪。

注意：应谨慎使用作为默认值提供的浏览器控件。有时基于键盘的导航可能会导致问题，例如失去焦点，迫使用户重新定位自己。考虑实现自定义控件或集成配备辅助功能的外部媒体播放器。不过，有控制比没有控制更好。

如何使用 controls

您可以将controls属性添加到<video>或<audio>元素。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">

  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />

  Your browser does not support the video tag.
</video>

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

5. autocomplete

autocomplete属性使浏览器能够自动完成表单值，并可应用于<form>、<input>、<select>和<textarea>元素。

为什么使用 autocomplete?

有了autocomplete属性，浏览器可以建议以前用户输入表单字段的值，这意味着用户不必记住或手动输入个人信息。这对有认知障碍、行动不便、注意力缺陷、视力低下或失明的人有显著的好处。有些人可能会发现减少表单中的手动输入特别有益，因为它减少了大量打字的需要。

autocomplete属性通过通知浏览器和辅助技术有关特定表单字段的预期用途，为用户提高HTML表单的可用性和效率。屏幕阅读器使用这些自动完成值来了解输入字段的性质，并帮助用户更有效地输入信息。例如用户的浏览器已经保存了特定字段的信息（例如他们的姓名或电子邮件），屏幕阅读器将提示他们自动填写该信息。

如何使用 autocomplete

您可以为autocomplete指定不同的值。

如果选择off，浏览器将无法自动输入或选择此字段的值。

<label for="email">E-Mail</label>
<input name="email" id="email" type="email" 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>

注意：在输入字段中缺少或不正确使用autocomplete属性可能会给用户带来不便，特别是那些有认知障碍的用户。浏览器无法提供准确的值，这使得个人难以提供预期的输入。请确保您选择了正确的值。

总结

希望对这些特性的探讨能激发你的兴趣。当你开始下一个项目时，请记住优先考虑可用性、可访问性和简洁性的重要性。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

往期推荐

ESLint 团队即将废除所有格式化规则！

别忘了前端是靠什么起家的！！！

别想调试我的前端代码！

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

前端Q

本公众号主要分享一些技术圈(前端圈为主)相关的技术文章、工具资源、学习资料、招聘信息及其他有趣的东西...

公众号

点个在看支持我吧