0

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

自定义 Twitter 图标的图像

到目前为止我的代码：

<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 中有效，但在 Firefox 或 Internet Explorer 9 中无效。此外，这是不可访问的，因为 JAWS 不读取hiddenordisplay:none元素。

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

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

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

4

3 回答 3

2

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

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

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

于 2013-07-31T16:44:40.037 回答
1

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

首先将文本包装在一个跨度中，以便我们可以隐藏它。并为图标添加另一个跨度

<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;
}
于 2013-07-31T16:37:20.390 回答
0

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

好吧，最后我选择了简单的。我认为它是可访问且更具语义的，如果页面中没有 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”，它只会为其他用户显示图标，为他们提供足够的信息。

于 2013-08-01T14:58:54.780 回答