显示：轮播消失时，无一显示可访问性中断 [英] Display:none on fading carousel breaks accessibility

问题描述

我在 http://seontario.org 的底部有一个Twitter淡入淡出的轮播类型的东西。它使用display：none显示和隐藏推文。但是display：none无法与屏幕阅读器配合使用，因为它们无法呈现该内容。关于如何执行此操作以使其可访问的任何想法？

I've got a twitter fading carousel type thing going at the bottom of http://seontario.org. It uses display:none to show and hide the tweets. But display:none doesn't work with screen readers because they don't render that content. Any thoughts on how to do this so that it would be accessible?

// TWITTER FEED
jQuery(document).ready(function($){

var latesttweets = $(".latest-tweets ul li");
var tweetIndex = -1;

function showNextTweet() {
    ++tweetIndex;
    latesttweets.eq(tweetIndex % latesttweets.length)
        .fadeIn(600)
        .delay(8000)
        .fadeOut(400, showNextTweet);
}

showNextTweet();
});

推荐答案

也许您可以尝试

height: 0;
width: 0;
overflow: hidden;

或

position: fixed;
top: -999999px;
left: -999999px;

这篇关于显示：轮播消失时，无一显示可访问性中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！