Fabian Holzer

Small things matter for accessibility

Can you spot the difference between bold, strong and a span with an font-weight bold? How about the difference between italic, emphasized and a span with font-style italic? If you do, you most likely either have opened your browsers' developer tools or you are using a screen-reader.

A colleague of mine recently reviewed a part of a UI component library I worked on with regard to accessibility. He found a line where I used a <b> tag instead of a <strong> tag and rightfully remarked that I'd better use sematic tags.

After the review, I thought about the reason I came up with the non-semantic markup in the first place. The component was developed against a designers' mockup, and when I derived the markup I translated the visual design in my head to the idea, that this part should be formatted bold, from that my mnemonic association I went straight to the <b> tag.

Satisfying a specification from a mere typographical point of view is not enough. What makes no difference for visually unimpaired people very much matters for users of assistive technologies.