仅显示字形字体的第一个字母（可访问方式）

Question

我有一个字形字体，想要用它来实现这个效果：

到目前为止我的代码：

<div class="ico linkedin">linkedin</div>

.ico {border-radius:10em; background:black; color:white}
.linkedin {visibility:hidden;}
.linkedin:first-letter {
    font-family:'JustVector'; 
    font-size:900%; 
    text-indent:1em; 
    visibility:visible
 }

这可以解决Chrome中的问题，但不适用于FF或IE（9）。此外，这是不可访问的，因为JAWS不会读取hidden或display:none元素。

所以，我尝试了类似的东西：

.linkedin {position:absolute; left:-5em}
.linkedin:first-letter {/*etc*/ position:absolute; left:6em}

但它不起作用。是否有正确且可访问的方法来实现这一目标？

Answer 1

使用图标的可访问方式是使用具有足够img属性的alt元素，例如

<img src=smiley.gif alt="Just joking!">

图标字体（这可能是“gliph字体”的意思）具有固有的可访问性问题。使用例如字母和试图欺骗浏览器将它们作为带有CSS的图标呈现意味着在关闭CSS时，只有字母，这是错误的信息。使用具有空内容和CSS生成内容的元素会遇到同样的问题，除了当CSS（或至少CSS的可视部分）关闭时，没有信息而没有信息。

Answer 2

我认为目前没有真正可以使用图标字体的方法。我知道这有点跨度，但这就是我的方法。

首先将文本包装在一个span中，这样我们就可以隐藏它。并为图标添加另一个范围

<div class="ico">
    <span aria-hidden="true" class="linkedin"></span>
    <span class="hide">linkedin</span>
</div>

注意我已将aria-hidden="true"添加到我的图标范围内。这是为了防止屏幕阅读器读出字母（用于呈现图标）。

现在，您可以安全地隐藏文字，以便屏幕阅读器可以访问该文字，并使用before选择器应用您的图标。

.linkedin:before {
    font-family: 'JustVector'; 
    content: 'l';
}

.hide{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Answer 3

感谢您的回答，他们向我提出了一些关于如何处理这个问题的问题。

好吧，最后我选择了简单的一个。我认为它是可访问的，更具语义性，如果页面中没有CSS，也可以打印。

我将第一个字母（图标）与周围文字的边距分开，然后我使用overflow:hidden;离开了图层。然后，调整了margin和line-height，以便更好地关注圈内的角色/图标。

最终代码：

.ico {background:black; border-radius:10em; height:5em; overflow:hidden; position:relative; width:5em; color:white;}
.linkedin:first-letter {font-family:'JustVector'; font-size:400%; line-height: 1.3em; margin-left:0.2em; margin-right:1em;}

使用该解决方案，屏幕阅读器会显示“linkedin”，并且只显示其他用户提供足够信息的图标。