Component Library
Emphasis
Issue Description
When a sensory characteristic such as text color or font style changes characteristics, that change needs to be conveyed in more than just a visual manner. Instructions provided for understanding and operating content rely solely on sensory characteristics of components such as shape, size, visual location or style, orientation, or sound.
- A font style such as bold <b> or italic <i> tags are used to emphasize meaning, most screen readers will not communicate that visual formatting to nonvisual users.
Recommendation
Set the code/configuration text apart in a way that assistive technology recognize, not just visually with a different font style.
- Consider using "quotation marks" around text that should be announced uniquely among page content, consistently announcing to a wider range or user agents and assistive technology.
- Consider using a <blockquote> to differentiate from normal text, use <code> to display with the user agent's default monospace font, or use <offscreen> to describe the text specifically for assistive technology only, but avoid excessive use.
When a sensory characteristic such as text color or font style changes characteristics, that change needs to be conveyed in more than just a visual manner. Most screen readers will not read bold and italic text formatting.
- The purpose of the strong and emphasis tags / attributes are to communicate strong importance, seriousness, urgency or stress. It is not for communicating changes in typographical presentation that are not important to the meaning of the content. Authors SHOULD use the strong and emphasis tags / attributes only if their absence would change the meaning of the content.