a11yTips — Rely on CSS and not images of text to present…

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 [...]

Read article at dboudreau.tumblr.com

Article Taxonomies

Categories: