CODEWITHSUNDEEP
accessibilityusabilityscreen-readers
Michael Durrant
Michael Durrant

Reputation: 96484

How to add context (not on the page) for screen readers?

For good accessibility, should the text for screen readers be the same text as the web page?

Issue I am pondering: Context may be different for someone who cannot see the item "in context" visually.

For example:

My page has a table with a header row with text "Total : 200"
200 being the number of rows.

I can add aria-label for 'Number of orders is 200' for the screen reader on the actual 200 (it's within a span) so that the screen reader doesn't just say "200".

My question is should the aria label be something more descriptive like 'Total number of records is 200' given the lack of context for the visually impaired user. Or is it OK because they will have their own context from knowing how and why they navigated there, assuming a fairly simple page such as my example where essentially the page is a table of records.

Upvotes: 0

Views: 277

Answers (1)

Ritesh Jagga
Ritesh Jagga

Reputation: 1442

Use caption to describe the table and then there'll be context.

If adding caption adds redundancy of context, like there are already headings to know the context, you may use sr-only CSS class to hide it from the UI but keep it for the screen readers. The below snippet is from the Bootstrap CSS.

// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

Avoid aria attributes if HTML semantic tags serve the purpose.

Upvotes: 1

Related Questions