TIL: CSS "content" accepts alternative text

栏目: IT技术 · 发布时间: 4年前

内容简介: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.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入解析Spring MVC与Web Flow

深入解析Spring MVC与Web Flow

Seth Ladd、Darren Davison、Steven Devijver、Colin Yates / 徐哲、沈艳 / 人民邮电出版社 / 2008-11 / 49.00元

《深入解析Spring MVCgn Web Flow》是Spring MVC 和Web Flow 两个框架的权威指南,书中包括的技巧和提示可以让你从这个灵活的框架中汲取尽可能多的信息。书中包含了一些开发良好设计和解耦的Web 应用程序的最佳实践,介绍了Spring 框架中的Spring MVC 和Spring Web Flow,以及着重介绍利用Spring 框架和Spring MVC 编写Web ......一起来看看 《深入解析Spring MVC与Web Flow》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具