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.

https://help.siteimprove.com/support/solutions/articles/80000448460-accessibility-bold-vs-strong-and-italic-vs-emphasis