Posts in category: "html"

Creating An Accessible Modal Dialog

Modal Dialogs are a tricky thing to make accessible. For visual users navigating with a mouse, creating a dialog is as simple as styling the element to look visually different from the rest of the page. However, users navigating a site via a keyboard and/or screenreader need a lot...

Anchors vs Buttons

For the longest time, web developers (myself included) have been using <a>s, <div>s, <span>s, and everything but <button>s to create interactive clickable elements. It would typically go something like this - <a href="#" role="button" onclick="openMenuModal(...

A Gulp Workflow for Building HTML Email

Every week when I publish a new article to this site, I use MailChimp to send out an rss-based newsletter with the latest article to people subscribed. I designed and built the template for this newsletter and, as you would expect, it was quite a process. I was initially using...

The Problem with iOS Safari and shrink-to-fit

For a long time, the standard viewport meta tag went like this - <meta name="viewport" content="width=device-width, initial-scale=1"> However, since iOS Safari 9.0 was introduced in September last year, a new additional value is now needed for most responsive websites, making this the new...

Responsive Images - The srcset and sizes Attributes

In the responsive web design revolution, images are one thing that have seemingly lagged behind. Until relatively recently, serving different images based on screen size or pixel density was not something that was done at all.  The <picture> element shows a lot of promise in changing this. But...