✎ Technique: Non-text contrast
The contrast of icons and graphical objects is just as important as that of text. Use sufficient contrast for all elements on the screen, with a minimum contrast ratio of 3:1.
The contrast of icons and graphical objects is just as important as that of text. Use sufficient contrast for all elements on the screen, with a minimum contrast ratio of 3:1.
Avoid referring to a button, menu, or other item in the page only by its position on the page; instead, use additional information that describes the content.
Some people understand complex information best when it's presented visually, such as as a chart or diagram, while others find that reading the information suits them better.
When text is presented as an image of text, that limits peoples' ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling.
Color is a powerful visual means of presenting or distinguishing information, but when you use color to identify or distinguish information, make sure that this information is still available to people who can't perceive color.
Icon fonts are a popular and effective method for providing scalable symbols that can be used to label controls and provide graphical information. The information provided by icons also needs to be available to people who can’t see them.
While accessibility for images often focuses on providing a text alternative for screen reader users, we can also look at the issue another way—providing a graphic alternative for text to make the underlying information or concept easier to understand.
Each image requires alternative text that is equivalent to the information it conveys, unless the image is purely decorative and provides no useful information. You need to be careful about what value you give the alt attribute.