널리

안녕하세요, 엔비전스입니다.

웹 접근성에 대해 어느 정도 지식이 있으신 분들은 되도록 HTML에서 제공하는 표준 태그를 이용하여 컨트롤 즉 링크나 버튼과 같은 요소를 만들고 WAI-ARIA는 HTML이 커버할 수 없는 보조 수단으로 사용하는 것임을 알고 계실 것입니다.

즉 HTML로 의미를 표현할 수 있는 태그(button, a 등)를 사용하지 않고 span과 같은 태그에 굳이 onClick 요소와 WAI-ARIA를 사용하게 되면 사용자 환경에 따라 이벤트가 실행되지 않을뿐만 아니라 작업이 번거롭게 됩니다.

그러나 상황에 따라 HTML에서 제공하는 기본 태그를 사용하지 못하고 커스텀 컨트롤을 사용해야할 때가 있습니다. 따라서 이번 아티클에서는 왜 HTML의 기본 태그를 사용해야 하는지, 그럼에도 불구하고 상황에 따라 사용하지 못하는 이유는 무엇인지, 마지막으로 이러한 경우 어떤 이슈에 주의해야 하는지를 간략하게 다루어 보려고 합니다.

스크린리더와 브라우저 API

스크린리더가 브라우저에 로드된 웹 페이지 정보를 읽으려면 브라우저의 API를 통해 페이지 요소들의 정보를 스크린리더로 전달해 주어야 합니다. 예를 들어 a 요소로 감싼 널리에 포커스 하면 스크린리더는 ‘널리 링크’라고 읽습니다. 이것은 브라우저에서 현재 포커스한 곳이 하이퍼 링크임을 스크린리더에게 브라우저 API를 통해 정보를 전달해 준 다음 전달된 페이지 정보를 스크린리더가 출력하는 것입니다.

그런데 여기서 한 가지 유념해야 할 것은 각 요소에 따라 키보드 액션이 달라지는 것에 관한 것입니다. 예를 들어 체크박스는 엔터키로 체크/체크해제가 작동하지 않고 버튼 요소는 스페이스와 엔터키가 다 작동합니다. 링크나 편집창과 같은 요소는 탭키를 눌렀을 때 포커스가 되지만 p와 같은 요소는 탭키를 눌렀을 때 포커스 되지 않습니다. 이것은 브라우저가 각 요소마다의 고유한 키보드 액션을 정의해 놓고 있어서 사용자가 그 요소에 포커스하면 정의된 키보드 키를 눌렀을 때 실행되도록 하고 있기 때문입니다.

위의 설명에 근거해서 다음 소스코드를 살펴보겠습니다.

<span role="button" onclick="myFunction()">엔터 또는 스페이스바를 눌러 보세요</span>

<p id="demo"></p>

<script>

function myFunction() {

document.getElementById("demo").innerHTML = "안녕하세요";

}

</script>

위의 ‘엔터나 스페이스바를 눌러 보세요’에 스크린리더 포커스를 가져가면 역시 버튼이라고 읽어줍니다. 그런데 스크린리더에서 지원하는 가상커서가 아닌 일반 브라우저가 지원하는 기능만으로는 이 버튼에서 엔터를 눌러도 해당 요소에 연결된 함수가 실행되지 않습니다. 또한, 탭키로 포커스를 맞출 수 없습니다. 그것은 이 요소가 span 태그로 되어 있고 브라우저에서는 span 태그에는 키보드 액션을 부여하지 않았으며 자바스크립트에서는 클릭이벤트에 대한 기능한 정의했기 때문입니다. 즉 WAI-ARIA는 스크린리더에게 그 요소의 정보만을 출력해줄 뿐입니다.

스크린리더 가상커서에서는 제조사마다 차이가 있지만 가상커서에서 접근성이 잘 갖춰지지 않은 요소에 대해서도 나름대로 각 기능이 실행되도록 액션을 제공하고 있습니다. 그러나 스크린리더 없이 키보드만으로는 위와 같은 요소를 실행할 수 없고 스크린리더마다 지원하는 범위가 달라 문제가 발생할 수 있는 것입니다. 따라서 native HTML을 사용하는 것이 중요합니다.

그럼에도 불구하고 상황에 따라서는 이러한 기본 태그를 사용하지 못할 때가 있습니다. CSS를 사용하여 페이지를 디자인할 때 기본 태그의 모양을 완전히 감출 수 없으며 브라우저 버전마다 각 태그를 나타내는 디자인이 달라 모든 브라우저에서 동일한 화면을 구성하기 어렵기 때문입니다. 이러한 경우 불가피하게 기본 태그를 쓰지 못하고 span과 같은 태그를 사용하고 디자인으로 시각적인 기능을 표시하게 됩니다.

커스텀 컨트롤 사용시 고려사항

이렇듯 어쩔 수 없는 경우에는 WAI-ARIA 속성을 추가함은 물론 그 요소가 키보드로도 연결된 이벤트를 실행할 수 있도록 스크립트를 만들어 주어야 합니다.

위의 ‘엔터나 스페이스바를 눌러 보세요’ 버튼이 가져야 하는 키보드 액션은 탭키와 스페이스, 그리고 엔터키입니다. 탭키는 해당 요소에 포커스되도록 하는 기능을 하며, 스페이스바와 엔터는 버튼을 실행하게 하는 키입니다. 그리고 스크린리더가 이 요소를 버튼이라고 인식해야 합니다(이미 버튼 롤로 해당 속성 적용).

tab키와 shift + tab키로 이 요소가 포커스되게 하는 것은 tabindex=0 속성을 사용합니다. 그리고 click 이벤트 외에도 keypress 이벤트를 통해 키보드 액션도 정의합니다. 이때 단순히 그냥 keypress만 쓰면 스페이스와 엔터뿐만 아니라 탭키와 같은 키들을 눌러도 그 버튼을 누르는 액션이 되므로 아래의 jQuery 조건문을 통하여 엔터와 스페이스를 누를 때만 작동하도록 정의해 주어야 합니다. 여기서는 function 이름을 a11yClick으로 정의합니다.

function a11yClick(event){

    if(event.type === 'click'){

        return true;

    }

    else if(event.type === 'keypress'){

        var code = event.charCode || event.keyCode;

        if((code === 32)|| (code === 13)){

            return true;

        }
    }

    else{

        return false;

    }

}

위의 구문을 해석해 보면 그 요소를 클릭하거나 키보드에 정의된 키값 중 32나 13에 해당하는 버튼이 눌리면 트루로, 그렇지 않으면 false로 처리하라가 됩니다. 여기서 32와 13은 키보드의 엔터와 스페이스 키값입니다.

이렇게 정의한 a11yClickEvent 명령을 위의 소스에서 정의된 myFunction 이벤트에 적용시켜 클릭과 키보드 입력이 a11yClickEvent와 같으면 ‘안녕하세요’라는 글자를 출력하도록 적용하면 됩니다.

이처럼 커스텀컨트롤을 사용할 때는 각 컨트롤이 의미하는 요소가 무엇인지, 그리고 그 요소가 가지는 키보드 액션이 무엇인지를 판단하여 그러한 코드들을 일일이 추가해 주는 것이 중요합니다.

다음은 위에서 설명한 스크립트를 적용한 샘플페이지 링크입니다. 필요하신 분들은 샘플페이지에 가셔서 접근성이 적용된 버튼에 대해 살펴보시면 됩니다.
샘플페이지

이 글이 웹접근성을 개선해 나가는데 조금이나마 도움이 되었으면 좋겠습니다.