bootstrap-v4-chinese-document
/
可访问性.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.101.0">

  <meta name="docsearch:language" content="en">
  <meta name="docsearch:version" content="4.6">

  <title>介绍文档 · Bootstrap v4.6</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/introduction/">

  <!-- Bootstrap core CSS -->
  <link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

  <!-- Documentation extras -->
  <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">

  <link href="https://getbootstrap.com/docs/4.6/assets/css/docs.css" rel="stylesheet">

  <!-- Favicons -->
  <link rel="manifest" href="https://getbootstrap.com/docs/4.6/assets/img/favicons/manifest.json">
  <link rel="icon" href="https://getbootstrap.com/docs/4.6/assets/img/favicons/favicon.ico">
  <meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
  <meta name="theme-color" content="#563d7c">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@getbootstrap">
  <meta name="twitter:creator" content="@getbootstrap">
  <meta name="twitter:title" content="Introduction">
  <meta name="twitter:description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png">

  <!-- Facebook -->
  <meta property="og:url" content="https://getbootstrap.com/docs/4.6/getting-started/introduction/">
  <meta property="og:title" content="Introduction">
  <meta property="og:description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <script defer src="https://cdn.usefathom.com/script.js" site="ITUSEYJG"></script>
  <script>
    window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
    ga('create', 'UA-146052-10', 'getbootstrap.com');
    ga('set', 'anonymizeIp', true);
    ga('send', 'pageview');
  </script>
  <script async src="https://www.google-analytics.com/analytics.js"></script>


</head>

<body>
  <div class="skippy overflow-hidden">
    <div class="container-xl">
      <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" data-href="#content">跳转到主要内容</a>
      <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" data-href="#bd-docs-nav">跳转到文档导航</a>
    </div>
  </div>


  <div class="d-block px-3 py-2 text-center text-bold skippy">
    <a data-href="" class="text-white">Bootstrap 有更新版本！</a>
  </div>

  <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
    <a class="navbar-brand mr-0 mr-md-2" data-href="/" aria-label="Bootstrap">
      <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img"
        focusable="false">
        <title>Bootstrap</title>
        <path fill="currentColor"
          d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z" />
        <path fill="currentColor"
          d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z" />
      </svg>
    </a>

    <div class="navbar-nav-scroll">
      <ul class="navbar-nav bd-navbar-nav flex-row">
        <li class="nav-item">
          <a class="nav-link" data-href="/"
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">主页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" data-href=""
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">文档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href=""
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">示例</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');"
            target="_blank" rel="noopener">图标</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');"
            target="_blank" rel="noopener">主题</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');"
            target="_blank" rel="noopener">博览会</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');"
            target="_blank" rel="noopener">博客</a>
        </li>
      </ul>
    </div>

    <ul class="navbar-nav ml-md-auto">
      <li class="nav-item dropdown">
        <button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
          <span class="sr-only">Bootstrap&nbsp;</span> v4.6 <span class="sr-only">(选择其他版本)</span>
        </button>
        <div class="dropdown-menu dropdown-menu-md-right">
          <a class="dropdown-item active" data-href="">当前 (4.6.x)</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="">5.1.x</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="">v3.4.1</a>
          <a class="dropdown-item" data-href="">v2.3.2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="/">全部版本</a>
        </div>
      </li>

      <li class="nav-item">
        <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" data-data-href="https://github.com/twbs" target="_blank"
          rel="noopener" aria-label="GitHub">
          <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"
            focusable="false">
            <title>GitHub</title>
            <path fill="currentColor" fill-rule="evenodd"
              d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-1 mx-1 py-3 my-n2" data-href="https://twitter.com/getbootstrap" target="_blank"
          rel="noopener" aria-label="Twitter">
          <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"
            focusable="false">
            <title>Twitter</title>
            <path fill="currentColor"
              d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-1 mx-1 py-3 my-n2" data-href="https://opencollective.com/bootstrap/" target="_blank"
          rel="noopener" aria-label="Open Collective">
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg"
            viewBox="0 0 40 41" role="img" focusable="false">
            <title>Open Collective</title>
            <path fill-opacity=".4"
              d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" />
            <path
              d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z" />
          </svg>
        </a>
      </li>
    </ul>

    <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3"
      data-href="https://getbootstrap.com/docs/4.6/getting-started/download/">下载</a>
  </header>


  <div class="container-fluid">
    <div class="row flex-xl-nowrap">
      <div class="col-md-3 col-xl-2 bd-sidebar">
        <form role="search" class="bd-search d-flex align-items-center">
          <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..."
            autocomplete="off" data-docs-version="4.6">
          <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse"
            data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false"
            aria-label="Toggle docs navigation">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img"
              focusable="false">
              <title>菜单</title>
              <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"
                d="M4 7h22M4 15h22M4 23h22" />
            </svg>
          </button>
        </form>

        <div class="collapse d-md-block row" id="bd-docs-nav">
          <nav class="bd-links" aria-label="Main navigation">

            <div class="bd-toc-item active">
              <a class="bd-toc-link" href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/">
                入门
              </a>
              <ul class="nav bd-sidenav">
                <li class="active bd-sidenav-active">
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/">介绍</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/下载.html">下载</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/目录.html">目录</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/浏览器和设备.html">浏览器和设备</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/JavaScript.html">JavaScript</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/主题.html">主题</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/构建工具">构建工具</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/Webpack.html">Webpack</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/可访问性.html">可访问性</a>
                </li>
              </ul>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/layout/">
								布局
							</a>
						</div>

						<div class="bd-toc-item">
							<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/content/">
								内容
							</a>
						</div>

						<div class="bd-toc-item">
							<a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/components/alerts/">
								组件
							</a>
						</div>

						<div class="bd-toc-item">
							<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/utilities/">
								实用工具
							</a>
						</div>

						<div class="bd-toc-item">
							<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/extend/">
								扩展
							</a>
						</div>

						<div class="bd-toc-item">
							<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/migration/">
								迁移
							</a>
						</div>

						<div class="bd-toc-item">
							<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/about/">
								关于
							</a>
						</div>
          </nav>
        </div>

      </div>
      <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
        <nav id="TableOfContents">
          <ul>
            <li><a href="#总览以及局限性">总览以及局限性</a>
              <ul>
                <li><a href="#结构化标记markup">结构化标记（markup）</a></li>
                <li><a href="#交互式组件">交互式组件</a></li>
                <li><a href="#色彩对比度">色彩对比度</a></li>
                <li><a href="#隐藏视觉可见的内容">隐藏视觉可见的内容</a></li>
                <li><a href="#reduced-motion">Reduced motion</a></li>
              </ul>
            </li>
            <li><a href="#参考资料">参考资料</a></li>
          </ul>
        </nav>
      </nav>

      <!DOCTYPE html>
      <html lang="en">

      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>

      <body>
        <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
          <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
            <a class="btn btn-sm btn-bd-light my-2 my-md-0"
              href="https://github.com/twbs/bootstrap/blob/v4.6.2/site/content/docs/getting-started/accessibility.md"
              title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
            <h1 class="bd-title" id="content">无障碍</h1>
          </div>
          <p class="bd-lead">简要概述 Boostrap 在创建无障碍内容方面的功能和限制。</p>


          <p>Bootstrap 是一个易于使用的框架，包含了开箱即用的样式、布局工具和交互式组件，让开发者能够创建有视觉吸引力、功能丰富、无障碍的网站和应用程序。</p>
          <h2 id="总览以及局限性"><span class="bd-content-title">总览以及局限性<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#总览以及局限性" style="padding-left: 0.375em;"></a></span></h2>
          <p>使用 Bootstrap 所构建的任何项目的总体无障碍程度大部分取决于作者所使用的标记（markup）、附加的样式以及脚本。但是，如果这些都得到了正确的实施，则完全可以基于 Bootstrap 创建符合 <a
              href="https://www.w3.org/TR/WCAG/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1</a>
            (A/AA/AAA)、<a href="https://www.section508.gov/">Section 508</a> 以及类似无障碍标准和要求的网站及应用程序。</p>
          <h3 id="结构化标记markup"><span class="bd-content-title">结构化标记（markup）<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#结构化标记markup" style="padding-left: 0.375em;"></a></span></h3>
          <p>Bootstrap 的样式和布局能够适用于广泛的标记（markup）结构。本文档旨在为开发者提供最佳实践示例，以演示 Bootstrap
            的用法并配以示例来说明语义化标记（markup），同时包含了对潜在的无障碍方面的问题的解决方法。</p>
          <h3 id="交互式组件"><span class="bd-content-title">交互式组件<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#交互式组件" style="padding-left: 0.375em;"></a></span></h3>
          <p>Bootstrap 的交互式组件（例如模态对话框、下拉菜单和自定义工具提示）都被设计为支持使用触控、鼠标和键盘的用户。通过使用相关的 <a
              href="https://www.w3.org/WAI/standards-guidelines/aria/"><abbr
                title="Web Accessibility Initiative">WAI</abbr>-<abbr
                title="Accessible Rich Internet Applications">ARIA</abbr></a>
            中定义的角色（roles）和属性（attributes），这些组件还能够被使用辅助技术（例如屏幕阅读器）的用户所立即并操控。</p>
          <p>由于 Bootstrap 的组件被专门设计地相当通用，因此，开发者需要添加额外的 <abbr title="Accessible Rich Internet Applications">ARIA</abbr>
            中定义的角色（roles）和属性（attributes）以及 JavaScript 代码，以便更准确地传达组件的确切性质和功能。这些通常在文档中有标注。</p>
          <h3 id="色彩对比度"><span class="bd-content-title">色彩对比度<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#色彩对比度" style="padding-left: 0.375em;"></a></span></h3>
          <p>Bootstrap 默认调色板中所包含的大部分颜色（被用在整个框架中，例如按钮变体、警告框变体、表单校验指示器等）在浅色背景下使用时，可能会导致颜色对比度的 <em>不足</em> （低于 <a
              href="https://www.w3.org/TR/WCAG/#contrast-minimum">WCAG 2.1 规定的文本颜色对比度为 4.5:1</a> 以及 <a
              href="https://www.w3.org/TR/WCAG/#non-text-contrast">WCAG 2.1 规定的非文本的颜色对比度 3:1</a> 的建议值）。
            我们鼓励开发者针对所使用的颜色进行测试，并在必要的时候手动修改或扩展这些默认的颜色，以确保有足够的色彩对比度。</p>
          <h3 id="隐藏视觉可见的内容"><span class="bd-content-title">隐藏视觉可见的内容<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#隐藏视觉可见的内容" style="padding-left: 0.375em;"></a></span></h3>
          <p>对于在视觉上应该隐藏的、但仍然可以通过类似屏幕阅读器等辅助技术访问的内容，可以使用 <code>.sr-only</code>
            类来设置样式。这在需要向非视觉用户传达额外视觉信息或线索（例如通过颜色来表达的含义）的情况下非常有用。</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-danger"</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"sr-only"</span><span class="p">&gt;</span>Danger: <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  This action is not reversible
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre>
          </div>
          <p>对于需要在视觉上隐藏的交互式组件，例如传统的 “skip” 链接，<code>.sr-only</code> 可以与 <code>.sr-only-focusable</code>
            类一起组合使用。这将确保该组件在获得焦点后（视觉良好但使用键盘的用户）变成可见的。</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <div class="highlight">
            <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#content"</span><span class="p">&gt;</span>Skip to main content<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</span></span></code></pre>
          </div>
          <h3 id="reduced-motion"><span class="bd-content-title">Reduced motion<a class="anchorjs-link "
                aria-label="Anchor" data-anchorjs-icon="#" href="#reduced-motion"
                style="padding-left: 0.375em;"></a></span></h3>
          <p>Bootstrap 包含了对 <a
              href="https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion"><code>prefers-reduced-motion</code>
              媒体功能</a> 的支持。在允许用户设置动画减弱（reduced motion）的浏览器/环境中，Bootstrap 中的大多数 CSS
            过渡效果（例如，当模态对话框打开或关闭时，或者旋转木马（carousels）中的滑动动画）将被禁用，而有意义的动画效果（例如 spinners）将被减速。</p>
          <h2 id="参考资料"><span class="bd-content-title">参考资料<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#参考资料" style="padding-left: 0.375em;"></a></span></h2>
          <ul>
            <li><a href="https://www.w3.org/TR/WCAG/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li>
            <li><a href="https://www.a11yproject.com/">The A11Y Project</a></li>
            <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a>
            </li>
            <li><a href="https://tenon.io/">Tenon.io Accessibility Checker</a></li>
            <li><a href="https://www.tpgi.com/color-contrast-checker/">Color Contrast Analyser (CCA)</a></li>
            <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">“HTML Codesniffer” bookmarklet for identifying
                accessibility issues</a></li>
            <li><a href="https://accessibilityinsights.io/">Microsoft Accessibility Insights</a></li>
            <li><a href="https://www.deque.com/axe/">Deque Axe testing tools</a></li>
          </ul>

        </main>
      </body>

      </html>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"><\/script>')</script>

  <script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
    crossorigin="anonymous"></script>


  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

  <script src="https://getbootstrap.com/docs/4.6/assets/js/docs.min.js"></script>
</body>

</html>