时间戳

首页 > 解决方案 > ngx-bootstrap 轮播 - 如何修改指标，提高可访问性

javascript - ngx-bootstrap 轮播 - 如何修改指标，提高可访问性

问题描述

我正在使用"ngx-bootstrap": "^3.1.3",轮播组件。我想让残障人士更容易访问我的网站。不幸的是，我找不到修改幻灯片指示器的方法，以便可以使用键盘访问它们。有没有办法做到这一点？

这是我得到的：

<ol class="carousel-indicators ng-star-inserted">
    <li class="ng-star-inserted"></li>
    <li class="ng-star-inserted active"></li>
</ol>

我想要什么：

<ol class="carousel-indicators ng-star-inserted">
  <li class="ng-star-inserted" tabindex="0" role="button" aria-pressed="false"></li>
  <li class="ng-star-inserted active" tabindex="0" role="button" aria-pressed="true"></li>
</ol>

标签： javascriptangularaccessibilityngx-bootstrap

解决方案

我找到了解决方法。基本上我确实隐藏了原始指标并创建了自己的指标。

<carousel [noPause]="false" [(activeSlide)]="activeSlide" [showIndicators]="false">
      <slide *ngFor="let item of items">
      ...
      </slide>
  <!-- add this -->
  <div class="indicators">
    <button *ngFor="let item of items; let i = index" type="button" class="indicator"
            [class.active]="i === activeSlide" [attr.aria-pressed]="i === activeSlide"
            (click)="switchSlide(i)"></button>
  </div>
 <!-- /add this -->
</carousel>

通过这种方式，您可以完全控制指标，并且可以随意设置样式，并且可以对其进行修改以使其易于访问。

推荐阅读