Examples

✗ Bad example

In this example, the asterisk is placed next to the text input. It has no connection to the input, so it will not be read aloud when the input is focused, and the screen-reader user would have no idea that it was required. If it were read, it would be read as “asterisk,” even though it should be read as “required.”

<label for="email">Your email</label>
<input type="text" id="email" /> <span>*</span>

✗ Bad example

In this example, the asterisk is inside the label, so it is announced. However, “asterisk” or “star” does not clearly convey that the field is required.

<label for="email">Your email *</label>
<input type="text" id="email" />

✓ Good example

In this example, the aria-required attribute is placed on the form field itself, meaning that “required” will be read when the control has focus. In addition, the redundant “star” is hidden from screen readers by placing it inside a <span> with aria-hidden="true". Content in a DOM tree with an aria-hidden="true" attribute is ignored by screen readers.

<label for="email">Your email <span aria-hidden="true">*</span></label>
<input type="text" id="email" aria-required="true" />

This information is now available to screen readers whenever the field is focused. For example, VoiceOver (macOS) will read, “Your email, required, edit text.”

Example

Consider the following image of a navigation menu. The active (current page) link is differentiated with a green background.

The differentiation is quite clear if you can perceive all colors, but if you have trouble telling the difference between colors, you have to rely on the difference in shade alone. In this case, that difference is very subtle and might be missed:

So it's important to use an additional means to differentiate the "active" link. One way would be to provide an additional underline:

.active {
  background: #5fd35f;
  text-decoration: underline;
}

With that, there is a supplementary way to differentiate the links. This visual information will also need to be available to people using High Contrast Mode to view web pages or those who apply a custom style sheet to make text easier to read.

Accessibility for screen reader users

Screen-reader users will not be aware of any change in visual design because information about visual appearance is not conveyed by screen readers. So we also need to non-visually indicate that our  .active 

link represents the current page.

One robust and well-supported way to do this is by including some text that is hidden from view but available to screen readers:

<li>
  <a href="/about">about <span class="vh">(the current page)</span></a>
</li>

The vh (“visually hidden”) class would call CSS that removes the content from view but does not also hide it from assistive technologies.

This CSS code can be used to apply this styling:

.vh {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}