在快節奏的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屬性可能會給使用者帶來不便，特别是那些有認知障礙的使用者。浏覽器無法提供準确的值，這使得個人難以提供預期的輸入。請確定您選擇了正确的值。
總結
希望對這些特性的探讨能激發你的興趣。當你開始下一個項目時，請記住優先考慮可用性、可通路性和簡潔性的重要性。