Building accessible Blazor WASM apps ensures your application is usable by people with disabilities and improves usability for everyone.

Semantic HTML

• Use proper heading hierarchy: <h1> → <h2> → <h3>
• Use <nav>, <main>, <section>, <article> landmarks
• Use <button> for actions, <a> for navigation
• Never use <div @onclick> as a button — inaccessible by keyboard

ARIA Attributes

• aria-label — names an element for screen readers
• aria-describedby — links an element to its description
• aria-live — announces dynamic content updates

Focus Management

• After a modal opens, focus should move to the first focusable element inside it
• After a modal closes, focus returns to the element that opened it
• Use ElementReference.FocusAsync() to manage focus programmatically

Color Contrast

Ensure all text meets WCAG 2.1 contrast ratios: 4.5:1 for normal text, 3:1 for large text.

Reference:

Wikipedia: Web Accessibility

https://en.wikipedia.org/wiki/Web_accessibility