add type of callout as a bold string before the text

rianrietveld · rianrietveld · commit aa9129a08b4c · 2025-12-09T08:18:35.000+01:00
And fix some missing classes and double spaces.
diff --git a/docs/testing/automated/index.md b/docs/testing/automated/index.md
@@ -34,7 +34,7 @@ The big difference between PHP and JavaScript code standard checks and accessibi
 There are several command line tools for automated testing like [aXe-cli](https://github.com/dequelabs/axe-cli) and [pa11y](https://github.com/pa11y/pa11y).
 
 {: .callout  .info }
-Automated accessibility testing doesn’t catch all the issues, rarely more than 30%. Testing in the browser and manual keyboard testing still needs to be part of your workflow.
+**Info:** Automated accessibility testing doesn’t catch all the issues, rarely more than 30%. Testing in the browser and manual keyboard testing still needs to be part of your workflow.
 
 ### Setup for aXe-cli
 
diff --git a/docs/testing/design/index.md b/docs/testing/design/index.md
@@ -23,7 +23,7 @@ Check the color contrast ratio between text and its background. The rules in WCA
 There are many tools to calculate this easily, see [Color contrast checkers](http://www.webaxe.org/color-contrast-tools/).
 
 {: .callout  .tip }
-Logos and logotype are frequently exceptions to accessibility guidelines, including color contrast rules. If you’re designing a new logo, however, it might be a good idea to consider them, anyway.
+**Tip:** Logos and logotype are frequently exceptions to accessibility guidelines, including color contrast rules. If you’re designing a new logo, however, it might be a good idea to consider them, anyway.
 
 ## Color Contrast
 
diff --git a/docs/testing/plugins/index.md b/docs/testing/plugins/index.md
@@ -23,4 +23,4 @@ We do not specifically endorse any of the plugins listed here but offer them as
 - [Sa11y](https://wordpress.org/plugins/sa11y/) – Accessibility checking tool geared towards content authors.
 
 {: .callout  .warning }
-Note that while many plugins in the WordPress plugin repository are overlays or widgets, none of those are listed here. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/).
+**Warning:** Note that while many plugins in the WordPress plugin repository are overlays or widgets, none of those are listed here. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/).
diff --git a/docs/topics/code/accessible-name/index.md b/docs/topics/code/accessible-name/index.md
@@ -21,7 +21,7 @@ A proper accessible name for HTML elements is essential for screen reader users
 Abdulqudus Abubakre gives an excellent, detailed writeup of the accessible name [Understanding Accessible Names in HTML](https://dev.to/ibn_abubakre/understanding-accessible-names-in-html-562).
 
 {: .callout .info }
-Note: An `aria-label` attribute on a link or a button overrides all textual content within.   
+**Please note:** An `aria-label` attribute on a link or a button overrides all textual content within.   
 For example, the accessible name of the button `<button aria-label="Close">Open</button>` is "Close".
 
 ## The accessibility tree shows the accessible name
@@ -60,7 +60,7 @@ The accessibility tree of Chrome shows the following relevant information: the a
 - Expanded: false
 
 {: .callout .info }
-In this example the accessible name is taken from "Contents". The other options are not specified. An accessible name can be overwritten. Here the different steps for defining an accessible name are shown and sorted in order of the computation. A value for the `aria-label` will overwrite the Contents value.
+**Info:** In this example the accessible name is taken from "Contents". The other options are not specified. An accessible name can be overwritten. Here the different steps for defining an accessible name are shown and sorted in order of the computation. A value for the `aria-label` will overwrite the Contents value.
 
 ![Screenshot accessible name menu in Chrome]({{site.baseurl}}/assets/images/accessible-name-button.png)
 
diff --git a/docs/topics/code/components/dialog.md b/docs/topics/code/components/dialog.md
@@ -8,7 +8,7 @@ nav_order: 5
 # The dialog modal
 
 {: .callout .alert }
-This content will be reviewed, modernized and restructured.  
+**Alert:** This content will be reviewed, modernized and restructured.  
 Related issue on [GitHub #152 Topic The dialog modal](https://github.com/wpaccessibility/wp-a11y-docs/issues/152).  
 
 A dialog is a window that separates content from the main content of a page. It can ask questions or require user input. When the dialog is active and opened, only the content inside the dialog should be available for interaction. Visually it’s usually overlaid on top of main content.
diff --git a/docs/topics/code/components/excerpt.md b/docs/topics/code/components/excerpt.md
@@ -8,7 +8,7 @@ nav_order: 3
 # Post Excerpts
 
 {: .callout .alert }
-This content will be reviewed, modernized and restructured.  
+**Alert:** This content will be reviewed, modernized and restructured.  
 Related issue on [GitHub #151 Topic Post Excerpts](https://github.com/wpaccessibility/wp-a11y-docs/issues/151).  
 
 ## Excerpt block
diff --git a/docs/topics/code/components/link-logo.md b/docs/topics/code/components/link-logo.md
@@ -8,5 +8,5 @@ nav_order: 4
 # Link on a logo in the header
 
 {: .callout .alert }
-This content will be written.  
+**Alert:** This content will be written.  
 Related issue on [GitHub #150 Topic Link on a logo in the header](https://github.com/wpaccessibility/wp-a11y-docs/issues/150).  
diff --git a/docs/topics/code/components/pagination.md b/docs/topics/code/components/pagination.md
@@ -8,5 +8,5 @@ nav_order: 6
 # Pagination
 
 {: .callout .alert }
-This content will be written.
+**Alert:** This content will be written.
 Related issue on [GitHub #153 Topic Pagination](https://github.com/wpaccessibility/wp-a11y-docs/issues/153).  
diff --git a/docs/topics/code/components/skip-links.md b/docs/topics/code/components/skip-links.md
@@ -8,7 +8,7 @@ nav_order: 2
 # Skip links
 
 {: .callout .alert }
-This content will be reviewed and restructured.  
+**Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #149 Topic Skip links](https://github.com/wpaccessibility/wp-a11y-docs/issues/149).  
 
 Navigation links, search forms, social media links, or other elements commonly appear on the page before the main content. When navigating using the keyboard, it can be frustrating to get to the main content of a page because of these elements if you need to tab through everything on each page. A skip link provides users (particularly keyboard users) with a means to skip all these elements and jump to the content.
diff --git a/docs/topics/code/dynamic-changes/index.md b/docs/topics/code/dynamic-changes/index.md
@@ -8,7 +8,7 @@ nav_order: 7
 # Feedback on dynamic changes
 
 {: .callout .alert }
-This content will be reviewed and restructured. And probably divided into separate topics for more use cases.
+**Alert:** This content will be reviewed and restructured. And probably divided into separate topics for more use cases.
 Related issue on [GitHub #166 Topic Feedback on dynamic changes](https://github.com/wpaccessibility/wp-a11y-docs/issues/166).  
 
 ## Using ARIA Live in WordPress
diff --git a/docs/topics/code/heading-structure/index.md b/docs/topics/code/heading-structure/index.md
@@ -8,7 +8,7 @@ nav_order: 3
 # Heading structure in theme development
 
 {: .callout .alert }
-This content will be reviewed and restructured.  
+**Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #142 Topic Heading structure in theme development](https://github.com/wpaccessibility/wp-a11y-docs/issues/142).  
 
 
diff --git a/docs/topics/code/images-animations/images.md b/docs/topics/code/images-animations/images.md
@@ -8,7 +8,7 @@ nav_order: 2
 # Images in theme development
 
 {: .callout .alert }
-This content will be reviewed and restructured.  
+**Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #147 Topic Images in theme development](https://github.com/wpaccessibility/wp-a11y-docs/issues/147).  
 
 You may think that you’re not including any images in your project. Possibly this is true; but are you using [dashicons](https://developer.wordpress.org/resource/dashicons/) or other icon fonts? Are you using SVG graphics?
diff --git a/docs/topics/code/images-animations/reduced-motion.md b/docs/topics/code/images-animations/reduced-motion.md
@@ -8,7 +8,7 @@ nav_order: 3
 # Setting reduced motion for animations
 
 {: .callout .alert }
-This content will be reviewed and restructured.  
+**Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #148 Topic Setting reduced motion for animations](https://github.com/wpaccessibility/wp-a11y-docs/issues/148).  
 
 Animations can cause a variety of symptoms in many users, ranging from mild dizziness to triggering migraines and nausea. You can help users avoid these problems by making all of your animations support the `prefers-reduced-motion` flag.
diff --git a/docs/topics/code/landmarks/index.md b/docs/topics/code/landmarks/index.md
@@ -7,7 +7,7 @@ nav_order: 4
 
 # ARIA Landmarks
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #143 Topic ARIA Landmarks](https://github.com/wpaccessibility/wp-a11y-docs/issues/143).  
 
diff --git a/docs/topics/code/screen-reader-text/index.md b/docs/topics/code/screen-reader-text/index.md
@@ -8,7 +8,7 @@ nav_order: 6
 # The CSS class screen-reader-text
 
 {: .callout .alert }
-This content will be reviewed and restructured.  
+**Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #145 Topic The CSS class screen-reader-text](https://github.com/wpaccessibility/wp-a11y-docs/issues/145).  
 
 # The CSS class screen-reader-text
diff --git a/docs/topics/code/semantics/index.md b/docs/topics/code/semantics/index.md
@@ -8,7 +8,7 @@ nav_order: 2
 # Semantic HTML
 
 {: .callout .alert }
-This content will be reviewed and restructured.  
+**Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #141 Topic Semantic HTML](https://github.com/wpaccessibility/wp-a11y-docs/issues/141).  
 
 Accessibility isn’t dark magic. Most of it comes down to using semantic HTML. Semantic HTML is about choosing the element that best presents the purpose of the content. Examples include using a `button` for an action, an `a` element for a link, and an `h1` heading for the main page content.
diff --git a/docs/topics/code/tables/index.md b/docs/topics/code/tables/index.md
@@ -7,7 +7,7 @@ nav_order: 5
 
 # Tables in theme and plugin development
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #144 Topic Tables in theme and plugin development](https://github.com/wpaccessibility/wp-a11y-docs/issues/144).  
 
diff --git a/docs/topics/content/alt-text.md b/docs/topics/content/alt-text.md
@@ -7,12 +7,12 @@ nav_order: 2
 
 # Alternative text for images
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be reviewed and expanded and maybe divided into separate topic pages.  
 Related issue on [GitHub #105 Topic Alt text for images](https://github.com/wpaccessibility/wp-a11y-docs/issues/105).  
 
 
-{: .callout  .info }
+{: .callout .info }
 **Note**: The alt attribute (“alt text”) is used to provide an alternative to the image for users who can’t see it.
 
 ## Best practice
diff --git a/docs/topics/content/docs.md b/docs/topics/content/docs.md
@@ -7,7 +7,7 @@ nav_order: 7
 
 # Digital documents
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be reviewed, restructured and expanded.  
 Related issue on [GitHub #119 Topic Digital document](https://github.com/wpaccessibility/wp-a11y-docs/issues/119).  
 
@@ -32,8 +32,8 @@ The Paciello Group has a good [overview of PDF inaccessibility](https://develope
 
 The list of software which are able to export a PDF is quite long. In the export settings of your software, you should watch for an option which is called Tagged PDF or similar.
 
-{: .callout  .warning }
-**Note**: Google Docs doesn’t yet support the export of a tagged and accessible PDF yet without any help of a plugin.
+{: .callout .warning }
+**Warning**: Google Docs doesn’t yet support the export of a tagged and accessible PDF yet without any help of a plugin.
 
 ### Resources
 
diff --git a/docs/topics/content/headings.md b/docs/topics/content/headings.md
@@ -7,7 +7,7 @@ nav_order: 3
 
 # Headings in the content
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be reviewed and restructured.  
 Related issue on [GitHub #106 Headings in the content](https://github.com/wpaccessibility/wp-a11y-docs/issues/106).  
 
diff --git a/docs/topics/content/readability.md b/docs/topics/content/readability.md
@@ -7,7 +7,7 @@ nav_order: 6
 
 # Readability
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be reviewed, restructured and expanded.  
 Related issue on [GitHub #120 Topic Readability](https://github.com/wpaccessibility/wp-a11y-docs/issues/120).  
 
diff --git a/docs/topics/content/tables.md b/docs/topics/content/tables.md
@@ -7,7 +7,7 @@ nav_order: 5
 
 # Tables in the content
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be written.  
 Related issue on [GitHub #121 Topic Tables in the content](https://github.com/wpaccessibility/wp-a11y-docs/issues/121).  
 
diff --git a/docs/topics/core/index.md b/docs/topics/core/index.md
@@ -7,13 +7,12 @@ nav_order: 7
 
 # WordPress Core Accessibility Standards
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be reviewed and restructured. 
 Related issue on [GitHub #122 Topic WordPress Core Accessibility Standards](https://github.com/wpaccessibility/wp-a11y-docs/issues/122).  
 
-{: .callout  .warning }
-**TODO:**
-This is duplicate content? see also [Accessibility Coding Standards ](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/)in the coding standards handbook WCAG 2.0 must be WCAG 2.2?
+{: .callout .warning }
+**Warning:** This is duplicate content? see also [Accessibility Coding Standards ](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/)in the coding standards handbook WCAG 2.0 must be WCAG 2.2?
 The content should be reviewed for modern code and the links adjusted and divided between the topics.
 
 When creating new interfaces in core, the output and interactions are expected to conform to WCAG 2.0 at level AA. But beyond that, there are some specific patterns that the accessibility team and core team have agreed on as the preferred method for structure.
@@ -22,7 +21,6 @@ Though there are many patterns that meet accessibility standards, being consiste
 
 This document is supplemental guidance to help developers meet the [WordPress Accessibility Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/).
 
-
 **TODO:** should this stay or should it go?
 
 ## HTML Semantics
diff --git a/docs/topics/forms/descriptions/connect-description.md b/docs/topics/forms/descriptions/connect-description.md
@@ -30,7 +30,7 @@ The HTML basics:
 ```
 
 {: .callout .alert }
-IDs used must be unique on each page; otherwise, the wrong description may be announced with a form field.
+**Alert:** IDs used must be unique on each page; otherwise, the wrong description may be announced with a form field.
 
 It's possible to add multiple descriptions to one form field. You can combine the text of the description and an error message by separating the IDs with a space. The order of the IDs given in the `aria-describedby` attribute is the order in which they are announced.
 
diff --git a/docs/topics/forms/feedback.md b/docs/topics/forms/feedback.md
@@ -7,7 +7,7 @@ nav_order: 9
 
 # Feedback on form errors
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be rewritten and expanded.  
 Related issue on [GitHub #161 Feedback on form errors](https://github.com/wpaccessibility/wp-a11y-docs/issues/161).
 
diff --git a/docs/topics/forms/fieldsets/fieldset-descriptions.md b/docs/topics/forms/fieldsets/fieldset-descriptions.md
@@ -44,7 +44,7 @@ In HTML, simplified
 ## Examples
 
 {: .callout .do }
-Connect a description to the form field, using aria-describedby.
+**Do:** Connect a description to the form field, using aria-describedby.
 
 ```html
 <label for="new-password">New password</label>
diff --git a/docs/topics/forms/fieldsets/legend.md b/docs/topics/forms/fieldsets/legend.md
@@ -22,8 +22,8 @@ A [legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/
 </fieldset>
 ```
 
-{: info }
-Screen readers read the information in variable ways; most announce the legend text when you reach the first field in a fieldset. The legend should be short and descriptive because some screen readers will announce it on every form field within the group.
+{: .callout .info }
+**Info:** Screen readers read the information in variable ways; most announce the legend text when you reach the first field in a fieldset. The legend should be short and descriptive because some screen readers will announce it on every form field within the group.
 
 ## Heading in a legend
 
@@ -52,7 +52,7 @@ A legend can contain a heading. Make sure that the heading level fits correctly
 ```
 
 {: .callout .alert }
-The reverse is not true: a heading may not contain a `legend`, because the `legend` needs to be an immediate child of the `fieldset`.
+**Alert:** The reverse is not true: a heading may not contain a `legend`, because the `legend` needs to be an immediate child of the `fieldset`.
 
 ```html
 <!-- this is invalid code, do not use -->
diff --git a/docs/topics/forms/focus.md b/docs/topics/forms/focus.md
@@ -7,7 +7,7 @@ nav_order: 6
 
 # Form focus handling
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be rewritten and expanded.  
 Related issue on [GitHub #158 Topic Form focus handling](https://github.com/wpaccessibility/wp-a11y-docs/issues/158).
 
diff --git a/docs/topics/forms/help.md b/docs/topics/forms/help.md
@@ -7,7 +7,7 @@ nav_order: 7
 
 # Provide help filling out a form
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be rewritten and expanded.  
 Related issue on [GitHub #159 Topic Provide help filling out a form](https://github.com/wpaccessibility/wp-a11y-docs/issues/159).
 
diff --git a/docs/topics/forms/input-label/label-location.md b/docs/topics/forms/input-label/label-location.md
@@ -7,8 +7,8 @@ nav_order: 7
 
 # Place the label above the form field
 
-{: .info }
-Note: this is best practice and not a WCAG requirement. 
+{: .callout .info }
+**Info:** This is best practice and not a WCAG requirement. 
 
 Place the label above the form field, like a text input, textarea or select. Not next to it, below it, or inside the form field, but on the line above the form field. Do this consistently for all form fields. 
 
diff --git a/docs/topics/forms/required/mark-optional-fields.md b/docs/topics/forms/required/mark-optional-fields.md
@@ -27,8 +27,8 @@ Assuming that you only request essential information in forms, most fields will
 
 ## Indication of optional fields in WordPress form plugins
 
-{: .info }
-We want to invite people familiar with form plugins to help us add instructions for WordPress form plugins, including options, settings, and screenshots.
+{: .callout .info }
+**Help wanted:** We want to invite people familiar with form plugins to help us add instructions for WordPress form plugins, including options, settings, and screenshots.
 Please [contact us]({{site.baseurl}}/docs/contact/) if you want to help us with this additional content.
 
 ## Related WCAG Success Criteria
diff --git a/docs/topics/forms/required/mark-required-fields.md b/docs/topics/forms/required/mark-required-fields.md
@@ -37,8 +37,8 @@ Gravity Forms adds the possibility to select "Required" with each form field. In
 
 ### Other WordPress form plugins
 
-{: .info }
-We want to invite people familiar with form plugins to help us add instructions for WordPress form plugins, including options, settings, and screenshots.
+{: .callout .info }
+**Help wanted:** We want to invite people familiar with form plugins to help us add instructions for WordPress form plugins, including options, settings, and screenshots.
 Please [contact us]({{site.baseurl}}/docs/contact/) if you want to help us with this additional content.
 
 ## Related WCAG Success Criteria
diff --git a/docs/topics/forms/required/required-screen-readers.md b/docs/topics/forms/required/required-screen-readers.md
@@ -51,8 +51,8 @@ If you decide to use `required`, also use `novalidate` on the form element to pr
 <form action="some-url" novalidate>
 ```
 
-{: .info }
-Note: the use of `aria-invalid` will be addressed later in the section Feedback on form errors.
+{: .callout .info }
+**Note:** The use of `aria-invalid` will be addressed later in the section Feedback on form errors.
 
 ## Using aria-required or required in WordPress plugins
 
@@ -62,8 +62,8 @@ Gravity Forms adds `aria-required="true"` to required fields.
 
 ### Other WordPress form plugins
 
-{: .info }
-We'd like to invite people familiar with form plugins to help us add instructions for WordPress form plugins. Like possibilities, settings and screenshots.
+{: .callout .info }
+**Help wanted:** We'd like to invite people familiar with form plugins to help us add instructions for WordPress form plugins. Like possibilities, settings and screenshots.
 Please [contact us]({{site.baseurl}}/docs/contact/) if you want to help us with this additional content.
 
 ## WCAG Success Criteria
diff --git a/docs/topics/forms/wp-form-plugins.md b/docs/topics/forms/wp-form-plugins.md
@@ -7,7 +7,7 @@ nav_order: 10
 
 # WordPress form plugins and accessibility
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be rewritten and expanded.  
 Related issue on [GitHub #162 Topic WordPress form plugins and accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/162).  
 If you want to add a plugin to this page, please comment with the GitHub issue.
diff --git a/docs/topics/plugins/index.md b/docs/topics/plugins/index.md
@@ -7,7 +7,7 @@ nav_order: 9
 
 # WordPress plugins and accessibility
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** The accessibility content should be moved to the related topics, this page should only contain practical info. Which info that will be is open for discussion.  
 Related issue on [GitHub #165 Topic WordPress plugins and accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/165).  
 
diff --git a/docs/topics/themes/index.md b/docs/topics/themes/index.md
@@ -7,7 +7,7 @@ nav_order: 8
 
 # WordPress themes and accessibility
 
-{: .callout  .alert }
+{: .callout .alert }
 **Alert:** This content will be updated later.  
 Related issue on [GitHub #164 Topic WordPress themes and accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/164).  
 
diff --git a/docs/topics/wcag/index.md b/docs/topics/wcag/index.md
