Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Web Accessibility) expand_more

Semantics & Landmarks

Document language Heading hierarchy Main landmark Navigation landmark Complementary landmark Contentinfo landmark Search landmark Region landmark Skip links Landmark labeling

Accessible Names

Image alt text Decorative images Button accessible names Link purpose Form label association aria-label aria-labelledby aria-describedby Accessible name precedence Name-role-value

Keyboard & Focus

Native keyboard support Logical tab order Visible focus indicator Focus trapping Focus restoration Skip repetitive content Roving tabindex tabindex zero Negative tabindex Avoid positive tabindex

Forms & Validation

Required fields Fieldset and legend Autocomplete tokens Input purpose Inline validation errors Error summary aria-invalid aria-errormessage Instructions before input Accessible success feedback

ARIA Patterns

aria-expanded aria-controls aria-current aria-live aria-busy aria-hidden aria-pressed aria-selected aria-modal Disclosure pattern

Media & Visuals

Captions Audio transcripts Audio descriptions Color contrast Non-color cues Text resize Reflow Reduced motion High contrast support Accessible SVG

Tables & Dynamic UI

Table headers Scope attribute Caption element Complex table headers Sortable table state Dialog focus Tabs pattern Accordion pattern Status messages Live region politeness

Testing & WCAG

Keyboard-only testing Screen reader smoke test Zoom 200 percent Reflow at 320 CSS px Contrast testing Focus order review Accessible name inspection Automated axe scan Manual WCAG review Regression accessibility tests

Web Accessibility / Tables & Dynamic UI

Dialog focus

Learn Dialog focus in Accessibility with a dedicated explanation, topic-specific example, edge guidance, and mastery check.

12 min read • Advanced

web-accessibility-066.html

html

const dialog=document.querySelector("dialog"); const trigger=document.querySelector("#open"); trigger.onclick=()=>dialog.showModal(); dialog.addEventListener("close",()=>trigger.focus());

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Dialog focus Mastery Check →

Sortable table state