如何实现导航栏链接视觉显示与屏幕阅读器朗读内容不同？

完全可以实现，这里提供两种靠谱方案，同时修正你代码里的HTML规范问题：

方案1：使用aria-label属性（最简单直接） #

给<a>标签添加aria-label="Home"属性，屏幕阅读器会优先读取这个属性值，视觉上依然显示“J”。修改后的代码如下：

<header>
    <a href="index.html" aria-label="Home">J</a>
    <nav>
        <ul> <!-- 修正：li必须包裹在ul/ol标签内 -->
            <li>
                <a href="#">About</a> <!-- 补充：建议给导航链接加上href属性 -->
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Resume</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>       
</header>

方案2：使用视觉隐藏的辅助文本（兼顾搜索引擎） #

如果你希望搜索引擎也能识别链接的“Home”含义，可以在<a>标签内添加一段视觉隐藏的文本，通过CSS隐藏它：

HTML代码： #

<header>
    <a href="index.html">
        J
        <span class="sr-only">Home</span>
    </a>
    <nav>
        <ul>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Resume</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>       
</header>

CSS代码： #

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

这段CSS是W3C推荐的视觉隐藏样式，能让文本在视觉上完全不可见，但屏幕阅读器和搜索引擎依然能读取到。

额外提醒 #

你的原代码直接在<nav>下放置<li>不符合HTML规范，<li>必须嵌套在<ul>或<ol>标签内，上面的方案已修正该问题；同时建议给导航里的<a>标签补充href属性，保证功能完整。

内容的提问来源于stack exchange，提问作者Jake Arnett