Mac(10.8.5)とSafari [6.2.4]を使用しています。私は自分の入力をグループ化するためのフィールドセットを作成し、そのフィールドに凡例のテキストを追加しました。また、UIから凡例を隠すためにCSSを適用しましたが、凡例とラベルはDOMで使用できます。フィールドセットの凡例を使ったAppleのボイスオーバーの問題へのアクセシビリティ
Windows/IE上のNVDAは正常に動作します。フィールドセット凡例を読み取り、入力のラベルを読み取ります。
Mac/Safari以上の組み合わせでは、Apple Voiceは凡例を読んでいません。 Mac/Safariのバージョンとは何か関係はありますか?
<fieldset >
<legend class="screen-read-only">Please sign in to this application</legend>
<div >
<div >
<label for="USER" class="screen-read-only">Enter your email or username here to test screen reader in MAC</label>
<input class="no-inline-checker ng-pristine ng-invalid ng-invalid-required ng-touched" tabindex="0" type="text" id="USER" name="USER" placeholder="Username or Email Address" data-ng-model="email" required="" data-autocorrect="off" data-autocapitalize="off" data-test-id="myr-signIn-emailAddress" aria-required="true" aria-invalid="true">
<span class="inline-checker icon-error sign-in ng-hide" data-ng-show="submitted && form.USER.$error.required" aria-hidden="true"></span>
</div>
</div>
<div class="row overrite-margin">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"><div class="myr-remember-me row"><span data-test-id="myr-singin-rememberMe" class="myr-checkbox col-xs-1" tabindex="0"><input data-ng-model="rememberMe" type="checkbox" name="rememberMe" id="rememberMe" class="myr-checkbox-input ng-pristine ng-untouched ng-valid" tabindex="0" aria-checked="false" aria-invalid="false"> <label for="rememberMe" class="myr-checkbox-box"><span class="screen-read-only">Remember me checkbox</span></label></span>
<span translate="_remember_me">Remember Me</span></div></div>
</div>
</fieldset>
あなたは、サンプルコードを提供することはできますか?おそらくCodePenかJSFiddleですか?私はこの問題をiOS/VoiceOverでは認識していますが、macOS/VoiceOverでは認識していません。 – aardrian
@ aardrianがコードスニペットを更新しました。ラベルに適用されたCSSは、通常のユーザーの視野からラベルを隠すことです。 –
あなたは通常のユーザーではなく、*目に見える*ユーザーから隠すことを意味します。また、スクリーンリーダのユーザーの3分の1がブリングしていないことに注意してください。あなたが使っているCSSは何ですか?オフスクリーン?切り取られた?プロパティを表示しますか? – aardrian