접근성에 있어 중요한 것은 앱이나 웹에 구성되어 있는 버튼이나 이미지들이 어떤 의미를 갖는지 파악할 수 있게 하는 것과 페이지 전환시 해당 페이지가 무엇을 위한 페이지인지 알려주는 것이다.
첫째, 각 객체에 대한 안내를 위해 각각의 버튼이나 이미지 태그에 title 혹은 alt 값을 통해 메타데이터를 넣어줘야 한다.
하지만, 모바일앱 개발시 사용하는 ionic과 같은 프레임워크를 사용할 경우 직접적인 입력이 어려운 경우가 있다.
- 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'); });
- 사이드 메뉴 버튼
– 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 내에서의 설정사항이다.