ionic2, Angular에서 모바일 접근성 적용하기 (4) : ion-radio

2019/07/25 - [개발/ionic2, Angular] - ionic에서 모바일 접근성 적용하기 (3) : ion-select ②

ionic에서 모바일 접근성 적용하기 (3) : ion-select ②

↑위 글과 연결된 글입니다.

Voice Assistant를 이용하여 들었을 때, 

기본 radio는 정상적으로 label과 선택되었는지 안 되었는지를 잘 읽어주지만

ion-radio는 label을 전혀 읽어주지 않았다.. 그냥 선택되었는지 안 되었는지만 읽어주는데

그것으로는 절대 접근성을 적용했다고 할 수 없을 거 같았다.

 

그렇다고 이것 역시 기본 radio로 바꾸기엔 ion-radio로 바꾼 이유가 명확해서

(기본 radio는 뭔가 안 눌리는 느낌이 있다)

ion-radio로 꼭 써야 하는 상황이었다.

 

사실 ion-radio는 앞의 글들과는 다른 유형의 문제였다.

그냥 내가 잘못 사용하고 있던 것일 뿐..

 

* ion-radio를 잘못 사용한 예

<ion-content>
  <ion-list radio-group>
    <span class="ion_radio_items">
      <span style="float: left;">
    	<ion-radio mode="md" id="no1" name="no1" value="N" ></ion-radio>
      </span>
      <ion-label text-wrap>아니오</ion-label>
    </span>
    <span>
      <span style="float: left;">
    	  <ion-radio mode="md" id="yes1" name="yes1" value="Y" ></ion-radio>
      </span>
      <ion-label text-wrap>예</ion-label>
    </span>
  </ion-list>
</ion-content>

대강 이런 식으로 사용하고 있었는데 공식 홈페이지를 보니

ion-list 안에 ion-item안에 하나의 ion-radio와 ion-label이 들어가 있었다..

 

아마 처음에 이런 식으로 코딩했던 이유는 ion-item을 사용하면 css가 굉장히 깨져서였던 거 같다.

하지만 ion-item을 입혀주니 Voice Assistant를 이용하여 들었을 때,

ion-radio에 ion-label을 잘 연결해서 읽어주는 것을 확인하여

별 수 없이 ion-item을 입히고 css를 수정하게 되었다.

 

* ion-radio를 제대로 사용한 예

<ion-content>
  <ion-list radio-group>
    <ion-item>
      <span style="float: left;">
        <ion-radio mode="md" id="no1" name="no1" value="N" ></ion-radio>
      </span>
      <ion-label text-wrap>아니오</ion-label>
    </ion-item>
    <ion-item>
      <span style="float: left;">
        <ion-radio mode="md" id="yes1" name="yes1" value="Y" ></ion-radio>
      </span>
      <ion-label text-wrap>예</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

위처럼 코드를 수정하니 Voice Assistant를 이용했을 때 제대로 들려주는 것을 확인하였다!

참고: https://ionicframework.com/docs/api/radio