WAI-ARIA準拠テキストが含まれていないボタン

Question

私はプロジェクトのWAI-Aria準拠基準を満たすために取り組んでいます。次のコードはカスタムドロップダウンボタンを生成します。私が受け取っているエラーは、「ボタンが空であるか、値のテキストがありません」ということです。私は、隠されたテキストを含むアリアラベルを使用して、タイトルを付けて、ボタンタグに値を追加しようとしました。いずれも効果がありません。私の質問は、どのようにこれを準拠ボタンにすることができますか？

編集：コンプライアンスに関するマークを紛失した領域を見つけるために、アドオンWaveコンプライアンスチェッカーを使用しています。

<button class="child btn btn-lg" data-value="+" data-loopid="@i" style="color:#1C5D9C;background-color:transparent;padding:0 1px; @if(!item.HasAdditionalLocations){@Html.Raw("visibility:hidden")}"> 
             <span class="iconPlusRoundBlueWhite"></span></button> 

Answer 1

実際にボタンにテキストが表示されないことが原因で問題が発生している可能性があります。私は、テキストの目に見えて隠された部分を使用することをお勧めしたい：

<button class="child btn btn-lg" data-value="+" data-loopid="@i" style="color:#1C5D9C;background-color:transparent;padding:0 1px; @if(!item.HasAdditionalLocations){@Html.Raw("visibility:hidden")}"> 
    <span class="iconPlusRoundBlueWhite"> 
    <span class="sr-only">text for the button</span> 
    </span> 
</button> 

.sr-only { 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    clip: rect(1px,1px,1px,1px); 
    position: absolute; 
    white-space: nowrap 
} 

これは目に見えてテキストを隠すと、スクリーンリーダー（white-space: nowrap）で読んだとき、それは一緒に押しつぶされないようになります。これは、ボタンの完全なセマンティクスを機能させることができるので、私の好みの解決策でもあります。これは、余分なマークアップを追加するので

<button class="child btn btn-lg" data-value="+" data-loopid="@i" style="color:#1C5D9C;background-color:transparent;padding:0 1px; @if(!item.HasAdditionalLocations){@Html.Raw("visibility:hidden")}" aria-describedby="button-message"> 
             <span class="iconPlusRoundBlueWhite"></span></button> 

    <div id="button-message">I am the text for a button</div> 

私は、この説明を格納するために、あなたのマークアップに余分なものが必要でしょうが

アリアは、あなたがのために行くているものであれば、あなたはaria-describedbyを試みることができますsr-onlyクラスの方にもっと傾けられ、目に見えないテキストが表示されます。