前言
看到這篇去iPhone設置Voiceover，感受下屏幕閱讀器讀文字是什麼樣的。這篇大家也可以試試。今日早讀文章由Moka前端工程師@王佳裕授權分享。
正文從這開始~~
目錄什麼是無障礙化，都有哪些障礙
iOS如何開啟旁白
網頁如何讓屏幕閱讀器更好工作
一、什麼是無障礙化，網站用戶都有哪些障礙在平時日場生活中，我們經常能看見這樣的標誌
諸如地鐵站這樣的公共設施中一定會有這種無障礙通道，幫助行動有障礙的居民至少能夠使用地鐵這種公共設施。但通常無障礙的設計容易被我們這樣健全的人忽略，比如盲道被佔：
那麼，在網站中都有哪些人群屬於殘障群體
1、視覺障礙比如盲人、視力低下、色彩障礙，這一類用戶在整個殘障群體佔比相對最高，比如紅綠色盲，無法分辨紅色或者綠色等，甚至無法區分出各種顏色之間的區別，因此也有閱讀網站推出色盲模式或者高對比度模式
英雄聯盟中的色盲模式，綠色血條變黃色而視障人群更多的是使用屏幕閱讀器，這一塊做的最好的是iOS，後面的模塊會介紹如何使用iOS開啟屏幕閱讀器。
2、聽覺障礙聽覺障礙顧名思義就是聽力有問題，在一些視頻網站可能會遇到視頻沒有字幕的情況，對聽力上有障礙的用戶來說是一種非常痛苦的情況。
YouTube的自動翻譯字幕3、運動障礙一些需要按照規定路線和時間完成的操作，對運動有障礙的人群來說，是一件特別痛苦的事。
某種滑動類的驗證碼4、認知障礙比如與暈動症和感官超載相關，像癲癇之類，受不了刺激的視覺動畫，比如搖晃、強光、重複閃光。
還有學習障礙，閱讀困難等，網站文案使用一些晦澀難懂的成語或者排版過於擁擠，導致長時間閱讀產生感覺文字在旋轉扭曲不良生理反應等等。
iOS如何開啟旁白首先我們在設置中找到輔助功能，然後打開旁白
iOS的輔助功能也可以喊Siri出來打開旁白，這樣對盲人來說更方便。
主要操作如圖：
我們使用屏幕閱讀器來看一下怎麼打開Safari，然後訪問百度和360搜索都有哪些差異。
網頁如何讓屏幕閱讀器更好工作通過幾個例子讓大家更好理解這些屬性的區別
比如我們大量使用React的項目，通常網頁內容會使用div來承接內容，比如：
<div>
<div>
<div>章節一</div>
<div>章節二</div>
<div>章節三</div>
</div>
<div>
<div>章節一內容</div>
<div>章節二內容</div>
<div>章節三內容</div>
</div>
</div>
讓我們試試開了屏幕閱讀器，它是怎麼念這段文字：
嘗試閉上眼睛來感受一下訪問這個頁面的感受
來一點語義化標籤<div>
<nav>
<div>章節一</div>
<div>章節二</div>
<div>章節三</div>
</nav>
<article>
<div>章節一內容</div>
<div>章節二內容</div>
<div>章節三內容</div>
</article>
</div>
加上一下label的for<label for="email">郵箱</label>
<input type="text" id="email">
增加role<div>
<nav>
<div role="tab">章節一</div>
<div role="tab">章節二</div>
<div role="tab">章節三</div>
</nav>
<article>
<div>章節一內容</div>
<div>章節二內容</div>
<div>章節三內容</div>
</article>
</div>
可以聽到增加了標籤的提示以及導航進度的提示
aria-labelledby<div>
<nav>
<div id="tab1" role="tab">導航章節一</div>
<div id="tab2" role="tab">導航章節二</div>
<div id="tab3" role="tab">導航章節三</div>
</nav>
<article>
<input aria-labelledby="tab1"></input>
<input aria-labelledby="tab2"></input>
<input aria-labelledby="tab3"></input>
</article>
</div>
把標題和整個對話框捆綁在一起
<div role="dialog" aria-labelledby="dialogheader">
<h2 id="dialogheader">選擇文件</h2>
彈窗內容
</div>
更多例子：https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/ARIATechniques/Usingthearia-labelledbyattribute
但裡面的例子嘗試了沒聽出區別
aria-labellabel屬性能夠讓屏幕閱讀器在讀到對應的元素的時候讀指定的文本內容
<input type="text" class="form-control" id="name" placeholder="請輸入名稱" aria-label="請輸入名稱，這裡是特殊提醒">
aria-label只在交互組件上生效，比如輸入框，按鈕等
<div aria-label="這裡是特殊提醒">普通文本</div>
aria-describedby讓屏幕閱讀器來讀出額外的描述內容
<div role="dialog">
<button aria-label="關閉按鈕" aria-describedby="descriptionClose">X</button>
<div>對話框內容</div>
<div id="descriptionClose">點擊關閉這個對話框，來返回上級頁面</div>
</div>
aria-hidden讓屏幕閱讀器來隱藏指定的元素，還是剛才的例子
<div role="dialog">
<button aria-label="關閉按鈕" aria-describedby="descriptionClose">X</button>
<div>對話框內容</div>
<div id="descriptionClose" aria-hidden="true">點擊關閉這個對話框，來返回上級頁面</div>
</div>
更多的交互：aria-haspopup 和 aria-expanded
<div role="dialog">
<a role="button" aria-haspopup="true" aria-expanded="false" >對話框標題</a>
<div>展開的內容</div>
</div>
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100">
進度
</div>
<div role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</div>
上面這些就是常用的幾種屬性，當然還有其他方式，可以看看協議中所有的aria屬性列表：https://link.zhihu.com/?target=https%3A//www.w3.org/TR/wai-aria-1.1/img/rdf_model.svg
關於本文作者：@王佳裕原文：https://zhuanlan.zhihu.com/p/97699978
為你推薦
【第1730期】把網站升級到http/2
【第968期】開箱即用的網站可訪問性提升指南