From 7e9a8d1940ded1245ad0a68207dfdf5f9fa678d8 Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Tue, 9 Dec 2025 07:52:59 +0100 Subject: [PATCH 1/4] remove CSS content & add color to the fist strong --- _sass/components/_callouts.scss | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/_sass/components/_callouts.scss b/_sass/components/_callouts.scss index 66c5fccf6..eeecf2149 100644 --- a/_sass/components/_callouts.scss +++ b/_sass/components/_callouts.scss @@ -19,9 +19,8 @@ p.example { background: var(--color-informative-bg-document); border-left-color: var(--color-informative-border-default); - &::before { - color: var(--color-informative-color-document); - content: "Example"; + > strong { + color: var(--color-informative-color-s); } } @@ -29,9 +28,8 @@ p.alert { background: var(--color-warning-bg-document); border-left-color: var(--color-warning-border-default); - &::before { - color: var(--color-warning-color-document); - content: "Alert"; + > strong { + color: var(--color-warning-color-subtle); } } @@ -39,9 +37,8 @@ p.tip { background: var(--color-positive-bg-document); border-left-color: var(--color-positive-border-default); - &::before { - color: var(--color-positive-color-document); - content: "Tip"; + > strong { + color: var(--color-positive-color-subtle); } } @@ -49,9 +46,8 @@ p.info { background: var(--color-informative-bg-default); border-left-color: var(--color-informative-border-default); - &::before { - color: var(--color-informative-color-document); - content: "Info"; + > strong { + color: var(--color-informative-color-subtle); } } @@ -59,9 +55,8 @@ p.warning { background: var(--color-negative-bg-default); border-left-color: var(--color-negative-border-default); - &::before { + > strong { color: var(--color-negative-color-subtle); - content: "Warning"; } } @@ -70,9 +65,8 @@ p.dont { border: 2px solid var(--color-negative-border-default); border-radius: $border-radius; - &::before { + > strong { color: var(--color-negative-color-subtle); - content: "Don't"; } } @@ -81,7 +75,7 @@ p.do { border: 2px solid var(--color-positive-border-default); border-radius: $border-radius; - &::before { - content: "Do"; + > strong { + color: var(--color-positive-color-subtle); } } From 3b6ea7452a776b5d80dabb6a0404e797d80c5a5e Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Tue, 9 Dec 2025 07:53:38 +0100 Subject: [PATCH 2/4] typo --- docs/contribute/github/content-kitchen-sink.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contribute/github/content-kitchen-sink.md b/docs/contribute/github/content-kitchen-sink.md index a42a5a01d..d578ccc05 100644 --- a/docs/contribute/github/content-kitchen-sink.md +++ b/docs/contribute/github/content-kitchen-sink.md @@ -35,7 +35,7 @@ In blog posts the H1 is added by the template: [Add a blog post]({{site.baseurl} ## Summary in a larger text font. -Start the paragraph with an H2 named "Summaty, or introduction and the callout {: .lead }` +Start the paragraph with an H2 named "Summary, or introduction and the callout {: .lead }` ```markdown From e5876f753c17f86bc73994381356874a72fd9c22 Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Tue, 9 Dec 2025 07:57:15 +0100 Subject: [PATCH 3/4] add type of callout as a bold string before the text --- docs/about/accessibility-statement.md | 2 +- .../contribute/github/content-kitchen-sink.md | 36 +++++++++---------- docs/contribute/github/index.md | 2 +- docs/contribute/report-error.md | 2 +- docs/contribute/write.md | 4 +-- docs/guide/index.md | 2 +- docs/legislation/index.md | 2 +- docs/resources/index.md | 2 +- docs/start/at/index.md | 2 +- docs/start/business/index.md | 2 +- docs/start/myths/overlays.md | 2 +- docs/start/quick-wins/index.md | 2 +- docs/start/training/index.md | 2 +- docs/start/wcag-intro/index.md | 2 +- docs/start/wp-plugins/index.md | 2 +- docs/testing/automated/index.md | 2 +- docs/testing/checklists/index.md | 2 +- docs/testing/code/index.md | 2 +- docs/testing/content/index.md | 2 +- docs/testing/design/index.md | 2 +- docs/testing/keyboard/index.md | 2 +- docs/testing/plugins/index.md | 2 +- docs/testing/screen-readers/index.md | 2 +- docs/topics/best-practice/index.md | 2 +- docs/topics/code/landmarks/index.md | 2 +- docs/topics/code/tables/index.md | 2 +- docs/topics/content/alt-text.md | 2 +- docs/topics/content/docs.md | 2 +- docs/topics/content/headings.md | 2 +- docs/topics/content/readability.md | 2 +- docs/topics/content/tables.md | 2 +- docs/topics/core/index.md | 2 +- docs/topics/forms/feedback.md | 2 +- docs/topics/forms/focus.md | 2 +- docs/topics/forms/help.md | 2 +- docs/topics/forms/wp-form-plugins.md | 2 +- docs/topics/plugins/index.md | 2 +- docs/topics/themes/index.md | 2 +- docs/topics/wcag/index.md | 4 +-- index.md | 2 +- 40 files changed, 59 insertions(+), 59 deletions(-) diff --git a/docs/about/accessibility-statement.md b/docs/about/accessibility-statement.md index 43cb15e3c..8c875a8a4 100644 --- a/docs/about/accessibility-statement.md +++ b/docs/about/accessibility-statement.md @@ -17,7 +17,7 @@ Please inform us! - or create an [issue in GitHub](https://github.com/wpaccessibility/wp-a11y-docs/issues/). {: .callout .info } -Please note: this is only for accessibility issues in **this website** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”. +**Please note:** this is only for accessibility issues in **this website** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”. ## Known accessibility issues diff --git a/docs/contribute/github/content-kitchen-sink.md b/docs/contribute/github/content-kitchen-sink.md index d578ccc05..3035ab2d4 100644 --- a/docs/contribute/github/content-kitchen-sink.md +++ b/docs/contribute/github/content-kitchen-sink.md @@ -10,7 +10,7 @@ has_video: true This page lists the options and code available for creating content in this documentation. {: .callout .info } -WordPress.org provides a lot of style guides for documentation: [WordPress Style Guides - highlights](https://make.wordpress.org/docs/style-guide/welcome/highlights/). We value most of all: be [kind and professional](docs/contribute/CODE_OF_CONDUCT.md) in your text and please write the text yourself or make sure the reader knows who you are citing. +**Please note:** WordPress.org provides a lot of style guides for documentation: [WordPress Style Guides - highlights](https://make.wordpress.org/docs/style-guide/welcome/highlights/). We value most of all: be [kind and professional](docs/contribute/CODE_OF_CONDUCT.md) in your text and please write the text yourself or make sure the reader knows who you are citing. ## Headings ```markdown @@ -31,7 +31,7 @@ WordPress.org provides a lot of style guides for documentation: [WordPress Style ###### This is an H6 heading {: .callout .alert } -In blog posts the H1 is added by the template: [Add a blog post]({{site.baseurl}}/docs/contribute/github/blog-post/). +**Alert:** In blog posts the H1 is added by the template: [Add a blog post]({{site.baseurl}}/docs/contribute/github/blog-post/). ## Summary in a larger text font. @@ -83,7 +83,7 @@ An image: ![Alt text](url) ![Library]({{site.baseurl}}/assets/images/small-image.jpg) {: .callout .tip } -For more text options with Markdown read: [Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) on GitHub. +**Tip:** For more text options with Markdown read: [Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) on GitHub. ## Videos This site uses the accessible media player Able Player. @@ -166,54 +166,54 @@ For larger pieces of content, you can add to a `

`, `

`or even a landmark, ```markdown {: .callout .info } -This is an informational message and uses the “info” callout. +**Info:** This is an informational message and uses the “info” callout. {: .callout .tip } -Use the “tip” callout to highlight tips. +**Tip:** Use the “tip” callout to highlight tips. {: .callout .alert } -The “alert” callout is for alerting readers to important messages. +**Alert:** The “alert” callout is for alerting readers to important messages. {: .callout .warning } -When something is particularly precarious, use the “warning” callout. +**Warning:** When something is particularly precarious, use the “warning” callout. {: .callout .example } -Give an example with the "example" callout. +**Example:** Give an example with the "example" callout. The title of the callout will be "Example". {: .callout .do } -Example of good practice. +**Do:** Example of good practice. {: .callout .dont } -Example of bad practice. +**Don't:** Example of bad practice. ``` {: .callout .info } -This is an informational message and uses the “info” callout. +**Info:** This is an informational message and uses the “info” callout. {: .callout .tip } -Use the “tip” callout to highlight tips. +**Tip:** Use the “tip” callout to highlight tips. {: .callout .alert } -The “alert” callout is for alerting readers to important messages. +**Alert:** The “alert” callout is for alerting readers to important messages. {: .callout .warning } -When something is particularly precarious, use the “warning” callout. +**Warning:** When something is particularly precarious, use the “warning” callout. {: .callout .example } -Give an example with the example. The title of the callout will be "Example". +**Example:** Give an example with the example. {: .callout .do } -Example of how to do something. The title of the callout will be "Do". +**Do:** Example of how to do something. {: .callout .dont } -Example of how not to do something. The title of the callout will be "Don't". +**Don't:** Example of how not to do something. ### Labels {: .callout .info } -Note: these are not form labels, but text labels. +**Please note:** These are not form labels, but text labels. ```markdown diff --git a/docs/contribute/github/index.md b/docs/contribute/github/index.md index b933fc1d3..2e57e27c4 100644 --- a/docs/contribute/github/index.md +++ b/docs/contribute/github/index.md @@ -11,6 +11,6 @@ We use the GitHub repository [wpaccessibility/wp-a11y-docs](https://github.com/w The project board [WP A11y docs](https://github.com/orgs/wpaccessibility/projects/3) contains all open issues and also the pull requests to review. {: .callout .alert } -Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed. +**Alert:** Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed. diff --git a/docs/contribute/report-error.md b/docs/contribute/report-error.md index 5c480052f..1cb3bc31b 100644 --- a/docs/contribute/report-error.md +++ b/docs/contribute/report-error.md @@ -15,4 +15,4 @@ There are several ways you can report an error: - Open an issue in the GitHub repository [wpaccessibility/wp-a11y-docs](https://github.com/wpaccessibility/wp-a11y-docs/). {: .callout .info } -Please note: this is only for errors in the documentation or code in **wpaccessibility.org** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”. +**Please note:** This is only for errors in the documentation or code in **wpaccessibility.org** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”. diff --git a/docs/contribute/write.md b/docs/contribute/write.md index 6701a8e5c..7ade561e6 100644 --- a/docs/contribute/write.md +++ b/docs/contribute/write.md @@ -8,12 +8,12 @@ nav_order: 3 # Write documentation {: .callout .alert } -Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed. +**Alert:** Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed. We keep track of the work on the documentation in the project board [WP A11y docs](https://github.com/orgs/wpaccessibility/projects/3). {: .callout .tip } -Please write the content yourself and use AI (artificial intelligence) only to translate or to check the quality of your English. +**Tip:** Please write the content yourself and use AI (artificial intelligence) only to translate or to check the quality of your English. To keep all pages in the same structure, please stick to the following formats for a blogpost or an accessibility topic. diff --git a/docs/guide/index.md b/docs/guide/index.md index 09c5496b5..9096f4697 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -7,7 +7,7 @@ nav_order: 3 # Reading guide {: .callout .alert } -This content will be created later, when there is sufficient content to point to. +**Alert:** This content will be created later, when there is sufficient content to point to. Help discuss how to create a useful reading guide for various target groups with comments on issue [GitHub #59 Reading guide](https://github.com/wpaccessibility/wp-a11y-docs/issues/59). diff --git a/docs/legislation/index.md b/docs/legislation/index.md index 8ecc44141..b7e03cacc 100644 --- a/docs/legislation/index.md +++ b/docs/legislation/index.md @@ -7,5 +7,5 @@ nav_order: 7 # Legislation {: .callout .alert } -This content will be written. +**Alert:** This content will be written. Related issue on [GitHub #179 Intro page Legislation](https://github.com/wpaccessibility/wp-a11y-docs/issues/177). diff --git a/docs/resources/index.md b/docs/resources/index.md index df5419a8d..19c0ed386 100644 --- a/docs/resources/index.md +++ b/docs/resources/index.md @@ -7,5 +7,5 @@ nav_order: 9 # Resources on accessibility {: .callout .alert } -This content will be written. +**Alert:** This content will be written. Related issue on [GitHub #181 Intro page Resources on accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/181). diff --git a/docs/start/at/index.md b/docs/start/at/index.md index e57243009..ebdf0783e 100644 --- a/docs/start/at/index.md +++ b/docs/start/at/index.md @@ -8,5 +8,5 @@ nav_order: 5 # Assistive technology {: .callout .alert } -This content will be written. +**Alert:** This content will be written. Related issue on [GitHub #87 Assistive technology](https://github.com/wpaccessibility/wp-a11y-docs/issues/87). diff --git a/docs/start/business/index.md b/docs/start/business/index.md index 92a95e9fc..b27e13178 100644 --- a/docs/start/business/index.md +++ b/docs/start/business/index.md @@ -8,7 +8,7 @@ nav_order: 4 # Accessibility for your business {: .callout .alert } -Starter content. This content will to be reviewed and expanded. +**Alert:** Starter content. This content will to be reviewed and expanded. Related issue on [GitHub #94 Topic Accessibility for your business](https://github.com/wpaccessibility/wp-a11y-docs/issues/94). An inclusive website enhances your business. It will: diff --git a/docs/start/myths/overlays.md b/docs/start/myths/overlays.md index 096fa8d9f..5f88e2747 100644 --- a/docs/start/myths/overlays.md +++ b/docs/start/myths/overlays.md @@ -14,7 +14,7 @@ That's a technical definition of an overlay, which doesn't address the effective However, an overlay can also create new problems. {: .callout .alert } -Note that while many of the accessibility plugins in the WordPress plugin repository are overlays or toolbar widgets, these are not recommended in this documentation. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/). +**Alert:** Note that while many of the accessibility plugins in the WordPress plugin repository are overlays or toolbar widgets, these are not recommended in this documentation. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/). ## What are legitimate uses of accessibility overlays? diff --git a/docs/start/quick-wins/index.md b/docs/start/quick-wins/index.md index fd73784e4..dcbb9f91b 100644 --- a/docs/start/quick-wins/index.md +++ b/docs/start/quick-wins/index.md @@ -8,7 +8,7 @@ nav_order: 1 # Quick wins {: .callout .alert } -Starter content. This content will to be reviewed and expanded. +**Alert:** Starter content. This content will to be reviewed and expanded. Related issue on [GitHub #91 Topic Quick wins](https://github.com/wpaccessibility/wp-a11y-docs/issues/91). What to do first? Start with the low-hanging fruit. Color contrast of text ia an easy fix. Alternative text with images probably too. diff --git a/docs/start/training/index.md b/docs/start/training/index.md index 5946d2149..f8b37af54 100644 --- a/docs/start/training/index.md +++ b/docs/start/training/index.md @@ -8,7 +8,7 @@ nav_order: 3 # Training, learn web accessibility {: .callout .alert } -This content will to be reviewed and expanded. The links need to be checked and updated. +**Alert:** This content will to be reviewed and expanded. The links need to be checked and updated. Related issue on [GitHub #93 Training](https://github.com/wpaccessibility/wp-a11y-docs/issues/93). ## Online events diff --git a/docs/start/wcag-intro/index.md b/docs/start/wcag-intro/index.md index 69cac0fb2..5d1d4e156 100644 --- a/docs/start/wcag-intro/index.md +++ b/docs/start/wcag-intro/index.md @@ -8,7 +8,7 @@ nav_order: 2 # Introduction to WCAG {: .callout .alert } -Starter content. This content will to be reviewed and expanded. +**Alert:** Starter content. This content will to be reviewed and expanded. Related issue on [GitHub #92 Introduction to WCAG](https://github.com/wpaccessibility/wp-a11y-docs/issues/92). The primary guidance for web accessibility on a global basis are the Web Content Accessibility Guidelines, commonly referred to as WCAG. WordPress requires that all content meet WCAG guidelines, but also pushes to provide accessibility beyond that minimum whenever possible. diff --git a/docs/start/wp-plugins/index.md b/docs/start/wp-plugins/index.md index 0fe6f9406..a08872a16 100644 --- a/docs/start/wp-plugins/index.md +++ b/docs/start/wp-plugins/index.md @@ -8,7 +8,7 @@ nav_order: 2 # WordPress accessibility plugins {: .callout .alert } -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/). +**Alert:** 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/). ## Editing Tools diff --git a/docs/testing/automated/index.md b/docs/testing/automated/index.md index a92398c6a..051847b82 100644 --- a/docs/testing/automated/index.md +++ b/docs/testing/automated/index.md @@ -8,7 +8,7 @@ nav_order: 5 # Automated accessibility testing {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #174 Topic Automated accessibility testing](https://github.com/wpaccessibility/wp-a11y-docs/issues/174). ## WCAG 2 AA automated validation diff --git a/docs/testing/checklists/index.md b/docs/testing/checklists/index.md index cc12f9b72..2cb679f14 100644 --- a/docs/testing/checklists/index.md +++ b/docs/testing/checklists/index.md @@ -8,7 +8,7 @@ nav_order: 2 # Checklists for accessibility testing overall {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #170 Checklists for accessibility testing overall](https://github.com/wpaccessibility/wp-a11y-docs/issues/170). [Accessibility testing guide](https://github.com/alphagov/wcag-primer/wiki) by the British Government Digital Service. For testing websites and applications against the Web Content Accessibility Guidelines (WCAG) 2.2 AA Level. A detailed checklist per WCAG Success criterion. diff --git a/docs/testing/code/index.md b/docs/testing/code/index.md index c60311378..427b04729 100644 --- a/docs/testing/code/index.md +++ b/docs/testing/code/index.md @@ -8,7 +8,7 @@ nav_order: 5 # Frontend checks for web accessibility {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #173 Topic Frontend checks for web accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/173). Testing for valid, semantic HTML is essential for the accessibility of your work. In this page we list some essential requirements and best resources. It gives you the minimum tests you need to do during development and before you commit your work. diff --git a/docs/testing/content/index.md b/docs/testing/content/index.md index 4a98fee0e..6737714cf 100644 --- a/docs/testing/content/index.md +++ b/docs/testing/content/index.md @@ -8,7 +8,7 @@ nav_order: 3 # Content checks for web accessibility {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #171 Topic Content checks for web accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/171). This page gives an overview of practical approaches and best practices for to keep your content as readable for as many users as possible. diff --git a/docs/testing/design/index.md b/docs/testing/design/index.md index a0d4312eb..60178c646 100644 --- a/docs/testing/design/index.md +++ b/docs/testing/design/index.md @@ -9,7 +9,7 @@ nav_order: 4 # Design checks for web accessibility {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #172 Topic Design checks for web accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/172). The most common design elements to check for are color contrast between text / background and the meaning of color to give information. But these aren’t the only things to take into consideration to improve your design. diff --git a/docs/testing/keyboard/index.md b/docs/testing/keyboard/index.md index e85af74ba..1e48cc2c5 100644 --- a/docs/testing/keyboard/index.md +++ b/docs/testing/keyboard/index.md @@ -8,7 +8,7 @@ nav_order: 6 # Keyboard navigation testing {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #175 Topic Keyboard navigation testing](https://github.com/wpaccessibility/wp-a11y-docs/issues/175). All functionality should work using a **keyboard only**. This essential for all assistive technology to work properly. Most keyboard testing should be checked manually. The best time to test this is during development. diff --git a/docs/testing/plugins/index.md b/docs/testing/plugins/index.md index 64d97a8dd..759ef041f 100644 --- a/docs/testing/plugins/index.md +++ b/docs/testing/plugins/index.md @@ -8,7 +8,7 @@ nav_order: 8 # WordPress' plugins for accessibility testing {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #177 Topic Screen reader testing](https://github.com/wpaccessibility/wp-a11y-docs/issues/177). We do not specifically endorse any of the plugins listed here but offer them as tools for you to test and use in your own accessible WordPress site. diff --git a/docs/testing/screen-readers/index.md b/docs/testing/screen-readers/index.md index 6942413d9..99a1ce71b 100644 --- a/docs/testing/screen-readers/index.md +++ b/docs/testing/screen-readers/index.md @@ -8,7 +8,7 @@ nav_order: 7 # Screen reader testing {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #176 Topic Screen reader testing](https://github.com/wpaccessibility/wp-a11y-docs/issues/176). Content that changes dynamically during time, like JavaScript generated error messages or content, must also be announced for screen readers. The best way is to test this with a screen reader like Apple VoiceOver (for Mac) or NVDA (for Windows). Listen to your website! diff --git a/docs/topics/best-practice/index.md b/docs/topics/best-practice/index.md index ae1874a79..93666642b 100644 --- a/docs/topics/best-practice/index.md +++ b/docs/topics/best-practice/index.md @@ -8,5 +8,5 @@ nav_order: 2 # The difference between WCAG and best practice {: .callout .alert } -This content will be written. +**Alert:** This content will be written. Related issue on [GitHub #98 Topic WCAG and best practice](https://github.com/wpaccessibility/wp-a11y-docs/issues/98). diff --git a/docs/topics/code/landmarks/index.md b/docs/topics/code/landmarks/index.md index 2fe7c1655..a535ed142 100644 --- a/docs/topics/code/landmarks/index.md +++ b/docs/topics/code/landmarks/index.md @@ -8,7 +8,7 @@ nav_order: 4 # ARIA Landmarks {: .callout .alert } -This content will be reviewed and restructured. +**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). ARIA landmark roles provide a method for screen reader users to navigate structural regions of a site. By default, many HTML5 elements define ARIA landmark roles which identify these regions. diff --git a/docs/topics/code/tables/index.md b/docs/topics/code/tables/index.md index e01df5f3f..30ceabd73 100644 --- a/docs/topics/code/tables/index.md +++ b/docs/topics/code/tables/index.md @@ -8,7 +8,7 @@ nav_order: 5 # Tables in theme and plugin development {: .callout .alert } -This content will be reviewed and restructured. +**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). Tables are the recommended way to display tabular data. Tabular data is any data that is best navigated in two dimensions: where there are relationships both vertically along columns and horizontally in rows. Tables are not a good idea for layout, however. diff --git a/docs/topics/content/alt-text.md b/docs/topics/content/alt-text.md index 5ddc4dfdb..4c51b21cc 100644 --- a/docs/topics/content/alt-text.md +++ b/docs/topics/content/alt-text.md @@ -8,7 +8,7 @@ nav_order: 2 # Alternative text for images {: .callout .alert } -This content will be reviewed and expanded and maybe divided into separate topic pages. +**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). diff --git a/docs/topics/content/docs.md b/docs/topics/content/docs.md index dea072986..d95dd72da 100644 --- a/docs/topics/content/docs.md +++ b/docs/topics/content/docs.md @@ -8,7 +8,7 @@ nav_order: 7 # Digital documents {: .callout .alert } -This content will be reviewed, restructured and expanded. +**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). ## Accessible PDFs diff --git a/docs/topics/content/headings.md b/docs/topics/content/headings.md index 8c2e81581..41d225421 100644 --- a/docs/topics/content/headings.md +++ b/docs/topics/content/headings.md @@ -8,7 +8,7 @@ nav_order: 3 # Headings in the content {: .callout .alert } -This content will be reviewed and restructured. +**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). ## What are headings? diff --git a/docs/topics/content/readability.md b/docs/topics/content/readability.md index 233619240..831cb8f72 100644 --- a/docs/topics/content/readability.md +++ b/docs/topics/content/readability.md @@ -8,7 +8,7 @@ nav_order: 6 # Readability {: .callout .alert } -This content will be reviewed, restructured and expanded. +**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). People don’t read on the internet. They scan a page for keywords and only start reading when they find what they are looking for. That’s why it’s important to make the text scannable and easy to read. diff --git a/docs/topics/content/tables.md b/docs/topics/content/tables.md index a5e08947e..1e22087bb 100644 --- a/docs/topics/content/tables.md +++ b/docs/topics/content/tables.md @@ -8,7 +8,7 @@ nav_order: 5 # Tables in the content {: .callout .alert } -This content will be written. +**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). This content will be about how to add an accessible table in WordPres Admin and gives info about plugins to use, that can create accessible tables. diff --git a/docs/topics/core/index.md b/docs/topics/core/index.md index 39be874cc..a21c039f1 100644 --- a/docs/topics/core/index.md +++ b/docs/topics/core/index.md @@ -8,7 +8,7 @@ nav_order: 7 # WordPress Core Accessibility Standards {: .callout .alert } -This content will be reviewed and restructured. +**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 } diff --git a/docs/topics/forms/feedback.md b/docs/topics/forms/feedback.md index 4eee41ae1..9c5cfed28 100644 --- a/docs/topics/forms/feedback.md +++ b/docs/topics/forms/feedback.md @@ -8,7 +8,7 @@ nav_order: 9 # Feedback on form errors {: .callout .alert } -This content will be rewritten and expanded. +**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). ## Provide accessible notifications diff --git a/docs/topics/forms/focus.md b/docs/topics/forms/focus.md index 19ad77551..c6f27ab3f 100644 --- a/docs/topics/forms/focus.md +++ b/docs/topics/forms/focus.md @@ -8,7 +8,7 @@ nav_order: 6 # Form focus handling {: .callout .alert } -This content will be rewritten and expanded. +**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). ## Consistent tab order diff --git a/docs/topics/forms/help.md b/docs/topics/forms/help.md index 05b6e5d76..a552290af 100644 --- a/docs/topics/forms/help.md +++ b/docs/topics/forms/help.md @@ -8,7 +8,7 @@ nav_order: 7 # Provide help filling out a form {: .callout .alert } -This content will be rewritten and expanded. +**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). ### Provide instructions to help users with complex forms diff --git a/docs/topics/forms/wp-form-plugins.md b/docs/topics/forms/wp-form-plugins.md index acd843d05..f95c7536c 100644 --- a/docs/topics/forms/wp-form-plugins.md +++ b/docs/topics/forms/wp-form-plugins.md @@ -8,7 +8,7 @@ nav_order: 10 # WordPress form plugins and accessibility {: .callout .alert } -This content will be rewritten and expanded. +**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 index 8eef05f3b..b93c72cf3 100644 --- a/docs/topics/plugins/index.md +++ b/docs/topics/plugins/index.md @@ -8,7 +8,7 @@ nav_order: 9 # WordPress plugins and accessibility {: .callout .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. +**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). There are no plugin accessibility requirements in the WordPress plugin directory. This is because of the labor required to test plugins for accessibility. However, you are strongly encouraged to consider accessibility when creating or updating your plugins. diff --git a/docs/topics/themes/index.md b/docs/topics/themes/index.md index f9f5e781a..c6d70afbe 100644 --- a/docs/topics/themes/index.md +++ b/docs/topics/themes/index.md @@ -8,7 +8,7 @@ nav_order: 8 # WordPress themes and accessibility {: .callout .alert } -This content will be updated later. +**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). Creating a theme that supports accessibility is mostly about setting healthy defaults. This includes: diff --git a/docs/topics/wcag/index.md b/docs/topics/wcag/index.md index 09c7cb6cf..22ec361ac 100644 --- a/docs/topics/wcag/index.md +++ b/docs/topics/wcag/index.md @@ -8,7 +8,7 @@ nav_order: 1 # WCAG and compliance {: .callout .alert } -This content will be reviewed and expanded. +**Alert:** This content will be reviewed and expanded. Related issue on [GitHub #97 Topic WCAG and compliance](https://github.com/wpaccessibility/wp-a11y-docs/issues/97). The World Wide Web Consortium (W3C) developed guidelines to safeguard the accessibility of a website: the Web Content Accessibility Guidelines: WCAG. The current recommended version is 2.2. @@ -34,7 +34,7 @@ Quoting: > The WordPress accessibility coding standards require new or updated code to meet the standards of the Web Content Accessibility Guidelines (WCAG) version 2.0 at level AA. ATAG conformance is an additional goal beyond WCAG compliance. {: .callout .alert } -WordPress is not currently conforming with ATAG 2.0, but pledges to pursue features that are accessible and which help users create accessible content in pursuit of the long-term goal of ATAG compliance. +**Alert:** WordPress is not currently conforming with ATAG 2.0, but pledges to pursue features that are accessible and which help users create accessible content in pursuit of the long-term goal of ATAG compliance. ## Other resources diff --git a/index.md b/index.md index ba1941a3c..48067f7d2 100644 --- a/index.md +++ b/index.md @@ -14,7 +14,7 @@ Documentation about accessibility for WordPress users and creators. For the comm --- {: .callout .alert} -**Please note**: this documentation is a work in progress. +**Please note**: This documentation is a work in progress. The content is not finished yet and the website needs an accessibility audit. This documentation aims to provide you with answers about WordPress and accessibility. How do you design and create an accessible website or plugin? How do you write accessible content? What do you need to know to comply with international legislation? From aa9129a08b4c97e60ed138f803f20bd93c91f72f Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Tue, 9 Dec 2025 08:18:35 +0100 Subject: [PATCH 4/4] add type of callout as a bold string before the text And fix some missing classes and double spaces. --- docs/testing/automated/index.md | 2 +- docs/testing/design/index.md | 2 +- docs/testing/plugins/index.md | 2 +- docs/topics/code/accessible-name/index.md | 4 ++-- docs/topics/code/components/dialog.md | 2 +- docs/topics/code/components/excerpt.md | 2 +- docs/topics/code/components/link-logo.md | 2 +- docs/topics/code/components/pagination.md | 2 +- docs/topics/code/components/skip-links.md | 2 +- docs/topics/code/dynamic-changes/index.md | 2 +- docs/topics/code/heading-structure/index.md | 2 +- docs/topics/code/images-animations/images.md | 2 +- docs/topics/code/images-animations/reduced-motion.md | 2 +- docs/topics/code/landmarks/index.md | 2 +- docs/topics/code/screen-reader-text/index.md | 2 +- docs/topics/code/semantics/index.md | 2 +- docs/topics/code/tables/index.md | 2 +- docs/topics/content/alt-text.md | 4 ++-- docs/topics/content/docs.md | 6 +++--- docs/topics/content/headings.md | 2 +- docs/topics/content/readability.md | 2 +- docs/topics/content/tables.md | 2 +- docs/topics/core/index.md | 8 +++----- docs/topics/forms/descriptions/connect-description.md | 2 +- docs/topics/forms/feedback.md | 2 +- docs/topics/forms/fieldsets/fieldset-descriptions.md | 2 +- docs/topics/forms/fieldsets/legend.md | 6 +++--- docs/topics/forms/focus.md | 2 +- docs/topics/forms/help.md | 2 +- docs/topics/forms/input-label/label-location.md | 4 ++-- docs/topics/forms/required/mark-optional-fields.md | 4 ++-- docs/topics/forms/required/mark-required-fields.md | 4 ++-- docs/topics/forms/required/required-screen-readers.md | 8 ++++---- docs/topics/forms/wp-form-plugins.md | 2 +- docs/topics/plugins/index.md | 2 +- docs/topics/themes/index.md | 2 +- docs/topics/wcag/index.md | 4 ++-- 37 files changed, 52 insertions(+), 54 deletions(-) diff --git a/docs/testing/automated/index.md b/docs/testing/automated/index.md index 051847b82..c20790ab5 100644 --- 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 index 60178c646..deec36549 100644 --- 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 index 759ef041f..000078543 100644 --- 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 index c8082dc95..b5fa7ca82 100644 --- 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 `` 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 index d490d113a..8e587107c 100644 --- 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 index a58d3dd8c..2ae9b5186 100644 --- 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 index 2d8b4b686..c9e18809c 100644 --- 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 index 0ba1c7107..7196e2f70 100644 --- 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 index eb2986f7c..2b355913b 100644 --- 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 index dc10d7b0f..c6d523dc2 100644 --- 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 index fb87b92ad..0969f46bb 100644 --- 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 index cbc8ab453..130cb6d0e 100644 --- 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 index 026336651..c96fb15e3 100644 --- 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 index a535ed142..4a1056869 100644 --- 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 index 7a3182802..689d44451 100644 --- 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 index 579872898..35b2815b8 100644 --- 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 index 30ceabd73..039bbbfcf 100644 --- 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 index 4c51b21cc..4a5926db6 100644 --- 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 index d95dd72da..7704ccb89 100644 --- 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 index 41d225421..b00a16004 100644 --- 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 index 831cb8f72..61dd22fcb 100644 --- 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 index 1e22087bb..7e51247aa 100644 --- 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 index a21c039f1..dda4036ab 100644 --- 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 index bd8949957..213764c6d 100644 --- 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 index 9c5cfed28..0d801c360 100644 --- 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 index 533cc7802..6bf0b017f 100644 --- 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 diff --git a/docs/topics/forms/fieldsets/legend.md b/docs/topics/forms/fieldsets/legend.md index 20ea06055..edbdb0bea 100644 --- 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/ ``` -{: 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 diff --git a/docs/topics/forms/focus.md b/docs/topics/forms/focus.md index c6f27ab3f..ba650bba8 100644 --- 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 index a552290af..39a629427 100644 --- 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 index a3ae5cfe3..3e5079720 100644 --- 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 index 7f8a70aba..5e86a4d8b 100644 --- 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 index cfad1be26..fc9ce48ae 100644 --- 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 index 1aad1b2d6..ef59ab538 100644 --- 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
``` -{: .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 index f95c7536c..b637caa24 100644 --- 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 index b93c72cf3..2de16fc53 100644 --- 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 index c6d70afbe..ce26ec5ee 100644 --- 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 index 22ec361ac..45c7855bb 100644 --- a/docs/topics/wcag/index.md +++ b/docs/topics/wcag/index.md @@ -7,7 +7,7 @@ nav_order: 1 # WCAG and compliance -{: .callout .alert } +{: .callout .alert } **Alert:** This content will be reviewed and expanded. Related issue on [GitHub #97 Topic WCAG and compliance](https://github.com/wpaccessibility/wp-a11y-docs/issues/97). @@ -33,7 +33,7 @@ Quoting: > The WordPress accessibility coding standards require new or updated code to meet the standards of the Web Content Accessibility Guidelines (WCAG) version 2.0 at level AA. ATAG conformance is an additional goal beyond WCAG compliance. -{: .callout .alert } +{: .callout .alert } **Alert:** WordPress is not currently conforming with ATAG 2.0, but pledges to pursue features that are accessible and which help users create accessible content in pursuit of the long-term goal of ATAG compliance. ## Other resources