在快节奏的Web 开发世界中，很容易陷入最新的框架、库和尖端技术之中。但有时最有效的改进来自于重新审视基础知识。
在这篇博文中，我们介绍了五个HTML 属性，它们不仅可以提高可访问性，还可以改善整体用户体验。无论您是经验丰富的开发人员还是新手，都可以探索这些元素的潜力，以创建更全面的Web 体验。
1. hreflang
hreflang 属性指定与a 或link 元素链接的资源的语言。这与lang 属性类似，但专门用于链接。
为什么使用hreflang？
在内部和外部网站链接中使用hreflang 可以改善用户体验和SEO。在网站的内部链接中使用hreflang 可以让搜索引擎了解其他语言或地区的页面的不同变体。这意味着说英语的人将收到该网站的英文版本，而说瑞典语的人将收到瑞典语版本。无需手动切换客户端，体验更流畅。
如何使用hreflang
将包含所需ISO 语言代码的hreflang 属性添加到a 元素。 en 表示英文网站。
ahref=\’https://example.com\’hreflang=\’en\’EnglishWebsite/a
您还可以使用更具体的语言代码或区域变体。例如，您可以为英式英语添加en-GB。
ahref=\’https://example.at\’hreflang=\’en-GB\’EnglishWebsite/a
如果您的网站提供多种语言版本，您可以使用hreflang 指定与特定URL 关联的文档的语言和区域。添加此属性有助于搜索引擎了解不同网页版本的语言和地理定位。
将包含所需语言代码的hreflang 添加到每个链接。该链接应用作默认后备，并通过添加hreflang=\’x-default\’ 而不是语言代码来标识。最后，对于语言切换器中的每个链接，将rel 属性的值设置为“alternate”，以指示链接页面是当前页面的替代页面。
linkhref=\’https://example.com\’rel=\’alternate\’hreflang=\’x-default\’/
linkhref=\’https://example.com/de\’rel=\’alternate\’hreflang=\’de\’/
您还可以将hreflang 与语言切换器一起使用。
ahref=\’https://example.com\’hreflang=\’x-default\’English/a
ahref=\’https://example.com/de\’hreflang=\’de\’german/a
语言切换器可以使用您要切换到的语言的链接文本。要指示这一点，请添加并使用lang 属性。
ahref=\’https://example.com\’hreflang=\’x-default\’English/a
ahref=\’https://example.com/de\’hreflang=\’de\’lang=\’de\’Deutsch/a
注意：添加lang 属性对于辅助技术用户尤其重要。例如，屏幕阅读器根据语言属性改变声音和发音。
增强可访问性的另一种方法是在当前活动链接中包含aria-current=\’true\’。
ahref=\’https://example.com\’hreflang=\’x-default\’aria-current=\’true\’English/a
ahref=\’https://example.com/de\’hreflang=\’de\’lang=\’de\’Deutsch/a
2. translate
Translation 属性用于指示元素是否需要翻译。
为什么要使用翻译？
默认情况下，大多数网站文本都是可翻译的（有一些例外，例如图像上的文本或SVG 中的文本）。如果您的网站使用的语言与浏览器的默认语言不同，翻译工具（例如Google 翻译）可能会建议对您的页面内容进行翻译。
但是，在某些情况下，这种行为可能是不受欢迎的。为避免混淆，某些术语（例如公司名称、电子邮件地址和代码示例）通常不应翻译。自动翻译并不总是完全准确，特别是在涉及专业或技术术语时。
如何使用翻译
您可以对任何HTML 元素使用翻译。指定一个空字符串(\’\’)，“是”进行翻译，或“否”以避免翻译。
!–德文原文–
p
斯潘维也纳斯潘
ist(wieder)dielebenswertesteStadtderWelt！
/p
p
spantranslate=\’no\’维也纳跨度
ist(wieder)dielebenswertesteStadtderWelt！
/p
!–翻译后–
p
斯潘维也纳斯潘
（再次）被评为世界上最适宜居住的城市！
/p
p
spantranslate=\’no\’维也纳跨度
（再次）被评为世界上最适宜居住的城市！
/p
3. reversed
reversed 属性用于以逆序(OL) 反转有序列表。
为什么要使用反转？
使用反转属性可以保持列表项的视觉和语义顺序相同，但从最高到最低进行编号。换句话说，当您将此属性添加到有序列表(ol) 时，列表项不会反转，只会反转列表编号。例如，如果您想倒数到五种您最喜欢的甜点，则此行为非常有用。但是，反转的属性对无序列表(UL) 没有影响。
反向使用
将反转属性添加到列表元素。
颠倒的
liCookies/li
休闲加泰罗尼亚/李
立提拉米斯/李
蛋挞/re
利萨赫蛋糕/李
/ol
这将创建以下倒排列表：
5. 饼干
4. 加泰罗尼亚克雷玛
3.提拉米苏
2. 蛋挞
1.萨赫蛋糕
4. controls
Controls 属性告诉浏览器显示标准视频或音频控件。
为什么要使用控件？
包含视频和音频内容的播放控件对于优化用户体验、可访问性和可用性非常重要。这些控件允许用户停止或调整视频/声音播放，并可以帮助在浏览网站时可能出现晕动病或分心的用户。默认控件包括播放元素，例如播放、暂停、搜索和音量，以及全屏切换、字幕/字幕和仅视频内容跟踪。
注意：应谨慎使用默认提供的浏览器控件。基于键盘的导航可能会导致诸如失去焦点或迫使用户改变方向等问题。考虑实施自定义控件或集成具有辅助功能的外部媒体播放器。尽管如此，受控总比不受控要好。
如何使用控件
您可以向视频或音频元素添加控制属性。
视频控制
resourcesrc=\’电影.mp4\’type=\’视频/mp4\’
resourcesrc=\’movie.ogg\’type=\’video/ogg\’
trackkind=\’captions\’src=\’sampleCaptions.vtt\’srclang=\’en\’/
trackkind=\’字幕\’src=\’sampleSubtitles_en.vtt\’srclang=\’en\’/
trackkind=\’字幕\’src=\’sampleSubtitles_de.vtt\’srclang=\’de\’/
您的浏览器不支持视频标签。
/视频
注意：默认控件不能使用CSS 设置样式。
5. autocomplete
autocomplete 属性允许浏览器自动完成表单值，可以应用于form、input、select 和textarea 元素。
为什么要使用自动完成功能？
自动完成属性允许浏览器为之前填写的表单字段建议值，因此用户不必记住或手动输入个人信息。这对于患有认知障碍、运动技能问题、注意力缺陷、弱视或视力障碍的人来说是一个巨大的好处。有些人可能会发现减少手动输入表单特别有益，因为它减少了冗长输入的需要。
自动完成属性通过告知浏览器和辅助技术某些表单字段的预期用途，使HTML 表单对用户来说更加可用和高效。屏幕阅读器使用这些自动完成值来理解输入字段的性质并帮助用户更有效地输入信息。例如，如果用户的浏览器已保存特定字段的信息（例如姓名或电子邮件），屏幕阅读器将自动提示他们填写该信息。
如何使用自动完成功能
自动完成可以有多种值。
如果选择“关闭”，浏览器将无法自动填写该字段或选择该字段的值。
labelfor=\’电子邮件\’电子邮件/标签
inputname=\’电子邮件\’id=\’电子邮件\’type=\’电子邮件\’autocomplete=\’关闭\’/
选择“开”让浏览器自动完成输入。但是，没有提供有关预期数据的附加信息，因此浏览器可以自行决定。
formaction=\’/\’autocomplete=\’on\’
labelfor=\’firstname\’ 姓名/标签
inputtype=\’text\’name=\’firstname\’id=\’firstname\’/
labelfor=\’姓氏\’姓氏/标签
inputtype=\’text\’name=\’lastname\’id=\’lastname\’/
labelfor=\’电子邮件\’电子邮件/标签
inputtype=\’电子邮件\’名称=\’电子邮件\’id=\’电子邮件\’/
/形状
最好的解决方案是通过从可用输入目的地列表中选择相应的值来为所需数据指定不同的值。
表格应如下所示：
formaction=\’/\’autocomplete=\’on\’
labelfor=\’firstName\’ 姓名/标签
inputautocomplete=\’given-name\’name=\’firstName\’id=\’firstName\’type=\’text\’/
labelfor=\’lastName\’姓氏/标签
inputautocomplete=\’family-name\’name=\’lastName\’id=\’lastName\’type=\’text\’/
labelfor=\’电子邮件\’电子邮件/标签
inputautocomplete=\’电子邮件\’name=\’电子邮件\’id=\’电子邮件\’type=\’电子邮件\’/
/形状
注意：输入字段上缺少或错误地使用自动完成属性可能会给用户带来不便，尤其是那些有认知障碍的用户。浏览器无法提供准确的值，使得个人很难提供预期的输入。请确保您选择了正确的值。
以上改善用户体验的#5 HTML属性的相关内容来源仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91919.html
