Docs: give unlabelled checkbox, radio and switch examples an aria-label="..." and explain how to fill it (#43079)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: julien-deramond

site/src/content/docs/content/images.mdx

@@ -52,6 +52,8 @@ And with a reverse alignment:
 
 If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
 
+Give the `<img>` an `alt` text that describes the image, or an empty `alt=""` when it’s only decorative. The `alt="..."` in the example below is a placeholder for that text.
+
 ```html
 <picture>
   <source srcset="..." type="image/svg+xml">

site/src/content/docs/forms/checkbox.mdx

@@ -17,15 +17,15 @@ All checkbox styling is applied with the `.check` class directly on the `<input>
 
 For folks looking to replace our provided icons, override the `--bs-check-icon-checked` and `--bs-check-icon-indeterminate` CSS variables (or the `--check-icon-*` Sass tokens) with your own `mask-image` URLs.
 
-Labels and layout are handled with additional HTML and CSS.
+Labels and layout are handled with additional HTML and CSS. A checkbox without a visible label still needs an accessible name for assistive technologies, for instance with `aria-label`. The name should say what the checkbox does, like `aria-label="Select all rows"`, and replaces the `...` placeholder in the examples below. See the [forms overview accessibility]([[docsref:/forms/overview/#accessibility]]) section for details.
 
-<Example code={`<input type="checkbox" id="check" class="check" checked />`} />
+<Example code={`<input type="checkbox" id="check" class="check" checked aria-label="..." />`} />
 
 ## Indeterminate
 
 Checkboxes can utilize the indeterminate pseudo class when manually set via JavaScript. There is no available HTML attribute for specifying it.
 
-<Example addStackblitzJs class="bd-example-indeterminate" code={`<input type="checkbox" id="checkIndeterminate" class="check" />`} />
+<Example addStackblitzJs class="bd-example-indeterminate" code={`<input type="checkbox" id="checkIndeterminate" class="check" aria-label="..." />`} />
 
 ## With form field
 

site/src/content/docs/forms/radio.mdx

@@ -12,7 +12,9 @@ import { getData } from '@libs/data'
 
 Similar to checkboxes, radios are styled with the `.radio` class. However, there’s no custom SVG as we use pure CSS to style the input and its checked state.
 
-<Example code={`<input type="radio" id="radio" class="radio" />`} />
+A radio without a visible label still needs an accessible name for assistive technologies, for instance with `aria-label`. The name should say what the option is, like `aria-label="Red"` in a color picker, and replaces the `...` placeholder in the example below. See the [forms overview accessibility]([[docsref:/forms/overview/#accessibility]]) section for details.
+
+<Example code={`<input type="radio" id="radio" class="radio" aria-label="..." />`} />
 
 ## With form field
 

site/src/content/docs/forms/switch.mdx

@@ -11,8 +11,10 @@ import { getData } from '@libs/data'
 
 Switches work by layering an invisible checkbox over the custom switch indicator. This preserves interactivity while giving you a completely customizable layer underneath. Switches also include the `switch` attribute for browsers that support it, which provides haptic feedback when toggling.
 
+A switch without a visible label still needs an accessible name for assistive technologies, for instance with `aria-label`. The name should say what the switch turns on or off, like `aria-label="Email notifications"`, and replaces the `...` placeholder in the example below. See the [forms overview accessibility]([[docsref:/forms/overview/#accessibility]]) section for details.
+
 <Example code={`<div class="switch">
-    <input type="checkbox" value="" id="switch" role="switch" switch>
+    <input type="checkbox" value="" id="switch" role="switch" switch aria-label="...">
   </div>`} />
 
 ## With form field