5個改善用戶體驗的HTML屬性
共 9317字，需瀏覽 19分鐘
·
2024-06-28 09:15
點擊上方 前端Q，關(guān)注公眾號
回復加群，加入前端Q技術(shù)交流群
本文翻譯自 Back to Basics: 5 HTML attributes for improved accessibility and user experience，作者：Daniela Kubesch， 略有刪改。
在快節(jié)奏的Web開發(fā)世界中，很容易被最新的框架，庫和尖端技術(shù)所吸引。但有時最有影響力的改進來自于重新審視基本面。
在本篇博文中，我將向您介紹五種 HTML 屬性，它們不僅能提高可訪問性，還能增強整體用戶體驗。無論您是經(jīng)驗豐富的開發(fā)人員還是剛剛起步，讓我們一起探索這些元素的潛力，創(chuàng)造更具包容性的web體驗。
1. hreflang
hreflang屬性指定<a>或<link>元素上鏈接資源的語言。它的工作原理類似于lang屬性，但專門用于鏈接。
為什么使用 hreflang?
您可以通過在內(nèi)部和外部網(wǎng)站鏈接中使用hreflang來改善用戶體驗和SEO。在內(nèi)部網(wǎng)站鏈接上使用hreflang提供了一種方法，可以告訴搜索引擎其他語言或地區(qū)的頁面的不同變化。這意味著講英語的人將收到該網(wǎng)站的英文版，而講瑞典語的人將收到瑞典文版。用戶端無需手動切換，體驗更加流暢。
如何使用 hreflang
將帶有所需ISO語言代碼的hreflang屬性添加到<a>元素中。對于英文網(wǎng)站則是en。
<a href="https://example.com" hreflang="en">English Website</a>
您也可以使用更具體的語言代碼，并使用區(qū)域變化。例如我們可以為英式英語添加en-GB。
<a href="https://example.at" hreflang="en-GB">English Website</a>
如果您的網(wǎng)站提供多種語言版本，您可以使用hreflang指定與特定URL關(guān)聯(lián)的文檔的語言和區(qū)域。添加該屬性將有助于搜索引擎了解不同網(wǎng)頁版本的語言和區(qū)域定位。
在每個鏈接中添加帶有所需語言代碼的hreflang。一個鏈接應該作為默認的后備版本，通過添加hreflang="x-default"而不是語言代碼來識別。最后對于語言切換器中的每個鏈接，將rel屬性的值設(shè)置為"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屬性對于輔助技術(shù)用戶尤其重要。例如屏幕閱讀器會根據(jù)語言屬性更改其聲音和發(fā)音。
增強可訪問性的另一種方法是將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?
默認情況下，大多數(shù)網(wǎng)站文本都是可翻譯的（除了一些例外，例如圖像上或SVG中的文本）。如果網(wǎng)站的定義語言與瀏覽器的默認語言不同，翻譯工具（如Google翻譯）可能會建議翻譯頁面內(nèi)容。
但可能存在這種行為是不需要的情況。公司名稱、電子郵件地址或代碼示例等特定術(shù)語通常不應翻譯，以避免混淆。自動翻譯并不總是完全準確的，特別是對于小眾詞匯或技術(shù)詞匯。
如何使用 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>）不會反轉(zhuǎn)列表項，而只是反轉(zhuǎn)列表編號。例如你想倒數(shù)你最喜歡的五種甜點，這種行為是很有幫助的。但是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>
這將導致以下反轉(zhuǎn)列表：
5. Cookies
4. Crema Catalana
3. Tiramisu
2. Pastel de Nata
1. Sacher cake
4. controls
controls屬性指示瀏覽器顯示標準的視頻或音頻控件。
為什么使用 controls?
在您的視頻和音頻內(nèi)容中包含播放控制對于優(yōu)化用戶體驗、可訪問性和可用性至關(guān)重要。這些控件使用戶能夠停止或調(diào)整視頻/聲音播放，并幫助那些在瀏覽您的網(wǎng)站時可能會出現(xiàn)暈動病或分心的人。默認控件包括播放、暫停、搜索（移動位置）和音量等播放要素，以及僅用于視頻內(nèi)容的全屏切換、字幕/字幕和跟蹤。
注意：應謹慎使用作為默認值提供的瀏覽器控件。有時基于鍵盤的導航可能會導致問題，例如失去焦點，迫使用戶重新定位自己。考慮實現(xiàn)自定義控件或集成配備輔助功能的外部媒體播放器。不過，有控制比沒有控制更好。
如何使用 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屬性，瀏覽器可以建議以前用戶輸入表單字段的值，這意味著用戶不必記住或手動輸入個人信息。這對有認知障礙、行動不便、注意力缺陷、視力低下或失明的人有顯著的好處。有些人可能會發(fā)現(xiàn)減少表單中的手動輸入特別有益，因為它減少了大量打字的需要。
autocomplete屬性通過通知瀏覽器和輔助技術(shù)有關(guān)特定表單字段的預期用途，為用戶提高HTML表單的可用性和效率。屏幕閱讀器使用這些自動完成值來了解輸入字段的性質(zhì)，并幫助用戶更有效地輸入信息。例如用戶的瀏覽器已經(jīng)保存了特定字段的信息（例如他們的姓名或電子郵件），屏幕閱讀器將提示他們自動填寫該信息。
如何使用 autocomplete
您可以為autocomplete指定不同的值。
如果選擇off，瀏覽器將無法自動輸入或選擇此字段的值。
<label for="email">E-Mail</label>
<input name="email" id="email" type="email" autocomplete="off" />
如果選擇on，瀏覽器將自動完成輸入。不過由于沒有提供有關(guān)預期數(shù)據(jù)的進一步信息，瀏覽器可能會自行判斷。
<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>
最佳解決方案是通過從可用輸入目的列表中選擇相應的值來為所需數(shù)據(jù)指定不同的值。
您的表單可能看起來像這樣：
<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屬性可能會給用戶帶來不便，特別是那些有認知障礙的用戶。瀏覽器無法提供準確的值，這使得個人難以提供預期的輸入。請確保您選擇了正確的值。
總結(jié)
希望對這些特性的探討能激發(fā)你的興趣。當你開始下一個項目時，請記住優(yōu)先考慮可用性、可訪問性和簡潔性的重要性。
看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～
往期推薦
最后
歡迎加我微信，拉你進技術(shù)群，長期交流學習...
歡迎關(guān)注「前端Q」,認真學前端，做個專業(yè)的技術(shù)人...