[Content] Duplicate heading text used for callout blocks

[coseeian]

Title

[Content] Duplicate heading text used for callout blocks

Description

Descriptive headings and titles give users an overview of content and its structure, identifying each section in relation to the page as a whole and to other sections—helping users quickly find what they need and stay oriented. However, callout blocks (such as “Tip” and “Note”) shouldn’t be used as headings, since they simply repeat identical text without adding unique context. This repetition undermines the very purpose of headings, which is to provide clear, distinct labels that aid navigation and comprehension. Instead, these callouts

Steps to Reproduce

1. go to a tutorial page containing callout blocks (e.g., /tutorials/get-started/).
2. Locate each “Tip” or “Note” section.
3. Inspect the headings and observe that they all use the identical text “Tip” or “Note,” offering no additional context.

for example:

page 1

1. Go to /tutorials/get-started/.
2. Locate to the following element:

• Position 1: h5 element "Tip" in Step 2 section
• Position 2: h4 element "Tip" in Step 4 section
• Position 3: h5 element "Note" in Step 5 section
• Position 4: h5 element "Note" in Step 6 section
• Position 5: h5 element "Tip" in Step 6 section
• Position 6: h5 element "Note" in Step 7 section
• Position 7: h5 element "Note" in Step 8 section

page 2

1. Go to /tutorials/variables-and-change/.
2. Locate to the following element:

• Position 1: h5 element "Tip" in Step 1 section
• Position 2: h5 element "Tip" in Step 1 section
• Position 3: h5 element "Note" in Step 1 section

page 3

1. Go to /tutorials/organizing-code-with-functions/.
2. Locate to the following element:

• Position 1: h5 element "Try this!" in step 4 section
• Position 2: h5 element "Try this!" in step 5 section
• Position 3: h5 element "Try this!" in step 6 section
• Position 4: h5 element "Try this!" in Conclusion section
• Position 5: h5 element "Or Try This Spicy Challenge!" in Conclusion section

page 4

1. Go to /tutorials/repeating-with-loops/.
2. Locate to the following element:

• Position 1: h5 element "Try this!" in step 3 section
• Position 2: h5 element "Try this!" in step 6 section

page 5

1. Go to /data-structure-garden/.
2. Locate to the following element:

• Position 1: h5 element "Try this!" in step 2 section
• Position 2: h5 element "Try this!" in step 3 section
• Position 3: h5 element "Try this!" in step 4 section
• Position 4: h5 element "Try this!" in step 6 section
• Position 5: h5 element "Try this!" in step 7 section
• Position 6: h5 element "Try this!" in step 8 section

page 6

1. Go to /tutorials/animating-with-media-objects/.
2. Locate to the following element:

• Position 1: h5 element "Note" in step 2 section
• Position 2: h5 element "Tip" in step 3 section
• Position 3: h5 element "Try this!" in step 4 section
• Position 4: h5 element "Tip" in step 5 section
• Position 5: h5 element "Try this!" in step 7 section
• Position 6: h5 element "Try this!" in step 8 section

Actual Behavior

All callout sections use the same heading text (“Tip” or “Note”) multiple times, resulting in non-descriptive, duplicate headings in the document outline.

Expected Behavior

• Callouts should be marked up as regions or groups with accessible labels rather than as headings.
• Heading elements should be reserved for structural sections of the page, with unique, descriptive text that reflects the content that follows.

Environments

No response

Suggested Fix

Replace generic callout headings with labeled regions or more specific heading text. For example:

<section aria-label="Tip">
  <!-- Tip content -->
</section>

<section aria-label="Note">
  <!-- Note content -->
</section>

This approach provides descriptive labels for each section without relying on duplicate heading elements.

Reference

ARIA: group role

What is your operating system?

None

Web browser and version

No response

[reshma045]

@coseeian I'd like to work on this issue. Can you assign it to me?