[英]Accessibilty for screen reader
How to make part of a div not visible for a screen reader using jquery?如何使用 jquery 使屏幕阅读器看不到 div 的一部分? i was trying to implement readmore readless functionality on certain text but i am facing issues with screen reader but i have to allow accessibilty here.
我试图在某些文本上实现 readmore 无读功能,但我遇到了屏幕阅读器的问题,但我必须在此处允许可访问性。 here is my code where i will be showing a part of my div based on line count:
这是我的代码,我将根据行数显示我的 div 的一部分:
$(document).ready(function() {
var divHeight,l=3;
$('.comment').each(function() {
var $this = $(this),divHeight;
var $content = $this.find(".text-content"),
lineHeight= $content.css('line-height');
divHeight= ((parseInt(l)+3)*parseInt(lineHeight))+"px";
if($content.hasClass("short-text")){
$content.css("height","auto");
}
else{
$content.addClass("short-text");
$content.css("overflow","hidden");
$content.css("height",divHeight);
$content.on("focus",function(){
$(this).attr('aria-hidden', 'false');
})
}
html='<p class="'+'para'+'"><a href="#" class="morelink morelinkStyle">' + 'more' + '</a></p></span>';
$this.append(html);
});
$(".morelink").click(function(){
var $this = $(this),
$elem=$this.parents().find(".text-content");
if ($elem.hasClass("short-text")) {
$elem.removeClass("short-text");
$this.html('less');
divHeight = $elem.height();
$elem.css("height","auto");
} else {
$elem.addClass("short-text");
$elem.on("focus",function(){
console.log($(this));
$(this).css("border","2px solid red");
$(this).attr('aria-hidden', 'false');
})
$this.html('more');
$elem.css("height",divHeight);
$elem.css("overflow","hidden");
}
return false;
});
HTML being: HTML 是:
<div class="comment">
<article class="text-content">
<h3>Bedspreads</h3>
<p>Bedspreads add an elegant, ornamental look to any <a href="/store/category/bedding/10504/">bedroom</a>. They may just sit atop your bed but the right spread can pull an entire room together and create a central focal point to your bedroom. That's why Bed Bath & Beyond offers a large array of bedspreads and comforters to help you find exactly what you are looking for. Wow any visitor or guest with a beautiful,</p> <p>1st para -vibrant floral pattern that brightens up any room, create a bold look with solid colors and modern styling or bring in a traditional design with classic chenille patterns. Turn your room into a viewing experience today with our ever-growing selection.Ut enim ad minim veniam,
</p>
<p>2nd para-vibrant floral pattern that brightens up any room, create a bold look with solid colors and modern styling or bring in a traditional design with classic chenille patterns. Turn your room into a viewing experience today with our ever-growing selection.Ut enim ad minim veniam,</p>
</article>
</div>
Editing the height & overflow properties of the div will not hide the content from a screenreader.编辑 div 的高度和溢出属性不会对屏幕阅读器隐藏内容。 You need to use display:none in your short-text class.
您需要在短文本类中使用 display:none 。 (Also, it is easier to write the class in your CSS and just use jquery to add/remove the class name).
(此外,在 CSS 中编写类更容易,只需使用 jquery 添加/删除类名)。
A couple of months ago, I was tasked with solving the same problem of implementing "Read More" / "Read Less" links while maintaining WCAG 2.0 accessibility.几个月前,我的任务是解决在保持 WCAG 2.0 可访问性的同时实现“阅读更多”/“阅读更少”链接的相同问题。
If you aren't opposed to using Bootstrap and jQuery, I have a pretty good solution.如果你不反对使用 Bootstrap 和 jQuery,我有一个很好的解决方案。 The bootstrap
collapse
class makes it possible. bootstrap
collapse
类使之成为可能。
https://jsfiddle.net/rmatnwrm/ https://jsfiddle.net/rmatnwrm/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.