Hans Reinl

tl;dr: It's necessary to keep the focus within a dialog while tabbing through it. The function below is the easiest way to implement this behavior in JavaScript. When I created CSS Modal I wanted it to be accessible for screen readers and people that only use the keyboard for navigation. Nicholas Zakas has a great post that helped me a lot with making CSS Modal accessible without too much work. This posts explains a bit about aria roles, how to use tabindex and how you set focus to the element initially and bringing it back where it was before when

In the last couple of months I've worked on several projects that needed an overlay with some content on it. Some front-end frameworks as for example Bootstrap refer to them as modals. You can find a lot of implementations that do exactly what I search for but they all have one major drawback: They rely on JavaScript. Yes, sure, everyone has JavaScript enabled these days but why use a technique that you don't necessarily need for a given problem? Also most implementations have drawbacks when it comes to mobile devices and responsive web design in general or accessibility. Apart from