Skip to content

Commit 7bbf6d9

Browse files
ffooddffoodd
authored
Improve overall new examples' accessibility (#33772)
1 parent 3bcb9e7 commit 7bbf6d9

File tree

7 files changed

+840
-821
lines changed

7 files changed

+840
-821
lines changed

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

Lines changed: 181 additions & 178 deletions
Large diffs are not rendered by default.

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

Lines changed: 220 additions & 215 deletions
Large diffs are not rendered by default.

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

Lines changed: 91 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -6,118 +6,122 @@
66
body_class: ""
77
---
88

9-
<div class="px-4 py-5 my-5 text-center">
10-
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
11-
<h1 class="display-5 fw-bold">Centered hero</h1>
12-
<div class="col-lg-6 mx-auto">
13-
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
14-
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
15-
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
16-
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
9+
<main>
10+
<h1 class="visually-hidden">Heroes examples</h1>
11+
12+
<div class="px-4 py-5 my-5 text-center">
13+
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
14+
<h1 class="display-5 fw-bold">Centered hero</h1>
15+
<div class="col-lg-6 mx-auto">
16+
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
17+
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
18+
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
19+
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
20+
</div>
1721
</div>
1822
</div>
19-
</div>
2023

21-
<div class="b-example-divider"></div>
24+
<div class="b-example-divider"></div>
2225

23-
<div class="px-4 pt-5 my-5 text-center border-bottom">
24-
<h1 class="display-4 fw-bold">Centered screenshot</h1>
25-
<div class="col-lg-6 mx-auto">
26-
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
27-
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
28-
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
29-
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
26+
<div class="px-4 pt-5 my-5 text-center border-bottom">
27+
<h1 class="display-4 fw-bold">Centered screenshot</h1>
28+
<div class="col-lg-6 mx-auto">
29+
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
30+
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
31+
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
32+
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
33+
</div>
3034
</div>
31-
</div>
32-
<div class="overflow-hidden" style="max-height: 30vh;">
33-
<div class="container px-5">
34-
<img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
35+
<div class="overflow-hidden" style="max-height: 30vh;">
36+
<div class="container px-5">
37+
<img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
38+
</div>
3539
</div>
3640
</div>
37-
</div>
3841

39-
<div class="b-example-divider"></div>
42+
<div class="b-example-divider"></div>
4043

41-
<div class="container col-xxl-8 px-4 py-5">
42-
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
43-
<div class="col-10 col-sm-8 col-lg-6">
44-
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
45-
</div>
46-
<div class="col-lg-6">
47-
<h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
48-
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
49-
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
50-
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
51-
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
44+
<div class="container col-xxl-8 px-4 py-5">
45+
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
46+
<div class="col-10 col-sm-8 col-lg-6">
47+
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
48+
</div>
49+
<div class="col-lg-6">
50+
<h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
51+
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
52+
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
53+
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
54+
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
55+
</div>
5256
</div>
5357
</div>
5458
</div>
55-
</div>
5659

57-
<div class="b-example-divider"></div>
60+
<div class="b-example-divider"></div>
5861

59-
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
60-
<div class="row align-items-center g-lg-5 py-5">
61-
<div class="col-lg-7 text-center text-lg-start">
62-
<h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
63-
<p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
64-
</div>
65-
<div class="col-md-10 mx-auto col-lg-5">
66-
<form class="p-4 p-md-5 border rounded-3 bg-light">
67-
<div class="form-floating mb-3">
68-
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
69-
<label for="floatingInput">Email address</label>
70-
</div>
71-
<div class="form-floating mb-3">
72-
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
73-
<label for="floatingPassword">Password</label>
74-
</div>
75-
<div class="checkbox mb-3">
76-
<label>
77-
<input type="checkbox" value="remember-me"> Remember me
78-
</label>
79-
</div>
80-
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
81-
<hr class="my-4">
82-
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
83-
</form>
62+
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
63+
<div class="row align-items-center g-lg-5 py-5">
64+
<div class="col-lg-7 text-center text-lg-start">
65+
<h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
66+
<p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
67+
</div>
68+
<div class="col-md-10 mx-auto col-lg-5">
69+
<form class="p-4 p-md-5 border rounded-3 bg-light">
70+
<div class="form-floating mb-3">
71+
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
72+
<label for="floatingInput">Email address</label>
73+
</div>
74+
<div class="form-floating mb-3">
75+
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
76+
<label for="floatingPassword">Password</label>
77+
</div>
78+
<div class="checkbox mb-3">
79+
<label>
80+
<input type="checkbox" value="remember-me"> Remember me
81+
</label>
82+
</div>
83+
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
84+
<hr class="my-4">
85+
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
86+
</form>
87+
</div>
8488
</div>
8589
</div>
86-
</div>
8790

88-
<div class="b-example-divider"></div>
91+
<div class="b-example-divider"></div>
8992

90-
<div class="container my-5">
91-
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
92-
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
93-
<h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
94-
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
95-
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
96-
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
97-
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
93+
<div class="container my-5">
94+
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
95+
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
96+
<h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
97+
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
98+
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
99+
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
100+
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
101+
</div>
98102
</div>
99-
</div>
100-
<div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg">
101-
<div class="position-lg-absolute top-0 left-0 overflow-hidden">
102-
<img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720">
103+
<div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg">
104+
<div class="position-lg-absolute top-0 left-0 overflow-hidden">
105+
<img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720">
106+
</div>
103107
</div>
104108
</div>
105109
</div>
106-
</div>
107110

108-
<div class="b-example-divider"></div>
111+
<div class="b-example-divider"></div>
109112

110-
<div class="bg-dark text-secondary px-4 py-5 text-center">
111-
<div class="py-5">
112-
<h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
113-
<div class="col-lg-6 mx-auto">
114-
<p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
115-
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
116-
<button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
117-
<button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
113+
<div class="bg-dark text-secondary px-4 py-5 text-center">
114+
<div class="py-5">
115+
<h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
116+
<div class="col-lg-6 mx-auto">
117+
<p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
118+
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
119+
<button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
120+
<button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
121+
</div>
118122
</div>
119123
</div>
120124
</div>
121-
</div>
122125

123-
<div class="b-example-divider mb-0"></div>
126+
<div class="b-example-divider mb-0"></div>
127+
</main>

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

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,26 @@
1414
</svg>
1515

1616
<div class="container py-3">
17-
<header class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
18-
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
19-
<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>
20-
<span class="fs-4">Pricing example</span>
21-
</a>
17+
<header>
18+
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
19+
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
20+
<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>
21+
<span class="fs-4">Pricing example</span>
22+
</a>
2223

23-
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
24-
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
25-
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
26-
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
27-
<a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
28-
</nav>
29-
</header>
24+
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
25+
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
26+
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
27+
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
28+
<a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
29+
</nav>
30+
</div>
3031

31-
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
32-
<h1 class="display-4 fw-normal">Pricing</h1>
33-
<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>
34-
</div>
32+
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
33+
<h1 class="display-4 fw-normal">Pricing</h1>
34+
<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>
35+
</div>
36+
</header>
3537

3638
<main>
3739
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">

0 commit comments

Comments
 (0)