Welcome to Our Site

This is a clean and semantic demo layout using all structural HTML5 tags.

Training: Good vs. Bad Use of aria-hidden="true"

✅ Decorative Icon

This icon adds visual flair but has no semantic meaning, so it's hidden from screen readers.

Correct: Use aria-hidden="true" on non-informative visuals.

✅ Visual Divider

Home About

Correct: Visual-only separators should be hidden from assistive tech.

✅ Background Pattern

Correct: Decorative SVGs without meaning must be hidden with aria-hidden.

❌ Hidden Button

Incorrect: This button is focusable and functional, but screen readers can’t access it. Don’t hide interactive elements.

❌ Hidden Form Label

Incorrect: The label is hidden from screen readers — breaking the form relationship.

❌ Hidden Heading

Incorrect: Screen reader users will miss this important content if it’s hidden.