CODEWITHSUNDEEP
accessibilityscreen-readers
Dusten Lee Harward
Dusten Lee Harward

Reputation: 25

Add a note for the screen reader to tell the customer

Basically I have a client that needs us to add some information to their website that will basically add a note in the code that the accessibility reader can say something like:

If you need assistance viewing this website please call (Insert Phone Number here).

This note does not need to display on the front end of the website if they are just browsing normally without a accessibility reader.

Is this possible? Is there something like a meta tag that we can add to the site?

Upvotes: 0

Views: 150

Answers (3)

Adam
Adam

Reputation: 18807

There is no such common thing as an "accessibility reader".

You might be thinking about a "screen reader", but there is a small part of population using those tools, and they do not give any benefit to people with low vision, using for instance a screen magnifier or some other specific tool (enhanced contrast, ...), nor they give any benefit to people with auditive, cognitive, or musculoskeletal disorders.

The assumption that only blind people using a screen reader need to have assistance is the first problem in designing accessible websites.

Having a content not accessible to non-blind people is also discrimination.

Now, if you really still want a note designed specifically for screen reader users, use aria-label. Do not use any CSS trick.

Upvotes: 0

aardrian
aardrian

Reputation: 9009

Consider that keyboard users may benefit from this as well. To that end, there are plenty of "skip nav" or "jump to content" patterns that may do what you want, including ones friendly to keyboard users.

I made a CodePen example of a keyboard-friendly skip nav, but here is the code...

HTML

<a href="#Skip">Skip Navigation</a>

<main id="Skip">
  <h1>The Page Is About This</h1>
  <p>
    This is some page content
  </p>
</main>

CSS

a[href="#Skip"] {
  display: block;
  color: #fff;
  background: #000;
  margin: 0;
  padding: .5em 1em;
  font-weight: bold;
}

a[href="#Skip"]:link,
a[href="#Skip"]:visited {
  color: #fff;
  text-decoration: none;
}

@media screen and (min-width: 62em) {
  a[href="#Skip"] {
    position: absolute;
    left: -1000px;
    z-index: 2;
  }
  a[href="#Skip"]:active,
  a[href="#Skip"]:focus,
  a[href="#Skip"]:hover {
    display: block;
    top: 0;
    left: 0;
  }
}

In your case you could just change the link to a phone number:

<a href="tel:888-888-8888" id="a11yCall">Call us if you...</a>

And key your CSS off that href or a class or id attribute:

a#a11yCall { ... }

Upvotes: 2

halna fr&#233;d&#233;ric
halna fr&#233;d&#233;ric

Reputation: 238

Just hide the text at the top level with a position:fixed and left:-9000px. It should be read but not visible.

Just few words. Accessibility isn't only for the blind people !

Upvotes: 0

Related Questions