屏幕閱讀器的輔助功能

Question

如何使用 jquery 使屏幕閱讀器看不到 div 的一部分？ 我試圖在某些文本上實現 readmore 無讀功能，但我遇到了屏幕閱讀器的問題，但我必須在此處允許可訪問性。 這是我的代碼，我將根據行數顯示我的 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 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>

Answer 1

編輯 div 的高度和溢出屬性不會對屏幕閱讀器隱藏內容。 您需要在短文本類中使用 display:none 。 （此外，在 CSS 中編寫類更容易，只需使用 jquery 添加/刪除類名）。

Answer 2

幾個月前，我的任務是解決在保持 WCAG 2.0 可訪問性的同時實現“閱讀更多”/“閱讀更少”鏈接的相同問題。

如果你不反對使用 Bootstrap 和 jQuery，我有一個很好的解決方案。 bootstrap collapse類使之成為可能。

https://jsfiddle.net/rmatnwrm/