ionic framework 내에서 접근성 향상을 위한 팁

Study, 접근성, , , ,

접근성에 있어 중요한 것은 앱이나 웹에 구성되어 있는 버튼이나 이미지들이 어떤 의미를 갖는지 파악할 수 있게 하는 것과 페이지 전환시 해당 페이지가 무엇을 위한 페이지인지 알려주는 것이다.

첫째, 각 객체에 대한 안내를 위해 각각의 버튼이나 이미지 태그에 title 혹은 alt 값을 통해 메타데이터를 넣어줘야 한다.

하지만, 모바일앱 개발시 사용하는 ionic과 같은 프레임워크를 사용할 경우 직접적인 입력이 어려운 경우가 있다.

  1. Back 버튼에 문자 삽입
    – ionicframework을 사용하는 경우 back 버튼이 자동으로 생성된다.
    – 하지만 기본 생성되는 버튼에는 back 버튼에 대한 메타데이터가 없다.
    – 이에 $ionicConfigProvider를 통해 back 버튼에 text를 넣어줄 수 있다.

    //아래와 같이 config 모듈을 만들어서 넣는 것도 좋은 방법이다.

angular.module('app.config', [])
 .config(function($ionicConfigProvider) {
 // note that you can also chain configs
 $ionicConfigProvider.backButton.text('Back');
 });
  2. 사이드 메뉴 버튼
    – ionicframework에서 사이드메뉴를 사용할 때 기본템플릿에서 특성 부분에 title 값을 넣어주면 된다.

    // 
<ion-side-menu-content>
 <ion-nav-bar class="bar-positive">
 <ion-nav-back-button></ion-nav-back-button>
 <ion-nav-buttons side="left">
 <button class="button button-icon button-clear ion-navicon" menu-toggle="left" title="menu">
 </button>
 </ion-nav-buttons>
 </ion-nav-bar>
 <ion-nav-view name="side-menu21"></ion-nav-view>
 </ion-side-menu-content>

둘째,  페이지 포커스 이동

메뉴를 통해 페이지가 이동되는 경우 해당 페이지 로딩시 현재 페이지가 어떤 페이지인지에 대한 안내가 필요하다.

ionicframework에서는 html과 javascript의 설정을 통해 포커스를 이동해 줄 수 있다.

//<html> 페이지 상단에 위치
<a href="#" class="hidden" id="pageid">page description</a>
//해당 controller에 대한 javascript 
 //focus to page info
 $scope.$on('$ionicView.enter', function(){
 document.getElementById("pageid").focus();
 });

이상 접근성을 위한 ionicframework 내에서의 설정사항이다.
Share