html WAI-ARIA角色（地标角色，小部件角色等）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html WAI-ARIA角色（地标角色，小部件角色等）相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<title>Title of your document</title>
<meta charset="utf-8">
<meta name="description" content="description of your document">
</head>


<body>

<header role="banner">
  <h1>Title of your document</h1>
  <!-- Use 'aria-label' if more than one navigation/role -->
  <nav role="navigation" aria-label="mainnav">
    <ol>
      <li>
        <a href="#">alpha</a>
      </li>
      <li>
        <a href="#">bravo</a>
      </li>
      <li>
        <a href="#">charlie</a>
      </li>
      <li>
        <a href="#">delta</a>
      </li>
    </ol>
    <form role="search">
      <input type="search" placeholder="Need to find something?">
      <input type="submit" value="search">
    </form>
  </nav>
</header>

<main role="main">
  <h2>Main Content</h2>
  <p>Juicy content</p>
</main>

<aside role="complementary">
  <h2>Sidebar</h2>
  <p>Complementary content</p>
</aside>

<nav role="navigation" aria-label="pagenav"> <!-- Use 'aria-label' if more than one navigation/role -->
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<footer role="contentinfo">
  <h2>Footer</h2>
  <p>Information about the document</p>
</footer>

</body>
</html>

以上是关于html WAI-ARIA角色（地标角色，小部件角色等）的主要内容，如果未能解决你的问题，请参考以下文章

如何将aria组合框角色与网格元素一起使用？

更改对菜单和小部件的角色访问权限

PHP 更改对菜单和窗口小部件的角色访问权限

表单或导航标签中的角色属性已过时

如何从 QWidget 中删除 QPalette

网站权限管理 之 角（jue）色管理