---
title: Building Accessible Modal Dialogs from Scratch
description: Create modal dialogs that trap focus correctly, respond to keyboard events, and communicate state to screen readers.
---

[JF Blog](https://thedeveloper.javierfuentes.cl/blog)

# [Building Accessible Modal Dialogs from Scratch](https://thedeveloper.javierfuentes.cl/blog/building-accessible-modal-dialogs-from-scratch)

 Written by [Maria Lopez](https://thedeveloper.javierfuentes.cl/blog/author/maria-lopez) | Jul 6, 2024 4:00:00 AM

Modals are one of the most commonly broken accessible components. A correct implementation requires a focus trap, Escape key dismissal, aria-modal and role=dialog attributes, and restoring focus to the trigger element on close. This post covers all of it with clean vanilla JS.

[View full post](https://thedeveloper.javierfuentes.cl/blog/building-accessible-modal-dialogs-from-scratch)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Maria Lopez"
  },
  "dateModified" : "2026-06-27T23:14:25.320Z",
  "datePublished" : "2024-07-06T04:00:00Z",
  "headline" : "Building Accessible Modal Dialogs from Scratch",
  "image" : {
    "@type" : "ImageObject",
    "height" : 3456,
    "url" : "https://51152771.fs1.hubspotusercontent-na1.net/hubfs/51152771/Imported_Blog_Media/photo-1555066931-4365d14bab8c-1.jpg",
    "width" : 5184
  },
  "mainEntityOfPage" : "https://thedeveloper.javierfuentes.cl/blog/building-accessible-modal-dialogs-from-scratch",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "JF Blog"
  }
}
```