필드 세트 범례로 Apple Voice over access 문제가 발생했습니다.

Question

Mac (10.8.5) 및 Safari [6.2.4]를 사용하고 있습니다. 입력란을 그룹화하고 범례 텍스트를 추가하기 위해 필드를 만들었습니다. 전설을 UI에서 숨기려면 CSS를 적용했지만 범례와 레이블은 DOM에서 사용할 수 있습니다.

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 &amp;&amp; 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> 

Answer 1

이 PowerMapper에 따르면,이 OSX 10.11로 해결 된 문제 :

VoiceOver를 OS X 더 나은 - VoiceOver를 OSX 10.10에서 문제가 발생하지만, 10.11

VoiceOver를 OSX에서 지금 확인

전설 읽을 수 없습니다 - 아니 IND : VoiceOver를 OSX 10.10 사파리 8.0.6에서

출력

예, 선택 라디오 버튼, 두 가지 중 하나를 포함 어떤 예/아니오 선택이

오디오 샘플 없습니다의 가스화이 말한다. 예, 두 개의 라디오 버튼 중 하나를 선택했습니다. PowerMapper 시험

코드 :

<fieldset> 
<legend>I agree to terms and conditions</legend> 
<label><input name='radio_with_legend1' type='radio' checked='checked'>Yes</label> 
<label><input name='radio_with_legend1' type='radio'>No</label> 
</fieldset> 
<fieldset> 
<legend>Sign me up to the newsletter</legend> 
<label><input name='radio_with_legend2' type='radio' checked='checked'>Yes</label> 
<label><input name='radio_with_legend2' type='radio'>No</label> 
</fieldset> 

출처 : https://www.powermapper.com/tests/screen-readers/labelling/fieldset-with-yes-no-radio-buttons/