diff --git a/src/assessments/semantics/test-steps/emphasis.tsx b/src/assessments/semantics/test-steps/emphasis.tsx index 25422d699c4..e5ad6983a51 100644 --- a/src/assessments/semantics/test-steps/emphasis.tsx +++ b/src/assessments/semantics/test-steps/emphasis.tsx @@ -19,10 +19,16 @@ const emphasisHowToTest: JSX.Element = (

This procedure uses the browser Developer Tools (F12) to inspect the page's HTML.

    -
  1. Examine the target page to identify any visually emphasized words or phrases.
  2. - Inspect the HTML for each emphasized word or phrase to verify that it's contained in - an or element. + Examine the target page to identify any visually emphasized words or phrases that + convey semantic emphasis or importance. Note: Bold or italic text used purely for + visual design, layout, or separation (such as labels, section identifiers, or visual + hierarchy) may not require semantic markup unless it conveys emphasis or importance. +
    3. +
  3. + Inspect the HTML for each semantically emphasized word or phrase to verify that it's + contained in an or {' '} + element.
diff --git a/src/content/test/semantics/emphasis.tsx b/src/content/test/semantics/emphasis.tsx index d4c3d58f61c..713b39bb998 100644 --- a/src/content/test/semantics/emphasis.tsx +++ b/src/content/test/semantics/emphasis.tsx @@ -4,16 +4,24 @@ import { create, React } from '../../common'; export const infoAndExamples = create(({ Markup, Link }) => ( <> -

Words and phrases that are visually emphasized must be contained within semantically correct elements.

+

+ Words and phrases that are visually emphasized to convey semantic meaning or importance commonly should be contained within + semantically correct elements. +

Why it matters

People with good vision can infer from visual styling that a word or phrase is especially important. For example, it might be displayed using bold or italic font. Unless the visually emphasized word or phrase is also contained in a semantically correct element, people who use screen readers won't know that it's emphasized.

+

+ However, not all bold or italic text requires semantic markup. Visual variations in font-weight or style used purely for design + purposes, such as distinguishing labels from values or creating visual hierarchy, do not need to be marked up semantically + unless they convey emphasis or importance. +

How to fix

- Contain the emphasized word or phrase in a semantically correct element: + When visual emphasis conveys semantic meaning, contain the emphasized word or phrase in a semantically correct element:

+

+ Do not use {''} or {''} for text that is bold or italic purely + for visual design, such as labels, identifiers, or creating visual separation between parts of a heading. +

@@ -43,6 +55,23 @@ export const infoAndExamples = create(({ Markup, Link }) => ( } passExample={`

These carrots are []not[] crunchy!

`} /> + + The bold SKU in this heading is purely for visual styling, not to convey emphasis. Using{' '} + {''} here is unnecessary since the heading already provides semantic importance. +

+ } + failExample={`

[]SKU a8090:[] Product Name

`} + passText={

Without the unnecessary strong element, the heading correctly conveys the content's importance.

} + passExample={`

SKU a8090: Product Name

`} + /> + The italic separators in this breadcrumb are being used for styling purposes, not to convey emphasis.

} + failExample={``} + passText={

Using a span for the separator correctly indicates it's for visual presentation only.

} + passExample={``} + />

More examples

WCAG success criteria

diff --git a/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap b/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap index 5cfa68c2d81..83937939fb5 100644 --- a/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap +++ b/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap @@ -29741,7 +29741,7 @@ exports[`Guidance Content pages test/semantics/emphasis/infoAndExamples matches class="content" >

- Words and phrases that are visually emphasized must be contained within semantically correct elements. + Words and phrases that are visually emphasized to convey semantic meaning or importance commonly should be contained within semantically correct elements.

Why it matters @@ -29749,11 +29749,14 @@ exports[`Guidance Content pages test/semantics/emphasis/infoAndExamples matches

People with good vision can infer from visual styling that a word or phrase is especially important. For example, it might be displayed using bold or italic font. Unless the visually emphasized word or phrase is also contained in a semantically correct element, people who use screen readers won't know that it's emphasized.

+

+ However, not all bold or italic text requires semantic markup. Visual variations in font-weight or style used purely for design purposes, such as distinguishing labels from values or creating visual hierarchy, do not need to be marked up semantically unless they convey emphasis or importance. +

How to fix

- Contain the emphasized word or phrase in a semantically correct element: + When visual emphasis conveys semantic meaning, contain the emphasized word or phrase in a semantically correct element:

  • @@ -29776,6 +29779,21 @@ exports[`Guidance Content pages test/semantics/emphasis/infoAndExamples matches

+

+ Do not use + + <strong> + + or + + <em> + + for text that is bold or italic purely for visual design, such as labels, identifiers, or creating visual separation between parts of a heading. +

@@ -29924,6 +29942,284 @@ exports[`Guidance Content pages test/semantics/emphasis/infoAndExamples matches
+
+
+
+ + + + +

+ Fail +

+
+

+ The bold SKU in this heading is purely for visual styling, not to convey emphasis. Using + + <strong> + + here is unnecessary since the heading already provides semantic importance. +

+
+
+
+
+
+ <h2 style="font-weight: normal"> + + <strong> + + SKU a8090: + + </strong> + + Product Name</h2> +
+
+
+
+
+
+ + + + +

+ Pass +

+
+

+ Without the unnecessary strong element, the heading correctly conveys the content's importance. +

+
+
+
+
+
+ <h2>SKU a8090: Product Name</h2> +
+
+
+
+
+
+
+
+ + + + +

+ Fail +

+
+

+ The italic separators in this breadcrumb are being used for styling purposes, not to convey emphasis. +

+
+
+
+
+
+ <nav><a href="/">Home</a> + + <em> + + / + + </em> + + <a href="/about">About</a> + + <em> + + / + + </em> + + Contact</nav> +
+
+
+
+
+
+ + + + +

+ Pass +

+
+

+ Using a span for the separator correctly indicates it's for visual presentation only. +

+
+
+
+
+
+ <nav><a href="/">Home</a> <span class="separator">/</span> <a href="/about">About</a> <span class="separator">/</span> Contact</nav> +
+
+
+
+

More examples