Improve overall new examples' accessibility (#33772)

site/content/docs/5.0/examples/features/index.html

@@ -64,6 +64,8 @@ body_class: ""
     <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
   </symbol>
 </svg>
+<main>
+  <h1 class="visually-hidden">Features examples</h1>
 
   <div class="container px-4 py-5" id="featured-3">
     <h2 class="pb-2 border-bottom">Columns with icons</h2>
@@ -283,3 +285,4 @@ body_class: ""
       </div>
     </div>
   </div>
+</main>

site/content/docs/5.0/examples/headers/index.html

@@ -30,6 +30,9 @@ body_class: ""
   </symbol>
 </svg>
 
+<main>
+  <h1 class="visually-hidden">Headers examples</h1>
+
   <div class="container">
     <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
       <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
@@ -38,7 +41,7 @@ body_class: ""
       </a>
 
       <ul class="nav nav-pills">
-      <li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
         <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
@@ -52,7 +55,7 @@ body_class: ""
   <div class="container">
     <header class="d-flex justify-content-center py-3">
       <ul class="nav nav-pills">
-      <li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
         <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
@@ -66,7 +69,7 @@ body_class: ""
   <div class="container">
     <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
       <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
-      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
       </a>
 
       <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
@@ -90,7 +93,7 @@ body_class: ""
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
         <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
-        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
         </a>
 
         <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
@@ -102,7 +105,7 @@ body_class: ""
         </ul>
 
         <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
-        <input type="search" class="form-control form-control-dark" placeholder="Search...">
+          <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
         </form>
 
         <div class="text-end">
@@ -119,7 +122,7 @@ body_class: ""
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
         <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
-        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
         </a>
 
         <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
@@ -130,7 +133,7 @@ body_class: ""
         </ul>
 
         <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
-        <input type="search" class="form-control" placeholder="Search...">
+          <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 
         <div class="dropdown text-end">
@@ -158,7 +161,7 @@ body_class: ""
           <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
         </a>
         <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink">
-        <li><a class="dropdown-item active" href="#">Overview</a></li>
+          <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
           <li><a class="dropdown-item" href="#">Inventory</a></li>
           <li><a class="dropdown-item" href="#">Customers</a></li>
           <li><a class="dropdown-item" href="#">Products</a></li>
@@ -170,7 +173,7 @@ body_class: ""
 
       <div class="d-flex align-items-center">
         <form class="w-100 me-3">
-        <input type="search" class="form-control" placeholder="Search...">
+          <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 
         <div class="flex-shrink-0 dropdown">
@@ -189,7 +192,7 @@ body_class: ""
     </div>
   </header>
 
-<main class="container-fluid pb-3">
+  <div class="container-fluid pb-3">
     <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
       <div class="bg-light border rounded-3">
         <br><br><br><br><br><br><br><br><br><br>
@@ -198,14 +201,14 @@ body_class: ""
         <br><br><br><br><br><br><br><br><br><br>
       </div>
     </div>
-</main>
+  </div>
 
   <div class="b-example-divider"></div>
 
   <nav class="py-2 bg-light border-bottom">
     <div class="container d-flex flex-wrap">
       <ul class="nav me-auto">
-      <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
         <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
         <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
@@ -224,18 +227,19 @@ body_class: ""
         <span class="fs-4">Double header</span>
       </a>
       <form class="col-12 col-lg-auto mb-3 mb-lg-0">
-      <input type="search" class="form-control" placeholder="Search...">
+        <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
       </form>
     </div>
   </header>
 
   <div class="b-example-divider"></div>
 
-<header class="px-3 py-2 bg-dark text-white">
+  <header>
+    <div class="px-3 py-2 bg-dark text-white">
       <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
           <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
-        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
           </a>
 
           <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
@@ -272,12 +276,11 @@ body_class: ""
           </ul>
         </div>
       </div>
-</header>
+    </div>
-
     <div class="px-3 py-2 border-bottom mb-3">
       <div class="container d-flex flex-wrap justify-content-center">
         <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
-      <input type="search" class="form-control" placeholder="Search...">
+          <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 
         <div class="text-end">
@@ -286,5 +289,7 @@ body_class: ""
         </div>
       </div>
     </div>
+  </header>
 
   <div class="b-example-divider"></div>
+</main>

site/content/docs/5.0/examples/heroes/index.html

@@ -6,6 +6,9 @@ extra_css:
 body_class: ""
 ---
 
+<main>
+  <h1 class="visually-hidden">Heroes examples</h1>
+
   <div class="px-4 py-5 my-5 text-center">
     <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
     <h1 class="display-5 fw-bold">Centered hero</h1>
@@ -121,3 +124,4 @@ body_class: ""
   </div>
 
   <div class="b-example-divider mb-0"></div>
+</main>

site/content/docs/5.0/examples/pricing/index.html

@@ -14,7 +14,8 @@ include_js: false
 </svg>
 
 <div class="container py-3">
-  <header class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
+  <header>
+    <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
       <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
         <span class="fs-4">Pricing example</span>
@@ -26,12 +27,13 @@ include_js: false
         <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
         <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
       </nav>
-  </header>
+    </div>
 
     <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
       <h1 class="display-4 fw-normal">Pricing</h1>
       <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
     </div>
+  </header>
 
   <main>
     <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">

site/content/docs/5.0/examples/sidebars/index.html

@@ -67,6 +67,9 @@ body_class: ""
   </symbol>
 </svg>
 
+<main>
+  <h1 class="visually-hidden">Sidebars examples</h1>
+
   <div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
       <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
@@ -75,7 +78,7 @@ body_class: ""
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
       <li class="nav-item">
-      <a href="#" class="nav-link active">
+        <a href="#" class="nav-link active" aria-current="page">
           <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
           Home
         </a>
@@ -108,7 +111,7 @@ body_class: ""
     <hr>
     <div class="dropdown">
       <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
-      <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
+        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
       <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
@@ -131,7 +134,7 @@ body_class: ""
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
       <li class="nav-item">
-      <a href="#" class="nav-link active">
+        <a href="#" class="nav-link active" aria-current="page">
           <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
           Home
         </a>
@@ -164,7 +167,7 @@ body_class: ""
     <hr>
     <div class="dropdown">
       <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
-      <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
+        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
       <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
@@ -186,8 +189,8 @@ body_class: ""
     </a>
     <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
       <li class="nav-item">
-      <a href="#" class="nav-link active py-3 border-bottom" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
-        <svg class="bi" width="24" height="24"><use xlink:href="#home"/></svg>
+          <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
         </a>
       </li>
       <li>
@@ -385,3 +388,4 @@ body_class: ""
   </div>
 
   <div class="b-example-divider"></div>
+</main>

site/content/docs/5.0/examples/sidebars/sidebars.css

@@ -1,4 +1,4 @@
-body {
+main {
   display: flex;
   flex-wrap: nowrap;
   height: 100vh;
@@ -6,7 +6,7 @@ body {
   overflow-x: auto;
   overflow-y: hidden;
 }
-body > * {
+main > * {
   flex-shrink: 0;
   min-height: -webkit-fill-available;
 }

site/content/docs/5.0/examples/starter-template/index.html

@@ -13,6 +13,7 @@ extra_css:
     </a>
   </header>
 
+  <main>
     <h1>Get started with Bootstrap</h1>
     <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
 
@@ -43,7 +44,7 @@ extra_css:
         </ul>
       </div>
     </div>
-
+  </main>
   <footer class="pt-5 my-5 text-muted border-top">
     Created by the Bootstrap team &middot; &copy; {{< year >}}
   </footer>