{}
Learn web design and development
Free interactive courses
← Back to JavaScript
29

Accessibility in DOM interactions with JavaScript

Build interactive components that work well with keyboard navigation, screen readers and correct focus management.

How much do you know about JavaScript?

📘 Theory

Focus and keyboard are not optional

Every interactive component should work without a mouse.

If a button opens a panel or modal, focus should move to a useful place. When the component closes, focus should return to the trigger.

Avoid clickable `div` elements for primary actions when a native `button` or `a` element would already provide better semantics.

  • Move focus intentionally when opening and closing overlays.
  • Support Enter and Space in custom controls.
  • Do not remove the visible focus ring without replacing it with an equally clear indicator.

Keep visual state and ARIA state in sync

If the UI changes, assistive technology should receive that same truth.

1

A collapsed or expanded panel should communicate its state not only visually but also through attributes such as `aria-expanded` and `hidden`.

2

ARIA should reinforce correct semantics, not patch fundamentally wrong HTML.

Frequent JavaScript mistakes that break accessibility

These bugs are common, but they are also very avoidable.

1

A modal that opens without moving focus leaves keyboard users lost. A modal that closes without restoring focus makes navigation harder than it should be.

2

Global key handlers can also become harmful if they hijack normal keyboard behavior without a real reason.

🧪 Learn by doing

Example Guided example: an accessible expandable button Control a panel through `aria-expanded` and `hidden`.
⌄

🏁 Challenges

Challenge Challenge: close a component with Escape Add keyboard behavior so a panel or modal can close when the user presses Escape.
⌄

🧰 Resources

Useful links

WAI-ARIA Authoring Practices MDN: Keyboard accessible widgets
Test

Check your knowledge with a test about JavaScript.

Test for JavaScript
Course resources 62
📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets
‹
Lesson 28
DOM performance: avoid reflows and unnecessary work
Lesson 30
Canvas 2D with JavaScript: draw data on a surface
›

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com