Creating Accessible HTML5 Modal Dialogs For Desktop and Mobile

March 17th, 2019 by zoltan · No Comments

Accessible modals aren’t hard to make, and you can make your modal dialogs accessible if you keep four simple requirements. Implementing them can be done easily by using the code examples in this blog post, where I use the HTML5 <dialog> polyfill to do so. Read this article, and you can do the same with any modal dialog library/framework that you use today. This post includes a working demo and a video outlining how it works using both mobile and desktop screen readers.

[Read more »]

Tags: accessibility · dialog · HTML5 · modal role · Uncategorized

Accessible Form Placeholder Text

February 20th, 2017 by zoltan · 3 Comments

Placeholder text is used quite a bit in modern HTML5 forms. It is not meant to replace form labels, but is intended to be a hint about the format of what the form field data should take. While checking the accessibility issues on a recent project, I noticed that placeholder text is sometimes indistinguishable with form field values when using certain screen reader/browser combinations. This post talks about how to work around this issue with just a little bit of JavaScript.

[Read more »]

Tags: accessibility · Forms · Uncategorized