Rely on CSS and not images of text to present section headings
no. 130
Make sure section headings are set using the CSS font-face property and not images of text
In what now may seem like the old days of web development, web designers who wanted to rely on nice, unusual or catchy fonts to display custom section headings in their pages had no choice but to use images of text, for which they defined, font face, color and size. These images of text conveyed nothing, except for the text itself and required alternative text to be considered accessible. Not only did it require a lot of work to create all those images by hand, but modifying existing images to change the text, or generating new section headings was also a productivity black hole (not to mention alt text value updates, that were often forgotten). Furthermore, users who had low vision were often faced with a situation where text content would increase, but the headings’ sizes remained unchanged. Screen reader users would receive inaccurate information from their assistive technologies. Today, with the advances in CSS and the ability to embed fonts using the font-face property, it’s become much simpler to load up [...]