How do I have screen readers output different text than what is displayed visually?

Question

I'm creating a nav bar for my portfolio site. I have in my header a link tag with the initial of my first name as text. I am using this link as a way to link back to my index page or to take you back to the top of the page.

While my webpage functions as intended, my worry is that a screen reader user would not find this link as user-friendly.

Is there a way for my code to allow this link to display my initial visually while the screen reader would read out 'home'?

 <header>
 <a href="index.html">J</a>
 <nav>
 <li>
 <a>About</a>
 </li>
 <li>
 <a>Portfolio</a>
 </li>
 <li>
 <a>Resume</a>
 </li>
 <li>
 <a>Contact</a>
 </li>
 </nav> 
</header>

Answer 1

While this is easily achieve by means of aria-label, you should not do this. A lot of screen reader users are sighted, and would be irritated by text that is being read out that is not visible on the screen.

Users of voice control software would not know how to tell their software to click on the logo.

Understanding 2.5.3 Label in Name of the Web Content Accessibility Guidelines (WCAG) explains this in more detail.

The (probably big) letter J could be considered a logo, and WebAIM provides some guidance on alternative texts for logos:

[...] it is usually not necessary to indicate that the image links to the home page (alt="Acme Company home page") because this is a common convention—hearing "Link, Graphic, Acme Company" at the top of a web page is sufficient for a screen reader user to know that it is a logo linked to the home page.

So my recommendation would be to declare the J as a graphic, and provide your full name as the accessible text. This would suffice for 2.5.3.

 <a href="index.html"><span role="img" aria-label="Jake Arnett">J</span></a>

Answer 2

use

aria-label="my text"

http://web-accessibility.carnegiemuseums.org/foundations/aria/