화면을 볼 수 없는 장애인들은 스크린리더기 같은 장비를 통해 화면을 읽어야 하는데요.
화면에 특정한 구분이 있다면, 좀 더 편리하게 읽을 수 있을 것입니다.

그래서 W3C 에서는 관련하여 WAI-ARIA 스펙을 Recommendation 했는데요.
이게 나온지 좀 되었지만, 제대로 적용 하는 곳을 본적이 없습니다.

그러다가 미국에서도 우리나라 “웹접근성”관련 법률 처럼 법안이 수정 되었는데…
아마도 여기에 많이 필요한가 봅니다.

[Section 508]
  • 미국 정부에서 제정한 장애인의 정보 접근권에 대한 가이드 라인
  • 웹 페이지에 있어서 장애가 있는 사람이라고 할 지라도 해당 사이트의 내용에 접근하는 것에 큰 불편함이 없도록 해야 한다.
  • URL : http://www.section508.gov/

Ext JS 같은 웹어플리케이션 제작 툴에서는 엔진에서 제공해 주지 않으면 ARIA 속성을 적용하기 어려웠습니다.

반면, jQueryMobile 에서는 손쉽게 자동으로 엔진에서 적용 해 주었습니다.

이번 Ext JS 4.2.1 부터 이 기능을 지원하게 되었습니다.
어려운 기능이 아닌것이라 사용 방법도 간단 합니다.

[적용 방법]
Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: 'Main Panel',
    ariaRole: 'application',
    ...
});

또는 이렇게 말이죠.

Ext.define('MyAriaApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires: [
        'Ext.layout.container.Border'
    ],

    layout: 'border',

    defaults: {
        split: true
    },

    items: [{
        region: 'west',
        width: 200,
        title: 'West Panel',
        ariaRole: 'region',
        items: [{
            xtype: 'textfield'
        }, {
            xtype: 'textfield'
        }, {
            xtype: 'button',
            text: 'Toggle Me',
            enableToggle: true
        }]
    }, {
        xtype: 'tabpanel',
        region: 'center',
        title: 'Center Panel',
        ariaRole: 'region',
        items: [{
            title: 'Tab 1'
        }, {
            title: 'Tab 2'
        }, {
            title: 'Tab 3'
        }]
    }, {
        region: 'east',
        width: 200,
        title: 'East Panel',
        ariaRole: 'region'
    }]
});

이렇게 작성 하시면, 아래 처럼 렌더링 될 때 role 속성이 부여 됩니다.

button-element

role 속성과 aria-pressed 보이시죠

쉽지요…^^

보다 자세한 내용은 Ext JS Docs. 를 참고 하시기 바랍니다.