如何让屏幕阅读器输出与视觉显示不同的文本？

Question

我正在为我的投资组合网站创建一个导航栏。我的标题中有一个链接标签，以我名字的首字母作为文本。我使用此链接作为链接回我的索引页或带您回到页面的顶部。

虽然我的网页功能如预期，但我担心的是，屏幕阅读器用户不会发现这个链接是用户友好的。

有什么方法可以让我的代码在屏幕阅读器读出'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

使用

aria-label="my text"

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

Answer 2

虽然这很容易通过aria-label实现，但您不应该这样做。许多屏幕阅读器用户都会被屏幕上看不见的文本所激怒。

语音控制软件的用户不会知道如何告诉他们的软件点击徽标。

“网络内容可访问性指南”( 理解2.5.3标签的名称 )更详细地解释了这一点。

字母J(可能很大)可以被认为是一个标志，而WebAIM提供了一些关于标识的替代文本的指导。

…通常不需要显示到主页的图像链接(alt="Acme主页“)，因为这是一个常见的约定--在网页顶部听"Link，Graphic，Acme”足以让屏幕阅读器用户知道它是链接到主页的徽标。

所以我的建议是将J声明为图形，并提供您的全名作为可访问的文本。这足以应付2.5.3。

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