ホームよくある質問よくある質問記事デザインの都合上アクセシビリティツールを1画面内に2つ設置したい

デザインの都合上アクセシビリティツールを1画面内に2つ設置したい

デザインの都合上アクセシビリティツールを1画面内に2つ設置したいのですが、1画面内に2つ設置するとIDが重複してしまいますし、アクセシビリティツールが動作しなくなってしまいます。

アクセシビリティツールを1画面内に2つ設置することはできますか。

可能です。

バージョン1.19.0以降では、従来通りidでの指定も残しつつ、data属性でも指定できるようになっています。

複数設置される場合はid指定ではなく、すべてのアクセシビリティツールに「data-tool="ss-kana"」のようにdata属性で指定をしてください。

※アクセシビリティツールを2つ設置する場合のコード例


<div id="tool">
  <nav class="accessibility__tool">
    <div class="accessibility__tool-list">
      <div data-tool="ss-kana">ふりがなをつける</div>
      <div data-tool="ss-voice">読み上げる</div>
    </div>
    <div id="theme1">背景色 <span data-tool="ss-theme"> <a class="white" href="#">白</a> <a class="blue" href="#">青</a> <a class="black" href="#">黒</a> </span> </div>
    <div id="size1">文字サイズ <span data-tool="ss-small">小さく</span> <span data-tool="ss-medium">標準</span> <span data-tool="ss-large">大きく</span> </div>
  </nav>
</div>

<div id="sp-menu">
  <nav class="accessibility__tool">
    <div class="accessibility__tool-list">
      <div data-tool="ss-kana">ふりがなをつける</div>
      <div data-tool="ss-voice">読み上げる</div>
    </div>
    <div id="theme2">背景色 <span data-tool="ss-theme"> <a class="white" href="#">白</a> <a class="blue" href="#">青</a> <a class="black" href="#">黒</a> </span> </div>
    <div id="size2">文字サイズ <span data-tool="ss-small">小さく</span> <span data-tool="ss-medium">標準</span> <span data-tool="ss-large">大きく</span> </div>
  </nav>
</div>

カテゴリー

このページの先頭へ