Accessible Images

November 28th, 2020

Making a website accessible is not only responsible, it is also a legal requirement. The complexities of modern front-end web development have created a multitude of solutions for design reasons that have eroded accessibility. There's a growing trend of purists online [I count myself among them] who advocate for regular HTML/CSS sites that, due to design considerations are fully accessible if populated correctly, and eschewing modern frameworks that make achieving accessibility more difficult when the framework in question is not a necessity for achieving the goals of the site.

The most common, and easiest thing to consider when making your site friendly is to make sure that all images have appropriate accessible properties, at the very least an ALT tag.

A quick way of highlighting issues on your site is to add the following CSS snippet, and, on modern browsers, it will show you quickly where you may be, at best giving some of your audience a negative experience, or, at worst, doing something illegal by omission. 

img:not([alt]){ box-shadow: 0 0 5px red; }

It should look like the following if there's an issue: