2017-10-08 10 views
-1

jqueryを使用してスクリーンリーダーに表示されないdivの部分を作成するにはどうすればよいですか? 私は特定のテキストでreadmore readless機能を実装しようとしていましたが、私はスクリーンリーダーの問題に直面していますが、ここではアクセシビリティを許可する必要があります。ここ は、私は行数に基づいて、私の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のビーイング:

のdivの高さ&オーバーフロープロパティは非表示にしないだろう編集
<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 &amp; 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> 
+0

ここでiは変数lに最初に私が同様の要素に行の高さを与えている – user3771215

+0

3と行をとっています – user3771215

答えて

0

スクリーンリーダーからのコンテンツ。あなたは短いテキストクラスでdisplay:noneを使う必要があります。 (また、CSSでクラスを作成し、jqueryを使用してクラス名を追加/削除する方が簡単です)。

0

数か月前、私はWCAG 2.0のアクセシビリティを維持しながら、 "Read More"/"Read Less"リンクを実装するのと同じ問題を解決することを任されました。

ブートストラップとjQueryの使用に反対していない場合、私はかなり良い解決策を持っています。ブートストラップcollapseクラスが可能になります。

https://jsfiddle.net/rmatnwrm/