Accessibility Tip: Empty alt Attributes
As mostly a self-taught developer, my impressions of best practices were self-formed, and over the years I've realized many of those impressions were incorrect or the standards associated with them had quickly changed. One small but important practice is the usage of
alt attributes on
img tags, and I had thought you should set an
alt attributes on all images within the page. Little did I know that isn't the case.
<!-- BAD: image URL will be read out --> <img src="/wp-content/themes/punky/images/logo.png"> <!-- BAD: adding useless cruft alt --> <img src="/wp-content/themes/punky/images/logo.png" alt="Logo"> <!-- GOOD: empty alt is silent --> <img src="/wp-content/themes/punky/images/logo.png" alt="">
Images with only visual value should have an empty
alt attribute set on them. Omitting the
alt attribute makes most screen readers read out the entire image URL and providing an
alt attribute when the image is for visual purposes only is just as useless.
You can't blame young developers for not knowing this or any other accessibility related topic -- accessibility (and usability for that matter) aren't topics taught at most universities. Let's be honest -- most developers are excited their stuff works; accessibility and usability are just added bonuses. Well, now you have no excuse to not use
alt attributes correctly!