如何使用jQuery无障碍旋转内容

与视差滚动效果一起，旋转内容是您经常在网站中看到的效果的另一个示例。 您可以看到它用来轮流新闻，推文，Facebook帖子等。 当使用jQuery构建时，开发人员通常会使用hide()和show()方法（或类似的方法，例如fadeIn() / fadeOut()和slideUp() / slideDown() ）来创建小部件。 它们的问题在于，在执行动画（如果有）之后，这些方法会将所选元素的display属性值更改为none ，然后分别更改为原始值。 此行为导致可访问性问题。

在本文中，我们将描述问题所在以及如何使用不同的jQuery方法来达到相同的效果，但要注意可访问性。

问题

有些人（通常但不限于视力障碍者）使用TAB键浏览网站。 如果您不熟悉此概念，则会发生的情况是，每当用户按下TAB键时，页面的可聚焦元素就会被聚焦。 从页面的最开始开始，元素被聚焦的顺序遵循它们在DOM中出现的顺序（有例外 ）。 可聚焦元素的一些示例（有关链接焦点 ，输入字段，按钮以及tabindex属性的值大于或等于0所有内容， 请参见“ 何时获得元素聚焦”中的更多信息（ 了解何时以及如何使用tabindex ）。 。 要理解的重要一点是，通过将其display属性设置为none来隐藏的元素是不可聚焦的。

考虑到这一点，您可以看到，如果TAB用户正在聚焦使用hide()方法hide()的元素（例如，链接），然后用户按下TAB键，则会出现问题。 以这种方式隐藏就像该元素已从DOM中暂时删除，因此没有下一个要关注的元素。 在这种情况下，浏览器要做的是重置位置，通常将焦点放在页面的URL上。 这给用户带来很多挫败感，因为每次他们到达这个死亡区时，他们都必须从页面的开头开始。 更重要的是，您的某些用户甚至看不到您出色的旋转效果-他们要做的就是轻松访问您的内容。

给我看代码

为了更好地处理这种情况，请考虑以下标记：

<div class="rotating-content">
   <p>This is a text with a <a href="#">link 1</a> and <a href="#">another link 1</a></p>
   <p>This is a text with a <a href="#">link 2</a> and <a href="#">another link 2</a></p>
   <p>This is a text with a <a href="#">link 3</a> and <a href="#">another link 3</a></p>
   <p>This is a text with a <a href="#">link 4</a> and <a href="#">another link 4</a></p>
</div>

要旋转div的内容，您可以编写如下代码：

$elements = $('.rotating-content').find('p');
$elements.hide().first().show();

setInterval(function() {
   $elements.filter(':visible').fadeOut('slow', function() {
      $next = $(this).next();
      if ($next.length === 0) {
         $next = $elements.first(); 
      }
      $next.fadeIn('slow');
   });
}, 4000);

将所有内容付诸实践将产生以下演示 ：

可访问的旋转内容

为了解决这个问题，可访问性，同时实现同样的效果，我们需要采用不同的方法的jQuery， fadeTo()和我最喜欢的CSS辅助类以往，通常被称为一个visuallyhidden或visually-hidden 。 该帮助程序类的代码如下所示：

.visually-hidden
{
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
}

将此类添加到任何元素将在视觉上隐藏该元素，而无需将其display属性设置为none 。

现在，我们将不再需要使用hide()方法来隐藏元素或使用show()方法来显示元素，而是根据需要添加或删除visually-hidden类。 此外，为了重新创建漂亮的动画，我们将使用fadeTo()方法。 后者允许您设置希望元素达到的不透明度，但是当它完成其任务时，它不会更新display属性（要了解有关此方法的更多信息，请参阅官方文档 ）。 因此，我们将传递给它的值0的时候，我们要隐藏的元素和1 ，当我们想证明这一点。 最后，我们还将所有要设置动画的元素的初始opacity值设置为0 。

结果代码如下所示：

$elements = $('.rotating-content').find('p');
$elements
   .not(':first-child')
   .addClass('visually-hidden')
   .css('opacity', 0);

setInterval(function() {
   $elements.filter(':not(.visually-hidden)').fadeTo('slow', 0, function() {
      $next = $(this).addClass('visually-hidden').next();
      if ($next.length === 0) {
         $next = $elements.first(); 
      }
      $next.removeClass('visually-hidden').fadeTo('slow', 1);
   });
}, 4000);

将所有内容付诸实践将产生以下演示 ：

通过简单的代码更改，我们创建了一个更易于访问的小部件来显示旋转的内容。 要查看两个演示之间的区别，我邀请您使用TAB键浏览页面。

结论

在本文中，我描述了一个重要的可访问性问题，可以在用于创建旋转内容效果的某些代码中找到该问题。 你们中有些人可能无意中将其添加到了一个小部件（如所讨论的小部件）中构建的网站，但没有什么可耻的。 每个人在了解它们之前都会忽略许多重要的概念。 您不久前才真正发现了这个重要问题（这要归功于Steve Faulkner和LéonieWatson等人的工作）。

虽然学习此简单技巧可能会对您有所帮助，但这里的主要收获是，当您开发网站的任何功能时，还应该验证该功能是否可访问，否则您可能会冒着挫败感和无法访问的内容将某些用户锁定的风险。 。

From: https://www.sitepoint.com/accessibly-rotate-contents-jquery/