現在的網頁重視前端的設計，例如自己的公司可能不希望編輯區樣式跟大多數網頁長一樣，或者不喜歡按鈕預設的樣式想要修改等。
此時網頁設計師就會修改原有的樣式，甚至使用沒有樣式的標籤來客製成自己想要的效果。
因為現在的網頁有很多動態載入或改變的項目，導讀軟體已經不只是單純讀取 html 原始碼而已，在樣式被修改的情況下，有可能也會影響導讀軟體對於這個元素的解讀與支援。
而使用其他標籤來設計的狀況，問題就更加嚴重。由於導讀軟體通常仍以讀取網頁原始碼為基礎來解讀網頁，網頁若使用不正確的標籤，導讀軟體可能只會解讀該標籤原有的效果而已。
例如 div 這個標籤原本沒有什麼特殊效果，當設計師把它拿來當作連結時，除了畫面上需要做到看起來像連結的樣式，也要配合設計滑鼠移過來與點擊的效果與樣式等。
多數設計師認為做到以上的要求即可，但他們往往會忽略無障礙的設計。
原本的 a 標籤就是連結，除了有連結的樣式外，對於鍵盤操作的效果與無障礙的設計都是 html 本身就做好的。設計師不需要特別做什麼就有基本的無障礙。
但使用了 div 當作連結後，原本使用鍵盤對於 div 就不會有可以按 enter 點擊的效果，利用 tab 移到元件本身也不會駐點。
因此設計師除了設計好畫面與滑鼠外，還要實作鍵盤對 div 標籤要有與連結一樣的操作效果，還要必須讓導讀軟體認識新標籤的用途。因為不了解無障礙設計的設計師，不會考慮到使用鍵盤搭配導讀軟體操作的使用情境，往往會沒有考量到這些無障礙的設計，進而產生了障礙。
無障礙屬性(wai-aria) 用於讓導讀軟體可以快速地適應現金網頁多變的屬性與設計。透過這一系列的屬性，可以強制讓導讀軟體針對某個元件採用某種屬性，或者強制導讀軟體來模擬某種屬性的行為。
這樣的屬性就是用來解決上述的問題，如果有一個屬性將鍵盤與導讀軟體對於連結的操作與效果都做好了，那麼設計師不管拿什麼標籤來當作連結，只要加上該屬性就可以讓該標籤對導讀軟體有連結的一切效果與行為。
這個非連結的標籤除了用畫面的效果滿足非使用鍵盤與導讀軟體的使用者外，也需要透過無障礙屬性來控制導讀軟體的解讀。
為了滿足各式各樣的元件特性，因此 W3C 定義了大量的無障礙屬性，這個草案用來輔助設計師更輕鬆的達到元件的無障礙化。
但定義是定義好了，也要看導讀軟體對這些無障礙屬性的支援度如何。實務上每個導讀軟體搭配不同的瀏覽器可能實作的狀況都不同，加上這只是一份草案，很多定義也可能都還在變化之中。
所以能夠使用原生的標籤來設計網頁還是最保險的選擇，才不會因為不同導讀軟體或瀏覽器支援度的差異而造成無障礙程度不一的困擾。
我們之前已經看過了一些無障礙屬性效果，例如：
role="button" 讓連結變成按鈕role="link" 讓按鈕變成連結<div role="main">我是一個地標區塊</div><div role="checkbox">是否捐款</div>aria-checked="true" 來表示勾選等。<h2 aria-hidden="true">導讀軟體看不到這一行</h2>aria-hidden="true" 的屬性，代表該標籤與其所包含的所有標籤都會向導讀軟體隱藏<button id="food">我要訂餐</button>
<div id="msg" aria-live="polite"></div><button id="link" aria-expanded="false">下方選單</button>
<ul id="ul_two" style="display:none"></ul><h2 role="heading" aria-level="3">原本是 h2 </h2>
<div role="heading" aria-level="100"> 自訂標題 </div><div aria-label="音量" id="slider" role="slider" tabindex="0" aria-live="assertive">50</div><label for="myRange">音量</label>
<input type="range" min="1" max="100" value="50" id="myRange"><button id="download">下載檔案</button>
<div id="progress" role="meter" aria-live="polite">0</div>role="meter" 這也應證無障礙屬性的支援度不一致狀況<button id="download">下載檔案</button>
<div>
<label for="progress">下載進度</label>
<progress id="progress" min="0" max="100" tabindex="0" value="0"> 0% </progress>
</div>在檢測時，如果不看原始碼，其實不容易察覺是否使用了 aria 屬性。
也正是這樣，這表示 aria 屬性用得很成功，讓使用導讀軟體的使用者察覺不出使用了非原生的標籤來設計網頁。
所以，是不是使用了 aria 屬性來設計不是重點，而是網頁上的元件屬性、狀態與資訊行為等是不是符合我們的期待。
除了檢測人員外，更需要了解這些無障礙屬性的應該是網頁的設計者，因為網頁由他們設計，什麼時候應該使用無障礙屬性來輔助，他們才是最清楚的。
有了這些無障礙屬性後，讓想兼顧畫面又想做好無障礙的設計師變得更容易開發網頁了。