内容简介:Developers often useUnfortunately, you have to consider usingLet's have a look at an example:
Developers often use before
and after
pseudo-elements ( generated content
) for the styling of elements in websites. With a few lines of extra CSS, it is possible to include icons, images, or even add text without adjusting the HTML.
Unfortunately, you have to consider using content
in pseudo-elements very carefully because it can affect accessibility. Just because your generated content is not defined in the HTML, it doesn't mean that it is not picked up by assistive technology like screen readers.
Let's have a look at an example:
.new-item::before { content: "★"; }
The above CSS code prepends the ★
symbol (black star) to the inner content of elements with the class new-item
. And this might be all great from a visual perspective, but for screen readers, it has unexpected side effects.
<a href="new-things">go to new things</a>
This anchor link is now presented with the visual symbol of a star. On the other hand, screen readers will now read out "Black star go to new things". This experience is not great!
Today I learned that
the content
property supports a way to define alternative text for generated content
.
.new-item::before { /* "black star" and element content is read out */ content: "★"; /* "Highlighted item" and element content is read out */ content: "★" / "Highlighted item"; /* Generated content is ignored and only element content is read out */ content: "★" / ""; }
That's pretty cool because we can now provide alternative texts right in CSS! Unfortunately, at the time of writing, the overall browser support is not given yet (Firefox and Safari are missing).
Today, you should still use generated content, and this way of handling its alternative text very carefully. Going with a separate element in combination with aria-hidden=true
is probably still a better approach these days.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员成长的烦恼
吴亮、周金桥、李春雷、周礼 / 华中科技大学出版社 / 2011-4 / 28.00元
还在犹豫该不该转行学编程?还在编程的道路上摸爬滚打?在追寻梦想的道路上你并不孤单,《程序员成长的烦恼》中的四位“草根”程序员也曾有过类似的困惑。看看油田焊接技术员出身的周金桥是如何成功转行当上程序员的,做过钳工、当过外贸跟单员的李春雷是如何自学编程的,打小在486计算机上学习编程的吴亮是如何一路坚持下来的,工作中屡屡受挫、频繁跳槽的周礼是如何找到出路的。 《程序员成长的烦恼》记录了他们一步一......一起来看看 《程序员成长的烦恼》 这本书的介绍吧!