5个辅助提升用户体验的HTML属性

带领您了解五个HTML属性，它们不仅可以提高可访问性，还可以增强整体用户体验。无论您是经验丰富的开发者还是初学者，让我们探索这些元素的潜力，创造更具包容性的网页体验。

hreflang

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

为什么要使用hreflang？

通过在内部和外部站点链接中使用hreflang，您可以提高用户体验和搜索引擎优化（SEO）。
在内部网站链接上使用hreflang可以告诉搜索引擎关于其他语言或地区页面的不同变体。这意味着英语使用者将收到站点的英文版本，而瑞典使用者将收到瑞典版本。用户无需手动切换，从而获得更流畅的体验。

如何使用hreflang

在元素中添加所需的ISO语言代码作为hreflang属性。对于英语网站，这将是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>

translate

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

为什么要使用translate？

大多数网站文本默认是可翻译的（有些例外情况，如图像上的文本或SVG内部的文本）。如果站点定义的语言与浏览器的默认语言不同，翻译工具（如Google Translate）可能会建议翻译页面内容。然而，可能存在不希望进行此操作的情况。
通常不应将特定术语（如公司名称、电子邮件地址或代码示例）翻译，以避免混淆。自动翻译并不总是完全准确，特别是对于特定或技术性词汇。

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

reversed

反转属性（reversed attribute）用于将有序列表（<ol>）按相反的顺序排列。

为什么使用反转属性？

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

注意：反转属性不会影响无序列表（<ul>）。

如何使用反转属性

将反转属性添加到您的列表元素中。

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

这将导致以下反转列表：

1. Cookies
2. Crema Catalana
3. Tiramisu
4. Pastel de Nata
5. Sacher cake

注意：屏幕阅读器会按DOM顺序宣读列表以及正确的编号：“5. Cookies，4. Crema Catalana，等等”。

controls

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

为什么使用控件属性？

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

注意：默认提供的浏览器控件应谨慎使用。有时基于键盘的导航可能会引起问题，例如丢失焦点，迫使用户重新定位。考虑实施自定义控件或集成具有可访问性功能的外部媒体播放器。但是，包含控件仍然比不包含控件更可取。

如何使用控件属性

您可以将控件属性添加到<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" />

  您的浏览器不支持视频标签。
</video>

注意：默认控件无法使用CSS进行样式设置。

autocomplete

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

为什么使用自动完成属性？

有了自动完成属性，浏览器可以为表单字段的值建议先前用户的输入，这意味着用户不必记住或手动输入个人信息。对于具有认知障碍、运动能力受限、注意力缺陷、低视力或盲视的个人来说，这将带来显着的好处。一些人可能会发现在表单中减少手动输入尤其有益，从而降低了大量输入的需求。

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

如何使用自动完成属性

您可以为自动完成指定不同的值。

如果选择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>

注意：在输入字段中缺少或不正确使用自动完成属性可能会给用户带来不便，尤其是那些具有认知障碍的用户。浏览器无法提供准确的建议值，使用户难以提供预期的输入。请确保选择正确的值。