让我们以开放库列表页面为例。当你访问该页面时，拥有屏幕阅读器的用户会听到的第一件事是"；链接，Mek"；。Mek是用户名。然而，在社交网站的情况下，有人可以选择任何用户名，比如"；借那本书；或者我认为会让使用屏幕阅读器的人迷失方向的东西。
所以，我的问题是，使用类似aria标签的东西来表示它是用户名是否合适，因为页面上没有其他内容？如果没有，使用屏幕阅读器的人是否有其他方法来处理这个问题？
我是A11Y和ARIA的新手，所以也许我在错误的地方寻找答案。我尝试过以多种方式搜索，并阅读了一些文档，如使用aria标签进行链接，以及使用aria标记在无法使用可见标签的地方提供不可见标签。
我还查看了Twitter、Reddit和Facebook等社交网站上的代码，但据我所知，这些网站都没有对用户名做任何特殊的处理。对于主要是用户生成内容的网站来说，这可能不那么重要。
链接示例
在你链接的示例页面中，这些实际上是面包屑，所以从技术上讲是有意义的。
<div class="superNav">
<a href="/people/mekBot">Mek</a>
/
<a href="/people/mekBot/lists">Lists</a>
</div>
话虽如此，它们应该位于无序列表中(因为无序列表对屏幕阅读器用户了解有多少链接很有用，因为它将读取"2选1选项"或类似内容(，并且在<nav>上具有某种形式的标识(因此它不被视为主导航(：
<nav aria-label="breadcrumbs" class="superNav">
<ul>
<li>
<a href="/people/mekBot">Mek</a>
</li>
<li>
<a href="/people/mekBot/lists">Lists</a>
</li>
<ul>
</nav>
最后，如果你有一个复杂的后端，或者第一个链接总是指向用户配置文件的链接，那么为了清晰起见，你可以在链接中添加一些视觉隐藏的文本。
HTML
[...]
<ul>
<li>
<a href="/people/mekBot"><span class="visually-hidden">User Profile for </span>Mek</a>
</li>
[...]
CSS
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
社交网站
然而，对于社交网站，你可以做很多事情。
例如，如果图像是指向其配置文件的链接，则可以使用alt属性来指示链接的操作。
<a class="profile-container"
<img src="profile-image-user-rayb.jpg" alt="RayB profile page" />
</a>
如果它只是一个静态图像(并且它们的用户名没有显示在其他地方(，那么alt属性将随上下文而变化。
<img src="profile-image-user-rayb.jpg" alt="RayB profile picture / avatar" />
如果这是一张静态图像，并且人名位于该文章/区块内的其他地方，那么你可能会隐藏该图像：
<article>
<h2>Some article Title</h2>
<img src="profile-image-user-rayb.jpg" alt="" role="presentation" aria-hidden="true"/>
<p class="written by">Author: RayB</p>
</article>
**请注意：**在上一个示例中，空的alt属性足以向屏幕阅读器隐藏图像。我添加了role="presentation"和aria-hidden="true"，这样我就可以检查错误的空alt属性(例如，如果它们没有aria-hidden="true"，那么我知道它们应该填充alt属性(。
为什么有这么多变化
这就是可访问性从一套规则变成艺术形式的地方，你必须根据情况选择最佳选项。
例如，alt属性的一个好的起点是W3中的alt文本决策树。
除此之外，还可以考虑以下内容：
- 这会增加屏幕阅读器用户需要的额外信息吗
- 信息在其他地方/附近可用吗？这是否只是重复
- 如果这是链接中的图像，
alt属性是否反映链接在上下文中的操作。等等
最重要的是，拿一个屏幕阅读器试试，这无疑是最快的学习方式(因为你可以识别出一个问题/让你困惑的事情/重复等，然后很容易找到解决方案/(。
如果你需要更多信息，请告诉我！