css 使用title属性对截断文本进行辅助功能

hmae6n7t  于 2022-12-01  发布在  其他
关注(0)|答案(3)|浏览(146)

我有一个设置了最大宽度的表格单元格,如果单元格中的文本太长,它会被省略号截断。
因此,使用title属性显示全文是否是一个合适的(可访问的)解决方案?

af7jpaap

af7jpaap1#

如果文本被CSS的text-overflow: ellipsis截断:* * 是的,title属性是屏幕阅读器的有效解决方案**。
即使是由屏幕阅读器读取也没有关系,因为原始(可视截断)文本将被完全读取。
另一方面,title attributes are not accessible by keyboard, touch screen and other means
对于您的情况,我会看到以下解决方案:

  • 如果被截断的文本只是预览,并与显示完整版本的另一个视图链接,请使用title
  • 通过像这样的切换,使文本可内联扩展
  • 提供可通过键盘和屏幕阅读器访问的工具提示,用于扩展重叠中的文本

在所有情况下,屏幕阅读器用户都可以访问全文,而无需额外的交互。

44u64gxh

44u64gxh2#

好吧,在我看来,这将是适当的解决方案,因为用户只是经常采取鼠标在文本上,等待隐藏的文本弹出。我看到他们中的许多人,包括我的妹妹谁是在所有这些类型的事情。她只是悬停在一个文本,然后等待文本出现,当它没有,她只是说:“哦,上帝!为什么???"。所以在我看来这是一个合适的方式。
还有一件事,你可以通过设计你的标题属性/工具提示来吸引用户的注意力。

EDIT:@steveaxtitle属性不好用,所以我建议你看this问题。这个问题有一种CSS方法,所以你可以更容易地设置它的样式:)

zbq4xfa0

zbq4xfa03#

我会向您推荐https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip。它可以在所有环境中工作。

相关问题