Display:none on fading carousel breaks accessibility

淺唱寂寞╮ 提交于 2020-01-17 07:27:08

问题


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();
});

回答1:


Maybe you could try

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

Or

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


来源:https://stackoverflow.com/questions/19369249/displaynone-on-fading-carousel-breaks-accessibility

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!