2019/07/25 - [개발/ionic2, Angular] - 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

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

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

이전에 위 글이 서버에서 가져오는 정보를 이용하여 n개의 정해져 있지 않은

ion-select를 사용할 때엔 해결법이 올바르지 않다고 했었다.

왜냐면 ViewChild를 이용하여 정의하기가 어렵기 때문..

그래서 해결법으로 모든 Select를 ViewChildren으로 이용하여 리스트로 저장하고

그것을 이용하여 모바일 접근성을 적용하도록 하겠다.

코드는 다음과 같다.

1. html을 다음과 같은 형식으로 작성한다.

<ion-content>
    <ul>
        <li *ngFor="let ques of quesList; let i = index;">
            <span>{{ques.ques_sno}}. {{ques.question}} </span>
            <ion-item (click)="openSelect(i)">
                <ion-label style="display: none">{{ques.ques_sno}}. {{ques.question}}</ion-label>
                <ion-select okText="확인" cancelText="취소" [id]="'select'+i"
                            [selectOptions]="{title:ques.question}" placeholder="선택안함">
                    <ion-option *ngFor="let ans of ques.ansList" [value]="ans.ans_sno">{{ans.answer}}</ion-option>
                </ion-select>
            </ion-item>
        </li>
    </ul>
</ion-content> 

2. ts를 작성한다.

(quesList는 server에서 가져왔다고 가정하고 list의 개수는 유동적이어도 코드는 제대로 작동함을 확인하였다)

import { Component, ViewChildren, QueryList } from '@angular/core';
import { Select } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChildren(Select) selectGroup: QueryList<Select>;
  
  quesList: any;
  
  constructor() {
        this.quesList = [{
          ques_sno: 1,
          question: "ionic앱 모바일 접근성을 적용하기 글에 어떻게 방문하게 되셨습니까?",
          ansList:[{
            ans_sno: 1,
            answer: "직접 검색"
          }, {
            ans_sno: 2,
            answer: "지인 추천"
          }, {
            ans_sno: 3,
            answer: "기타"
          }]
        }, {
          ques_sno: 2,
          question: "ionic앱 모바일 접근성 적용하기 글이 만족스러우십니까?",
          ansList:[{
            ans_sno: 1,
            answer: "매우 만족"
          }, {
            ans_sno: 2,
            answer: "만족"
          }, {
            ans_sno: 3,
            answer: "불만족"
          }, {
            ans_sno: 4,
            answer: "매우 불만족"
          }]
        }, {
          ques_sno: 3,
          question: "ionic앱 모바일 접근성 적용하기에 얼마나 관심이 있으십니까?",
          ansList:[{
            ans_sno: 1,
            answer: "매우 관심"
          }, {
            ans_sno: 2,
            answer: "관심"
          }, {
            ans_sno: 3,
            answer: "무관심"
          }, {
            ans_sno: 4,
            answer: "매우 무관심"
          }]
        }];
    }

    openSelect(index: number) {
        this.selectGroup.toArray()[index].open();
    }
}

2019/07/24 - [개발/ionic2, Angular] - ionic에서 모바일 접근성 적용하기 (1) : toast

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

삼성 안드로이드 폰의 Voice Assistant를 이용하여 모바일 접근성을 테스트할 때

(테스트 폰은 Samsung Galaxy S7, Samsung Galaxy S10e였다)

앞의 글과 또 다른 문제점을 발견했다.

그것은 ion-select가 클릭되지 않는다는 것이었다.

(사실 아예 클릭이 되지 않는 것은 아니고.. 가끔 운이 좋으면 클릭되어 팝업이 열린다;)

기본 select를 사용하지 않고 ion-select를 사용한 이유는..

기본 select가 Android에서는 잘 나오지만

IOS에서는 웹뷰 select에서 보이는 Done 버튼도 안 나오고 딱히 UI도 예쁘지 않고 불편하기만 해서이다.

그래서 모바일 접근성을 위해서 다시 기본 select로 바꾸기는 좀 그런 상황인 데다

어떠한 이유에서 클릭 되지 않는 것인지 (Voice Assistant를 이용하지 않으면 잘 되기 때문)

알 수 없어서 꽤 난감한 상황이 되었다.

그래도 여차여차 ion-focus, ion-click 이벤트로 여러 테스트를 거친 결과,

Voice Assistant를 이용할 때 ion-click 이벤트를 타기는 한다는 점을 알게 되었다.

여전히 정확한 원인은 모르겠지만 click 이벤트를 추가로 코딩하면 잘 작동하는 것으로 보아

아마도 click 이벤트로 ion-select의 open 이벤트를 발생시키지 않아서 생기게 된 오류 같아 보였다.

그래서 해결법은 다음과 같은 코딩을 추가로 해주면 된다.

1. html에 ion-select에 다음과 같은 방식으로 id(#bloodType)를 부여하고 ion-item이나 ion-select에 click 이벤트(

(click)="openSelect('bloodType')")를 추가한다.

<ion-content>
   <ion-item (click)="openSelect('bloodType')">
        <ion-label>혈액형</ion-label>
        <ion-select okText="확인" cancelText="취소" placeholder="혈액형 선택" 
        			[selectOptions]="{title:'혈액형 선택'}" #bloodType>
            <ion-option value="a">A</ion-option>
            <ion-option value="b">B</ion-option>
            <ion-option value="o">O</ion-option>
            <ion-option value="ab">AB</ion-option>
        </ion-select>
    </ion-item>
</ion-content> 

2. ts에 ViewChild를 이용하여 Select 변수를 만들고 click 이벤트를 생성한다.

import { Component, ViewChild } from '@angular/core';
import { Select } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('bloodType') bloodType: Select;
    
  openSelect(selector) {
    this[selector].open();
  }
}

그런데 이것은 이미 정해져 있는 ion-select에 접근성을 입힐 때는 적절한 방법이라고 생각되지만

서버에서 가져오는 정보를 이용하여 n개의 정해져 있지 않은 ion-select를 사용할 때엔 해결법이 올바르지 않다.

이런 상황에 해결하는 코딩은 다음 글에서 작성하도록 하겠다.

최근 ionic앱에 모바일 접근성(Mobile Accessibility)을 적용할 일이 생겼다.

ionic에는 크게 ionic-angular, ionic-native로 나누어지는데 플러그인들이 많은데 toast도 그중 하나다.

나는 평소 ionic을 테스트할 때 초반엔 ionic serve 명령어를 이용하여 웹으로 보기 때문에

toast를 포함하여 대부분의 기능을 ionic-angular에서 제공하는 것으로 사용하고 있었다.

그러나 ionic-angular에서 제공하는 것은 웹에서도 사용 가능하다는 장점이 있지만

cordova를 이용하여 디바이스(Android, IOS)에 올렸을 때,

native가 기본적으로 제공해주는 기능을 못 사용하는 경우가 있다는 걸 최근에 절실히 깨닫고 있다.

(코드를 꽤 많이 고쳐야 하는 경우도 생긴다)

아무튼 ionic-angular toast도 모바일 접근성을 테스트할 때 알게 된 사실인데,

삼성 안드로이드 폰에서 Voice Assistant를 이용하여 들으면

ionic 앱에서 ionic-angular toast를 읽어주지 않는다는 치명적인 단점이 있었다.

그래서 좀 찾아보고 직접 적용하여 테스트해 본 결과,

ionic-angular, ionic-native를 모두 적용하여 platform.is('cordova')로 분기를 태워 코드를 작성하면

웹과 앱 모두 적절한 toast를 사용할 수 있다.

(ionic-native toast를 사용하면 삼성 안드로이드 폰에서 Voice Assistant를 이용하여 들었을 때,

안드로이드 native로 작성된 앱의 toast처럼 정말 잘 읽어준다..!)

또한, ionic-angular http를 사용하면 apk를 release 했을 때 https://로 시작하는 URI를 제대로 동작시키지 못하지만,

이것도 위와 같은 방법으로 하면 해결된다. (ionic-angular, ionic-native 분기 적용)

=> https://로 시작하는 URI를 제대로 동작시키지 못하는 이유는 서버에서 SSL을 제대로 적용 못해서였고 서버에서 제대로 적용해주면 ionic-angular http를 사용해도 apk를 release 했을 때 제대로 동작함을 확인했음 (2020. 09. 03)

본론으로 들어가 코드를 작성해본다면 다음과 같다.

1. ionic-native toast를 설치한다.

$ ionic cordova plugin add cordova-plugin-x-toast 
$ npm install @ionic-native/toast --save

2. app.module.ts에서 ionic-native toast를 providers에 넣는다.

import { Toast } from '@ionic-native/toast';

@NgModule({
   .....
providers: [
     .....
     Toast
  ]
})

3. ts 파일을 작성한다.

import { Component } from '@angular/core';
import { Platform, ToastController } from 'ionic-angular';
import { Toast } from '@ionic-native/toast';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public platform: Platform,
              public toastCtrl: ToastController,
              public toast: Toast) {
      if (this.platform.is('cordova') == false) {
        let toast = toastCtrl.create({
            message: "test~",
            duration: 3000,
            position: "middle",
            cssClass: "toast-default"
        });
        toast.present();
      } else {
        this.toast.show("test~", "3000", "center").subscribe(
          toast => {
            console.log(toast);
          }
        );
      }
    }
  }

그러나 후에 ios에서 테스트해보았는데 ios의 voice over 기능으로는 toast message를 읽어주지 않았다.

나중에 작성하겠지만 간단히 설명하자면 ios에서는 phonegap-plugin-mobile-accessibility plugin을 설치하고

(<any>window).MobileAccessibility.speak(msg);

위 코드를 이용하여 원하는 메시지를 읽어주면 된다.

↓자세한 내용은 아래 링크에 작성해놓았다.

2019/09/18 - [개발/ionic2, Angular] - ionic에서 Voice Over/Voice Assistant/Talk Back이 켜져 있을 때 원하는 문장을 읽어주는 법 (모바일 접근성)