diff --git a/modules/ROOT/examples/live-demos/a11ychecker/index.js b/modules/ROOT/examples/live-demos/a11ychecker/index.js index bd41b7b2b9..dd694f2b25 100644 --- a/modules/ROOT/examples/live-demos/a11ychecker/index.js +++ b/modules/ROOT/examples/live-demos/a11ychecker/index.js @@ -2,8 +2,11 @@ tinymce.init({ selector: 'textarea#a11ychecker', plugins: 'a11ychecker advcode table advlist lists image media anchor link autoresize', toolbar: 'a11ycheck | blocks bold forecolor backcolor | bullist numlist | link image media anchor | table | code', + max_height: 500, a11y_advanced_options: true, a11ychecker_html_version: 'html5', a11ychecker_level: 'aaa', + a11ychecker_allow_decorative_images: true, + a11ychecker_alt_text_max_length: 150, content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' }); diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index ed7130bb95..b4759ac0ee 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -58,6 +58,40 @@ The following premium plugin updates were released alongside {productname} {rele // For information on the **** plugin, see: xref:.adoc[]. +=== Accessibility Checker + +The {productname} {release-version} release includes an accompanying release of the **Accessibility Checker** premium plugin. + +**Accessibility Checker** Premium plugin includes the following improvements. + +=== Accessibility: Enhanced image accessibility checks in a11ychecker plugin +// #TINY-10903 + +The {productname} {release-version} introduces four new image accessibility rules (xref:a11ychecker.adoc##image-rules[Image rules]) in the xref:a11ychecker.adoc[a11ychecker] plugin to improve compliance and authoring guidance. These rules help identify common accessibility issues related to image use and provide actionable recommendations: + +* *xref:a11ychecker.adoc#I1[I1: Mixed Signals & Decorative Policy]*: Flags images with conflicting accessibility indicators (e.g., `alt` with `role="presentation"`) and ensures decorative images comply with best practices. +* *xref:a11ychecker.adoc#I2[I2: Alt Attribute Requirement]*: Enforces the presence of the `alt` attribute on all `` elements, regardless of other labeling mechanisms like `aria-label`, `aria-labelledby`, or `title`. +* *xref:a11ychecker.adoc#I3[I3: Filename Detection]*: Warns when `alt` text appears to be a filename (e.g., `image123.jpg`), including cases with URL encoding. +* *xref:a11ychecker.adoc#I4[I4: Alt Text Length]*: Detects `alt` text that exceeds a configurable maximum length, promoting concise descriptions. The default limit is 100 characters and can be adjusted using the new xref:a11ychecker.adoc#a11ychecker_alt_text_max_length[`a11ychecker_alt_text_max_length`] setting. + +Additional improvements include a rule precedence system to avoid duplicate violations, centralized image intent detection (e.g., decorative, informative, mixed signals, incomplete), and more readable user-facing messages. Technical terminology such as "alternative text" has been replaced with "text description," and repair instructions are now more contextual and user-friendly. + +=== New `a11ychecker_alt_text_max_length` configuration option for Accessibility Checker alt text length +// #TINY-10903 + +A new configuration option, xref:a11ychecker.adoc#a11ychecker_alt_text_max_length[`a11ychecker_alt_text_max_length`], has been added to the Accessibility Checker plugin. This option allows users to configure the maximum allowed length for image alt text descriptions. The default value is 150 characters. For example: + +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'a11ychecker', + a11ychecker_alt_text_max_length: 150 // Set maximum length to 150 characters +}); +---- + +For more information on the Accessibility Checker plugin, see: xref:a11ychecker.adoc[Accessibility Checker]. + === PowerPaste The {productname} {release-version} release includes an accompanying release of the **PowerPaste** premium plugin. diff --git a/modules/ROOT/pages/a11ychecker.adoc b/modules/ROOT/pages/a11ychecker.adoc index 240c08ac70..6abb3f1fda 100644 --- a/modules/ROOT/pages/a11ychecker.adoc +++ b/modules/ROOT/pages/a11ychecker.adoc @@ -46,300 +46,59 @@ Each rule has a severity level, which will be one of the following, listed in or * Warning * Error -[[D1]] -=== D1 - Usage of paragraphs as headings +[[document-structure-rules]] +=== Document structure rules -*Rule description:* this rule checks that `+h1+`-`+h6+` tags are used for heading content, not `+p+` tags. Not using correct heading markup will make it difficult for assistive technologies to represent and navigate through your content. +include::partial$a11y-rules/d1.adoc[] -==== {pluginname} rule details - D1 +include::partial$a11y-rules/d2.adoc[] -Notification level (severity):: Warning +include::partial$a11y-rules/d3.adoc[] -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA +include::partial$a11y-rules/d4o.adoc[] -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 +include::partial$a11y-rules/d4u.adoc[] -WCAG 2.1 specifications:: +include::partial$a11y-rules/d5.adoc[] -* https://www.w3.org/WAI/WCAG21/Techniques/html/H42.html[H42 - Using h1-h6 to identify headings]. -* https://www.w3.org/WAI/WCAG21/Techniques/html/H69.html[H69 - Providing heading elements at the beginning of each section of content]. +''' -[[D2]] -=== D2 - Sequential headings +[[html-rules]] +=== HTML rules -*Rule description:* this rule checks that headings tags are used sequentially. +include::partial$a11y-rules/h93.adoc[] -For example: A `+h1+` heading should be followed by a `+h2+` heading, not a `+h3+` heading. Using sequential headings will make it easier for assistive technology to parse your content. +''' -==== {pluginname} rule details - D2 +[[image-rules]] +=== Image rules -Notification level (severity):: Error +include::partial$a11y-rules/i1.adoc[] -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA +include::partial$a11y-rules/i2.adoc[] -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 +include::partial$a11y-rules/i3.adoc[] -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G141.html[G141 - Organizing a page using headings]. +include::partial$a11y-rules/i4.adoc[] -[[D3]] -=== D3 - Adjacent links +''' -*Rule description:* this rule checks that links next to other links do not have the same `+href+` attribute. +[[table-rules]] +=== Table rules -For example: If an image link and a text link have the same `+href+` attribute, both elements should be in the same `+a+` element. If an image link and a text link point to the same URL but are two separate elements, it can be confusing for users of screen readers and other assistive technologies. +include::partial$a11y-rules/t1.adoc[] -==== {pluginname} rule details - D3 +include::partial$a11y-rules/t2.adoc[] -Notification level (severity):: Error +include::partial$a11y-rules/t3.adoc[] -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA +include::partial$a11y-rules/t4a.adoc[] -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 +include::partial$a11y-rules/t4b.adoc[] -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H2.html[H2 - Combining adjacent image and text links for the same resource]. +include::partial$a11y-rules/t4c.adoc[] -[[D4O]] -=== D4O - Ordered list structure - -*Rule description:* this rule checks that an `+ol+` element is used for ordered lists. Do not use paragraphs beginning with numbers or roman numerals instead of an `+ol+` element containing `+li+` items. This is to simplify navigation and parsing of the content for users of assistive technologies. - -==== {pluginname} rule details - D4O - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html[H48 - Using ol, ul and dl for lists or groups of links]. - -[[D4U]] -=== D4U - Unordered list structure - -*Rule description:* this rule checks that a `+ul+` element is used for unordered lists. Do not use paragraphs beginning with `+*+` or `+-+` or some similar character instead of an `+ol+` element containing `+li+` items. This is to simplify navigation and parsing of the content for users of assistive technologies. - -==== {pluginname} rule details - D4U - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html[H48 - Using ol, ul and dl for lists or groups of links]. - -[[D5]] -=== D5 - Contrast ratio of the text (D5A, D5B, and D5C) - -*Rule description:* this rule checks that the contrast ratio of the text is above the following values: - -* When the compliance level is set to AA, -** 4.5:1 for normal text -** 3:1 for large text -* When the compliance level is set to AAA, -** 7:1 for any text - -Text with a low contrast ratio is hard to read for users with impaired vision. - -[[D5A]] -==== {pluginname} rule details - D5A - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level AA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G145.html[G145 - Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text]. - -[[D5B]] -==== {pluginname} rule details - D5B - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level AA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html[G18 - Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text]. - -[[D5C]] -==== {pluginname} rule details - D5C - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G17.html[G17 - Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text]. - -[[H93]] -=== H93 - IDs must be unique - -*Rule description:* this rule checks that all `+id+` attributes are unique in the editor. Duplicate `+id+` attributes are known to cause problems for assistive technologies when parsing the content. - -==== {pluginname} rule details - H93 - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H93.html[H93 - Ensuring that id attributes are unique on a Web page]. - -[[I1]] -=== I1 - Image `+alt+` text - -*Rule description:* this rule checks that all images have alternative (`+alt+`) text for screen readers and other assistive technologies. - -==== {pluginname} rule details - I1 - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G95.html[G95 - Providing short text alternatives that provide a brief description of the non-text content]. - -include::partial$misc/admon-accessibility-rule-i3-can-also-be-applied.adoc[] - -[[I2]] -=== I2 - Image `+alt+` text is not the image filename - -*Rule description:* this rule checks that the `+alt+` attribute text of the image is not the same as the filename of the image. - -==== {pluginname} rule details - I2 - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G95.html[G95 - Providing short text alternatives that provide a brief description of the non-text content]. - -include::partial$misc/admon-accessibility-rule-i3-can-also-be-applied.adoc[] - -[[I3]] -=== I3 - Image `+alt+` text is not greater than 100 characters - -*Rule description:* this rule checks that the `+alt+` attribute text of the image is not more than 100 characters. - -An _Image alternative text should be less than 100 characters_ warning dialog presents if the alternative (`+alt+`) text is longer than 100 characters. This dialog also presents the alternative text in an editable field, for immediate repair. - -==== {pluginname} rule details - I3 - -Notification level (severity):: Warning - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: n/a. - - -[[T1]] -=== T1 - Table caption - -*Rule description:* this rule checks that all `+table+` elements have a `+caption+` element describing the data inside the table to simplify parsing and navigation of the content for users of assistive technologies. - -==== {pluginname} rule details - T1 - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html[H39 - Using caption elements to associate data table captions with data tables]. - -[[T2]] -=== T2 - Complex table summary - -*Rule description:* this rule checks that all complex tables must have a `+summary+` attribute explaining to users of assistive technologies how to navigate through the data inside of the table. - -[NOTE] -==== -This rule only applies to HTML 4 content and is not checked when `+a11ychecker_html_version+` is set to `+html5+`. -==== - -==== {pluginname} rule details - T2 - -Notification level (severity):: Warning - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html[H73 - Using the summary attribute of the table element to give an overview of data tables]. - -[[T3]] -=== T3 - Table caption and summary - -*Rule description:* this rule checks that the table caption and summary does not have the same text content. The caption should explain *what* the table is about while the summary should explain *how* to navigate the data inside of the table. - -[NOTE] -==== -The table `+summary+` attribute was deprecated in HTML 5, both the *what* and *how* information should be moved to the table caption. -==== - -==== {pluginname} rule details - T3 - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html[H73 - Using the summary attribute of the table element to give an overview of data tables]. - -[[T4A]] -=== T4A - Table markup - -*Rule description:* this rule checks that all `+tables+` contain both `+tr+` and `+td+` elements. - -==== {pluginname} rule details - T4A - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html[H51 - Using table markup to present tabular information]. - -[[T4B]] -=== T4B - Table headers - -*Rule description:* this rule checks that all `+table+` elements contain at least one table header (`+th+`) element. - -==== {pluginname} rule details - T4B - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html[H51 - Using table markup to present tabular information]. - -[[T4C]] -=== T4C - Table heading scope - -*Rule description:* this rule checks that all table header (`+th+`) elements have a `+scope+` attribute clarifying what scope the heading has inside of the `+table+`. The allowed values are `+row+`, `+col+`, `+rowgroup+`, and `+colgroup+`. This is important for users of assistive technologies to be able to parse table data. - -==== {pluginname} rule details - T4C - -Notification level (severity):: Error - -https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA - -xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 - -WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H63.html[H63 - Using the scope attribute to associate header cells and data cells in data tables]. +''' == Options @@ -347,6 +106,8 @@ The following configuration options affect the behavior of the {pluginname} plug include::partial$configuration/a11y_advanced_options.adoc[leveloffset=+1] +include::partial$configuration/a11ychecker_alt_text_max_length.adoc[leveloffset=+1] + include::partial$configuration/a11ychecker_allow_decorative_images.adoc[leveloffset=+1] include::partial$configuration/a11ychecker_filter_issue.adoc[leveloffset=+1] diff --git a/modules/ROOT/partials/a11y-rules/d1.adoc b/modules/ROOT/partials/a11y-rules/d1.adoc new file mode 100644 index 0000000000..22f0f7715a --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/d1.adoc @@ -0,0 +1,51 @@ +[[D1]] +==== D1 - Usage of paragraphs as headings + +*Rule description:* this rule checks that `+h1+`-`+h6+` tags are used for heading content, not `+p+` tags. Not using correct heading markup will make it difficult for assistive technologies to represent and navigate through your content. + +===== {pluginname} rule details - D1 + +Notification level (severity):: Warning + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: +* https://www.w3.org/WAI/WCAG21/Techniques/html/H42.html[H42 - Using h1-h6 to identify headings]. +* https://www.w3.org/WAI/WCAG21/Techniques/html/H69.html[H69 - Providing heading elements at the beginning of each section of content]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + +

This looks like a heading

+ + +
Another pseudo heading
+ + +

Not a real heading

+---- + +These examples use non-semantic markup that looks like headings but won't be recognized as such by assistive technologies. + +.Compliant examples + +[source,html] +---- + +

Main page title

+ +

Section heading

+ + +

Subsection heading

+---- + +These examples use proper heading tags that will be correctly interpreted by assistive technologies. +==== \ No newline at end of file diff --git a/modules/ROOT/partials/a11y-rules/d2.adoc b/modules/ROOT/partials/a11y-rules/d2.adoc new file mode 100644 index 0000000000..d0144c0268 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/d2.adoc @@ -0,0 +1,57 @@ +[[D2]] +==== D2 - Sequential headings + +*Rule description:* this rule checks that heading levels are sequential. Each heading level in a document should follow a logical sequence. That is, you should not skip heading levels (for example, from `+h2+` to `+h4+`). + +===== {pluginname} rule details - D2 + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G141.html[G141 - Organizing a page using headings]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + +

Main title

+

Subsection

+ + +

Section

+

Sub-subsection

+ + +

Higher level

+

Lower level

+---- + +These examples show incorrect heading level progression that can confuse users of assistive technologies. + +.Compliant examples + +[source,html] +---- + +

Main title

+

Section

+

Subsection

+

Sub-subsection

+ + +

Main title

+

First section

+

Subsection

+

Second section

+

Another subsection

+---- + +These examples demonstrate proper heading level progression. +==== diff --git a/modules/ROOT/partials/a11y-rules/d3.adoc b/modules/ROOT/partials/a11y-rules/d3.adoc new file mode 100644 index 0000000000..e078c7b38e --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/d3.adoc @@ -0,0 +1,42 @@ +[[D3]] +==== D3 - Adjacent links + +*Rule description:* this rule checks that links next to other links do not have the same `+href+` attribute. + +For example: If an image link and a text link have the same `+href+` attribute, both elements should be in the same `+a+` element. If an image link and a text link point to the same URL but are two separate elements, it can be confusing for users of screen readers and other assistive technologies. + +==== {pluginname} rule details - D3 + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H2.html[H2 - Combining adjacent image and text links for the same resource]. + +.Examples +[%collapsible] +==== +.Non-compliant example + +[source,html] +---- +Download +Download User Guide +---- + +This example has two separate links pointing to the same resource. Screen readers will announce these as two different links, which is redundant and potentially confusing. + +.Compliant example + +[source,html] +---- + + + Download User Guide + +---- + +This example combines the image and text into a single link. The image is given an empty alt attribute since the text provides the link's purpose. +==== diff --git a/modules/ROOT/partials/a11y-rules/d4o.adoc b/modules/ROOT/partials/a11y-rules/d4o.adoc new file mode 100644 index 0000000000..9aaae1e653 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/d4o.adoc @@ -0,0 +1,44 @@ +[[D4O]] +==== D4O - Ordered list structure + +*Rule description:* this rule checks that an `+ol+` element is used for ordered lists. Do not use paragraphs beginning with numbers or roman numerals instead of an `+ol+` element containing `+li+` items. This is to simplify navigation and parsing of the content for users of assistive technologies. + +==== {pluginname} rule details - D4O + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html[H48 - Using ol, ul and dl for lists or groups of links]. + +.Examples +[%collapsible] +==== +.Non-compliant example + +[source,html] +---- +

1. First prepare the ingredients

+

2. Mix the dry ingredients together

+

3. Add wet ingredients slowly

+

4. Bake at 350°F

+---- + +This example uses paragraphs with manual numbering instead of proper list markup. Screen readers won't recognize this as a list structure. + +.Compliant example + +[source,html] +---- +
    +
  1. First prepare the ingredients
    2. +
  2. Mix the dry ingredients together
    3. +
  3. Add wet ingredients slowly
    4. +
  4. Bake at 350°F
    5. +
+---- + +This example uses proper ordered list markup, allowing screen readers to announce the list structure and item count. +==== diff --git a/modules/ROOT/partials/a11y-rules/d4u.adoc b/modules/ROOT/partials/a11y-rules/d4u.adoc new file mode 100644 index 0000000000..17ee1569df --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/d4u.adoc @@ -0,0 +1,44 @@ +[[D4U]] +==== D4U - Unordered list structure + +*Rule description:* this rule checks that a `+ul+` element is used for unordered lists. Do not use paragraphs beginning with `+*+` or `+-+` or some similar character instead of an `+ol+` element containing `+li+` items. This is to simplify navigation and parsing of the content for users of assistive technologies. + +==== {pluginname} rule details - D4U + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html[H48 - Using ol, ul and dl for lists or groups of links]. + +.Examples +[%collapsible] +==== +.Non-compliant example + +[source,html] +---- +

• Fresh vegetables

+

• Whole grains

+

- Lean proteins

+

* Healthy fats

+---- + +This example uses paragraphs with bullet characters instead of proper list markup. Screen readers won't recognize this as a list structure. + +.Compliant example + +[source,html] +---- +
    +
  • Fresh vegetables
    • +
  • Whole grains
    • +
  • Lean proteins
    • +
  • Healthy fats
    • +
+---- + +This example uses proper unordered list markup, allowing screen readers to announce it as a list and navigate through items efficiently. +==== diff --git a/modules/ROOT/partials/a11y-rules/d5.adoc b/modules/ROOT/partials/a11y-rules/d5.adoc new file mode 100644 index 0000000000..3e52746c60 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/d5.adoc @@ -0,0 +1,81 @@ +[[D5]] +==== D5 - Contrast ratio of the text (D5A, D5B, and D5C) + +*Rule description:* this rule checks that the contrast ratio of the text is above the following values: + +* When the compliance level is set to AA, +** 4.5:1 for normal text +** 3:1 for large text +* When the compliance level is set to AAA, +** 7:1 for any text + +Text with a low contrast ratio is hard to read for users with impaired vision. + +[[D5A]] +==== {pluginname} rule details - D5A + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level AA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G145.html[G145 - Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text]. + +[[D5B]] +==== {pluginname} rule details - D5B + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level AA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html[G18 - Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text]. + +[[D5C]] +==== {pluginname} rule details - D5C + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G17.html[G17 - Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + +

This text has insufficient contrast

+ + +

This text is very hard to read

+ + +

Large heading with poor contrast

+---- + +These examples demonstrate text with insufficient contrast ratios that fail WCAG requirements. + +.Compliant examples + +[source,html] +---- + +

This text meets AA standard for normal text

+ + +

This text exceeds AAA requirements

+ + +

Large heading with good contrast

+---- + +These examples meet WCAG contrast requirements for their respective sizes and levels. +==== diff --git a/modules/ROOT/partials/a11y-rules/h93.adoc b/modules/ROOT/partials/a11y-rules/h93.adoc new file mode 100644 index 0000000000..ae1ef70c15 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/h93.adoc @@ -0,0 +1,60 @@ +[[H93]] +==== H93 - IDs must be unique + +*Rule description:* this rule checks that all `+id+` attributes are unique in the editor. Duplicate `+id+` attributes are known to cause problems for assistive technologies when parsing the content. + +===== {pluginname} rule details - H93 + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H93.html[H93: Ensuring that id attributes are unique on a Web page]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + +
First section
+
Second section
+ + + + + + + + + + +---- + +These examples show incorrect use of duplicate IDs that can confuse assistive technologies. + +.Compliant examples + +[source,html] +---- + +
First section
+
Second section
+ + + + + + + + + + +---- + +These examples demonstrate proper use of unique IDs. +==== diff --git a/modules/ROOT/partials/a11y-rules/i1.adoc b/modules/ROOT/partials/a11y-rules/i1.adoc new file mode 100644 index 0000000000..18b4a7242a --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/i1.adoc @@ -0,0 +1,71 @@ +[[I1]] +==== I1 - Conflicting or incomplete image accessibility + +*Rule description:* this rule checks that all images have complete and non-conflicting accessibility information. It flags images that send mixed signals about their purpose (both decorative and informative) or have incomplete accessibility information. When `+a11ychecker_allow_decorative_images+` is `+false+`, this rule also flags decorative images as not allowed. + +===== {pluginname} rule details - I1 + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G95.html[G95 - Providing short text alternatives that provide a brief description of the non-text content]. + +include::partial$misc/admon-accessibility-rule-i3-can-also-be-applied.adoc[] + +.Examples +[%collapsible] +==== +.Non-compliant examples +[source,html] +---- + +Company Logo + + + + + + + + + + + + + + +Description + + + +---- + +These examples show various accessibility issues: mixed signals, incomplete intent, and decorative images when not allowed. + +.Compliant examples +[source,html] +---- + +Company Logo + + + + + + + + + + + +Sales performance chart +

Detailed breakdown of Q3 sales performance...

+---- + +These examples demonstrate proper accessibility markup with clear intent and ARIA compliance. +==== diff --git a/modules/ROOT/partials/a11y-rules/i2.adoc b/modules/ROOT/partials/a11y-rules/i2.adoc new file mode 100644 index 0000000000..06467ba1a1 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/i2.adoc @@ -0,0 +1,63 @@ +[[I2]] +==== I2 - Missing `+alt+` attribute + +*Rule description:* this rule checks that all `` elements include an `+alt+` attribute, even if other accessible name properties like `+aria-label+`, `+aria-labelledby+`, or `+title+` are present. The `+alt+` attribute is required for all images, and informative images must have at least one meaningful text alternative. + +===== {pluginname} rule details - I2 + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/failures/F65.html[F65 - Failure of Success Criterion 1.1.1 due to omitting the alt attribute on `+img+` elements]. + +include::partial$misc/admon-accessibility-rule-i3-can-also-be-applied.adoc[] + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + + + + + + + + + + + +---- + +These examples fail because they're missing the required `+alt+` attribute. Note: Images with no attributes at all trigger rule I1 for incomplete intent, not I2. + +.Compliant examples + +[source,html] +---- + +Red coffee mug + + + + + +Sales performance chart +

Detailed breakdown of Q3 sales performance...

+ + +Settings +---- + +These examples all include the required `+alt+` attribute and provide meaningful text alternatives for informative images. +==== \ No newline at end of file diff --git a/modules/ROOT/partials/a11y-rules/i3.adoc b/modules/ROOT/partials/a11y-rules/i3.adoc new file mode 100644 index 0000000000..b7bb2b1446 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/i3.adoc @@ -0,0 +1,56 @@ +[[I3]] +==== I3 - Filename used as `+alt+` text + +*Rule description:* this rule checks that the `+alt+` attribute does not use a filename (e.g., `+photo.jpg+`) as a substitute for meaningful image description. Filenames like "IMG_1234.jpg" or "photo.png" don't help users understand the image content. + +===== {pluginname} rule details - I3 + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/general/G95.html[G95 - Providing short text alternatives that provide a brief description of the non-text content]. + +include::partial$misc/admon-accessibility-rule-i3-can-also-be-applied.adoc[] + +.Examples +[%collapsible] +==== +.Non-compliant examples +[source,html] +---- + +sunset.jpg + + +photo + + +DSC_0123.jpg + + +john-smith.png +---- + +These examples use filenames as alt text, which provides no meaningful information about the image content. + +.Compliant examples +[source,html] +---- + +Vibrant orange sunset over ocean waves + + +Team celebrating product launch + + +Students collaborating in the library + + +John Smith, Senior Developer +---- + +These examples use descriptive alt text that explains what the image shows or represents. +==== diff --git a/modules/ROOT/partials/a11y-rules/i4.adoc b/modules/ROOT/partials/a11y-rules/i4.adoc new file mode 100644 index 0000000000..c879925ef7 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/i4.adoc @@ -0,0 +1,46 @@ +[[I4]] +==== I4 - Overly long `+alt+` text + +*Rule description:* this rule checks for `+alt+` text that exceeds the configured character limit (default: 150 characters). Long descriptions can be difficult for screen reader users to process. Complex images might need detailed descriptions in the surrounding text instead, though some images may require longer descriptions to be fully understood. + +===== {pluginname} rule details - I4 + +Notification level (severity):: Warning + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: N/A + +.Examples +[%collapsible] +==== +.Non-compliant examples +[source,html] +---- +Our modern office space features an open floor plan with collaborative workstations, standing desks, and multiple meeting rooms. The space is brightly lit with natural light from floor-to-ceiling windows, and includes a fully stocked kitchen area, relaxation zone with comfortable seating, and a game room with ping pong tables and video games for employee breaks. + +Bar graph showing monthly sales data for the past year, with blue bars representing domestic sales and red bars representing international sales, demonstrating a steady increase in both markets with particular growth in Q3 and Q4, reaching peak sales in December. +---- + +These examples use overly detailed alt text that may overwhelm screen reader users with too much information at once. + +.Compliant examples +[source,html] +---- +Modern open-plan office with collaborative spaces +

Our office features collaborative workstations, standing desks, and meeting rooms, complemented by natural lighting, a kitchen area, and recreational spaces including a game room.

+ +Monthly sales growth chart for domestic and international markets +

The bar graph shows steady growth in both domestic (blue) and international (red) sales throughout the year, with significant increases in Q3 and Q4, peaking in December.

+---- + +These examples use concise alt text with additional details provided in the surrounding content. +==== diff --git a/modules/ROOT/partials/a11y-rules/t1.adoc b/modules/ROOT/partials/a11y-rules/t1.adoc new file mode 100644 index 0000000000..4f8df561a8 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/t1.adoc @@ -0,0 +1,80 @@ +[[T1]] +==== T1 - Table caption + +*Rule description:* this rule checks that all `+table+` elements have a `+caption+` element describing the data inside the table to simplify parsing and navigation of the content for users of assistive technologies. + +===== {pluginname} rule details - T1 + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html[H39 - Using caption elements to associate data table captions with data tables]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + + + + + + + + + + +
ProductPrice
Widget A$10.00
+ + +

Product Pricing Table

+ + + + + + +
ProductPrice
+---- + +These examples lack proper caption elements, making it harder for screen reader users to understand the table's purpose. + +.Compliant examples + +[source,html] +---- + + + + + + + + + + + +
Product Pricing
ProductPrice
Widget A$10.00
+ + + + + + + + + + + + +
2023 Quarterly Sales by Region (in thousands USD)
RegionQ1Q2Q3Q4
+---- + +These examples include proper caption elements that describe the table's contents and purpose. +==== diff --git a/modules/ROOT/partials/a11y-rules/t2.adoc b/modules/ROOT/partials/a11y-rules/t2.adoc new file mode 100644 index 0000000000..c190a56411 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/t2.adoc @@ -0,0 +1,83 @@ +[[T2]] +==== T2 - Complex table summary + +*Rule description:* this rule checks that all complex tables must have a `+summary+` attribute explaining to users of assistive technologies how to navigate through the data inside of the table. + +[NOTE] +==== +This rule only applies to HTML 4 content and is not checked when `+a11ychecker_html_version+` is set to `+html5+`. +==== + +===== {pluginname} rule details - T2 + +Notification level (severity):: Warning + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html[H73 - Using the summary attribute of the table element to give an overview of data tables]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + + + + + + + + + + + + + + + +
Employee Performance Review Scores
DepartmentQ1 2023Q2 2023
AverageRangeAverageRange
+ + + + + +
Employee Performance Review Scores
+---- + +These examples either lack a summary or provide one that doesn't explain the table's structure. + +.Compliant examples + +[source,html] +---- + + + + + + + + + + + + + + + +
Employee Performance Review Scores
DepartmentQ1 2023Q2 2023
AverageRangeAverageRange
+ + + + + +
2023 Product Sales by Month
+---- + +These examples include summaries that explain the table's structure and how to navigate it. +==== diff --git a/modules/ROOT/partials/a11y-rules/t3.adoc b/modules/ROOT/partials/a11y-rules/t3.adoc new file mode 100644 index 0000000000..37a08e396d --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/t3.adoc @@ -0,0 +1,71 @@ +[[T3]] +==== T3 - Table caption and summary + +*Rule description:* this rule checks that the table caption and summary does not have the same text content. The caption should explain *what* the table is about while the summary should explain *how* to navigate the data inside of the table. + +[NOTE] +==== +The table `+summary+` attribute was deprecated in HTML 5, both the *what* and *how* information should be moved to the table caption. +==== + +===== {pluginname} rule details - T3 + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html[H73 - Using the summary attribute of the table element to give an overview of data tables]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + + + + +
Quarterly Sales Report 2023
+ + + + + +
Quarterly Sales Report 2023
+ + + + + +
Sales Data 2023
+---- + +These examples show redundant or insufficient information in captions and summaries. + +.Compliant examples + +[source,html] +---- + + + + +
2023 Quarterly Sales by Product Category
+ + + + + +
+ 2023 Quarterly Sales by Product Category + (Data organized with product categories in rows and quarters in columns. + Each cell shows revenue and units sold, with totals in the bottom row) +
+---- + +These examples show proper differentiation between what the table contains and how to navigate it. +==== diff --git a/modules/ROOT/partials/a11y-rules/t4a.adoc b/modules/ROOT/partials/a11y-rules/t4a.adoc new file mode 100644 index 0000000000..e8be7ee1f3 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/t4a.adoc @@ -0,0 +1,93 @@ +[[T4A]] +==== T4A - Table markup + +*Rule description:* this rule checks that all `+tables+` contain both `+tr+` and `+td+` elements. + +===== {pluginname} rule details - T4A + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html[H51 - Using table markup to present tabular information]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + + + Content without rows or cells +
+ + + +
Row 1, Cell 1
+
Row 1, Cell 2
+
Row 2, Cell 1
+
Row 2, Cell 2
+
+ + + +

Header 1

+

Header 2

+

Data 1

+

Data 2

+
+---- + +These examples lack proper table structure with rows and cells, making them inaccessible to screen readers. + +.Compliant examples + +[source,html] +---- + + + + + + + + + + +
Row 1, Cell 1Row 1, Cell 2
Row 2, Cell 1Row 2, Cell 2
+ + + + + + + + + + + +
Header 1Header 2
Data 1Data 2
+ + + + + + + + + + + + + + + +
Column 1Column 2
Data 1Data 2
+---- + +These examples use proper table markup with rows and cells, ensuring accessibility. +==== diff --git a/modules/ROOT/partials/a11y-rules/t4b.adoc b/modules/ROOT/partials/a11y-rules/t4b.adoc new file mode 100644 index 0000000000..1a93b2c608 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/t4b.adoc @@ -0,0 +1,113 @@ +[[T4B]] +==== T4B - Table headers + +*Rule description:* this rule checks that all `+table+` elements contain at least one table header (`+th+`) element. + +===== {pluginname} rule details - T4B + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html[H51 - Using table markup to present tabular information]. + +.Examples +[%collapsible] +==== +.Non-compliant examples + +[source,html] +---- + + + + + + + + + + +
ProductPrice
Widget$10.00
+ + + + + + + + + + + +
NamePosition
John SmithDeveloper
+---- + +These examples lack proper header cells, making it difficult for screen readers to understand the table's structure. + +.Compliant examples + +[source,html] +---- + + + + + + + + + + +
ProductPrice
Widget$10.00
+ + + + + + + + + + + + + + + + + + +
QuarterRevenueGrowth
Q1$10,0005%
Q2$15,00050%
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Product20232024
Q1Q2Q1Q2
Widget A100150200250
+---- + +These examples demonstrate proper use of table headers for different levels of complexity. +==== diff --git a/modules/ROOT/partials/a11y-rules/t4c.adoc b/modules/ROOT/partials/a11y-rules/t4c.adoc new file mode 100644 index 0000000000..31e4e33289 --- /dev/null +++ b/modules/ROOT/partials/a11y-rules/t4c.adoc @@ -0,0 +1,97 @@ +[[T4C]] +==== T4C - Table heading scope + +*Rule description:* this rule checks that all table header (`+th+`) elements have a `+scope+` attribute clarifying what scope the heading has inside of the `+table+`. The allowed values are `+row+`, `+col+`, `+rowgroup+`, and `+colgroup+`. This is important for users of assistive technologies to be able to parse table data. + +==== {pluginname} rule details - T4C + +Notification level (severity):: Error + +https://www.w3.org/TR/WCAG21/#conformance[WCAG level]:: Level A ; Level AA ; Level AAA + +xref:a11ychecker_html_version[HTML version]:: HTML4 and HTML5 + +WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H63.html[H63 - Using the scope attribute to associate header cells and data cells in data tables]. + +.Examples +[%collapsible] +==== +.Non-compliant examples +[source,html] +---- + + + + + + + + + + + + +
ProductQ1Q2
Widget A100150
+ + + + + + + + + + + +
NameDepartment
John SmithEngineering
+---- + +These examples either lack scope attributes or use them incorrectly. + +.Compliant examples +[source,html] +---- + + + + + + + + + + + + +
ProductQ1Q2
Widget A100150
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Department20232024
BudgetActualBudgetForecast
Engineering
Development100K95K120K125K
+---- + +These examples demonstrate proper use of scope attributes for different table structures. +==== diff --git a/modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc b/modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc index 1273b98df0..c669276576 100644 --- a/modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc +++ b/modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc @@ -1,23 +1,45 @@ [[a11ychecker_allow_decorative_images]] == `+a11ychecker_allow_decorative_images+` -This option sets whether the Accessibility Checker should allow decorative images. When this option is set to `+true+`, a decorative image must have *both*: +This option determines whether the Accessibility Checker should allow decorative images. Decorative images are those that are used purely for visual enhancement and do not convey meaningful content or serve a specific function. -* An empty alternative text attribute. -* The `+role="presentation"+` attribute. +When this option is set to `+true+`, decorative images must have *both*: -For example: +* An empty alternative text attribute (`+alt=""+`). +* and the `+role="presentation"+` attribute. + +This combination explicitly tells assistive technologies to ignore these images, improving the browsing experience for users of screen readers. + +=== Common Use Cases for Decorative Images + +* Background patterns or textures +* Aesthetic borders or dividers +* Purely decorative icons that repeat nearby text +* Images that are described by adjacent text content +* Spacer images used for layout purposes + +=== Example of a Decorative Image: + +[source,html] +---- + +---- + +=== Example of an Informative Image (non-decorative): [source,html] ---- - +Company Name Logo ---- +=== Validation Rules + If `+a11ychecker_allow_decorative_images+` is set to `+true+`, the Accessibility Checker will present an error when: * An image does not have the alternative text attribute (`+alt+`). -* An image has an empty alternative text attribute, but is missing the `+role="presentation"+` attribute. +* An image has an empty alternative text attribute but is missing the `+role="presentation"+` attribute. * An image has alternative text and a conflicting `+role="presentation"+` attribute. +* A potentially meaningful image (like a logo or chart) is marked as decorative. If `+a11ychecker_allow_decorative_images+` is set to `+false+`, the Accessibility Checker will present an error when: @@ -32,7 +54,7 @@ If `+a11ychecker_allow_decorative_images+` is not explicitly set, the value defi *Type:* `+Boolean+` -*Default value:* `+false+` +*Default value:* `+true+` *Possible values:* `+true+`, `+false+` diff --git a/modules/ROOT/partials/configuration/a11ychecker_alt_text_max_length.adoc b/modules/ROOT/partials/configuration/a11ychecker_alt_text_max_length.adoc new file mode 100644 index 0000000000..4b27820e55 --- /dev/null +++ b/modules/ROOT/partials/configuration/a11ychecker_alt_text_max_length.adoc @@ -0,0 +1,20 @@ +[[a11ychecker_alt_text_max_length]] +== `+a11ychecker_alt_text_max_length+` + +This option sets the maximum length for image alternative text before triggering a warning. + +*Type:* `+Number+` + +*Default value:* `+150+` + +*Example:* + +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'a11ychecker', + toolbar: 'a11ycheck', + a11ychecker_alt_text_max_length: 200 // Allow longer descriptions if needed +}); +----