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