css - 仅显示字形字体的首字母(可访问方式)

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

所以，我尝试了类似的方法:

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

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

Answer 1

使用图标的无障碍方式是使用具有足够alt 属性的img 元素，例如

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

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