简介

1 .Aria的role属性值可以作为地标来复制HTML5的语义化，比如nav Tag，或者超越HTML5的语义，给不同的功能块提供路标。比如seacrh,raggroup,tab,listbox
2 .出于某种原因，你的网站全部都是使用div构建，那么你就需要使用aria角色来提供所需要的语义

role

1 .wai-aria给浏览器增加了role属性，这语序我们给页面中的元素增加我们想要的语义属性
2 .如下的dom结构,如果用现代浏览器打开，并且用屏幕阅读器测试，就已经得到了想要的信息了

<header>
  <h1>...</h1>
  <nav>
    <ul>...</ul>
    <form>
      <!-- search form  -->
    </form>
  </nav>
</header>

<main>
  <article>...</article>
  <aside>...</aside>
</main>

<footer>...</footer>

3 .最后读出的结果就是，而且可以很好的用鼠标或者键盘快速访问大部分元素都已经被很好的列出，可以快速访问

image.png

1 .在header元素中，出现了两个元素h1和nav
2 .在nav中包含一个列表和一个表单
3 .在main中，包含article文章和aside侧边栏
4 .在aside中，包含列表和标题
5 .在footer中包含一个元素

4 .使用无障碍特性进行优化后的代码结构

<header>
  <h1>...</h1>
  <nav role="navigation">
    <ul>...</ul>
    <form role="search">
      <input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
    </form>
  </nav>
</header>

<main>
  <article role="article">...</article>
  <aside role="complementary">...</aside>
</main>

<footer>...</footer>

5 .优化说明

1 .给主要的HTML结构加上了角色role
2 .input元素使用了属性aria-label，他给一个描述性标签，可以由屏幕阅读读出来，尽管我们没有label元素。在某些情况下，这非常有用，可以再不加dom结构的时候添加属性，现在当屏幕阅读器读到这里，这个input里面label添加的label属性会被大声的念出来
3 .搜索表单的改进语义表明当超出HTML5可用的语义时aria可以