HTML5와 접근성

HTML5 & Accessibility

일반적인 HTML5 접근성에 대해 간단히 알아봅니다. 

안타깝게도, 접근성은 열악한 지원, 엉망으로 만들어진 어플리케이션, ‘상호 공격’으로 이어지는 격정적인 정책들 속에서 화제로 떠오르곤 합니다. 

하지만 다행스럽게도, W3C의 HTML Design Principles은 접근성^[각주:1]에 적합하면서 실용적인 두 가지면을 모두 가지고 있습니다. 

‘보편적인 접근(Universal Access)’이라는 원칙은 미디어의 독립과 능력에 구애받지 않는 모든 사람들에 의한 접근을 언급하고 있습니다. 

미디어 독립이라는 의미는 HTML5의 기능들이 시각적인 브라우저에서 뿐만 아니라, 다양한 플래폼에서도 작동이 되어야 한다 라는 뜻입니다. 

그러나, 모든 사람들에 의한 접근은 HTML5가 어떻게 접근성에 다가갈 수 있는지에 대한 더 근본적인 변화를 암시하고 있습니다. 

관례상, 접근이 용이한 컨텐츠를 만드는 일은 <img alt=””>와 <table summary=””>와 같은 접근성을 위한 특정 기능을 얼마만큼 사용하느냐에 달려 있었습니다. 

안타깝게도 현실은, 이 같이 감춰지는 메타 데이타를 거의 추가하지 않거나, 추가했다 하더라도 형편없이 그리고 정확하지 않게 이루어 졌습니다. 

감춰지기 때문에 메인 컨텐츠가 업데이트 될 때마 그 작업에 맞춰 메타 데이터들의 업데이트가 동시에 이루어 지지 않았습니다. 

HTML5의 근본적인 철학은 메타 데이타들의 정보를 메인 컨텐츠로 옮김으로써 그 정보를 노출하는 것입니다.  그래야 모든 사용자에게 유익하기 때문입니다. 

이것은, 이미지, 테이블 등등의 요소들이 충분히 묘사되도록 우리가 어떻게 해야 하는지, 그리고 속성 안에 정보를 숨기기 보다 우선적으로 이루어 져야 하는 것에 대해 HTML5 명세에서 상세한 지침으로 이어졌습니다.

이러한 철학은 다음과 같이 요약되어 질 수 있습니다.

가능한 한, 무의식적으로 접근이 용이한 컨텐츠를 작성하게 하라!

다소 냉소적이긴 하나, 내장된 의미론적인 뜻을 가지고 있는 HTML5 요소들이, 자동으로 접근이 용이한 컨텐츠를 생성하게끔, 어떻게든 웹 개발자들을 은근슬쩍 고무시키고 있는지를  보여주는 명백한 본보기일 수 있습니다. 

훌륭한 접근성은 항상 부가적인 작업을 요하지만, 접근성의 기준을 눈에 띄게 향상시켜 주는 이러한 새로운 접근방식에 접근해야 할 것입니다.

서서히 진화하는 접근성의 기법들!

<table> 요소에 summary(지금은 다른 기법을 대신 사용해야 함.)와 <img> 요소에 longdesc(지금은 사양되었음.)와 같은 접근성의 주요 산물을 받아 들이는 HTML5의 실용적인 입장에 대해 모든 사람들이 열광하는 것은 아니다 라는 사실을 알아야 할 것입니다. 

그러나, 우리가 HTML5의 Design Principles을 고수하고 능력과 상관없이 모든 사람들에 의한 접근에 촛점을 맞추는 한 이러한 언쟁을 무시해도 될 것입니다. 

변화는 접근이 용이한 컨텐츠를 만드는데 필요한 표준화된 기술 중 일부에 영향을 미칠 것입니다. 

다음에 오는 기본적인 것들을 살펴보도록 합니다

<img>의 alt 속성

HTML5는 alt를 <img> 요소의 단순한 대체 텍스트(alternate text)라기 보다 만일의 상황에 대비하는 대체 컨텐츠(fallback content)로서 정의하고 있습니다. 

명세는 아주 특정한 경우를 제외하고는 alt 텍스트는 반드시 필요하고, 이미지에 대한 적절한 대체물이어야 한다고 명시하고 있습니다. 

그러나, 적절한 것은 이미지 용도에 달려 있다할 수 있습니다.

• 유용한 정보를 제공한다 : alt 텍스트는 동일한 내용을 전달하여야 한다.
• 기능을 수행한다 : alt 텍스트는 이미지의 기능을 전달해야 한다.
• 미학을 향상시킨다 : 어떠한 정보도 가지지 않는 장식용의 이미지를 그 예로 들 수 있다.  경우마다 다르지만, 대부분의 장식용 이미지는 빈 alt 텍스트(alt=””)로 남겨두어야 한다.

html

<img src="/img/albert.jpg" alt=오른쪽을 보고있는 붉은털 원숭이의 옆모습을 근접촬영. 배경은 흐릿하고, 흑백사진이다." />

이것은 묘사적인 alt 텍스트를 가진 이미지의 경우이고 이미지에 대한 적절한 구조적 대체물을 제공하고 있습니다.

html

<button><img src="/img/log-in-button.png" width="91" height="43" alt="Log in" /></button>

이것은 button의 컨텐츠를 alt 텍스트로 넣은 이미지의 경우입니다.

html

<img src="/img/decorative.png" width="64" height="24" alt="" />

이것은 오직 장식을 위한 이미지일 뿐입니다. 아무런 정보도 제공하고 있지 않기 때문에, 빈 alt=””가 적절한 경우입니다.

어떤 특정한 경우에는 빈 alt 텍스트를 이용하여야 한다고, HTML5 명세는 다음과 같이 명시하고 있습니다.

1. 주위의 컨텐츠에 이미지에 대한 설명이 이미 묘사되어 있을때 <figcaption>을 그 예로 들 수 있는데, 이는 반복을 피하기 위함이다.
2. 큰 이미지의 한 부분인 경우! 다른 부분의 이미지가 모든 이미지에 대한 적절한 alt 텍스트를 이미 포함하고 있는 경우이다.

장식용 이미지의 alt 텍스트 예에서 이미 언급하였듯이, 다음의 상황에서는 반드시 alt=””를 사용하라고 HTML5 명세는 강조하고 있습니다.

1. 이미지가 오직 장식을 위한 것일때. 이러한 장식용 이미지는 미적표현의 기능을 넘어서는 어떠한 기능도, 정보도 제공하지 않는다.
2. 감춰지는 이미지일때. width와 height는 ‘0’으로 설정되어져야 한다.
3. 아이콘이나 로고가 같은 의미를 가지는 텍스트 옆에 나란히 있는 경우이다.

즉, 해당 이미지가 어디에 사용되어 졌느냐, 그리고 무엇을 전달할 계획이냐에 따라서 완전히 다른 alt 텍스트 또는 빈 alt=””를 가질 수 있다 라는 의미입니다.

모든 이미지를 alt 속성의 텍스트로 대체하는 일은 페이지의 목적을 변화시켜서는 안된다.

우리는 ARIA 속성 aria-describedby=””를 사용할 수도 있습니다. 이는 이미지와 컨텐츠에 있는 그 설명 간의 분명한 의미론적인 연관성을 만들기 위함입니다. 

그러나, 일반적으로 글의 맥락을 따져보면 이것이 굳이 꼭 필요하진 않습니다. 

alt 텍스트는 이미지의 캡션 또는 제목이 아니라 대체 컨텐츠라는 점을 기억해야 합니다. 

이미지의 캡션이나 부가적인 설명이 필요하면 aria-labelledby와 똑같은 본래의 의미론을 가지고 있는 <figure>과 <figcaption>을 사용하든지, 아니면 title 속성을 이용할 수 있습니다.

alt 속성에 제공되어 있는 대체 컨텐츠와 <figcaption>에 캡션, 두 가지 모두를 가지고 있는 이미지의 한 예를 살펴봅니다.

html

<figure>
    <img src="/img/albert.jpg" alt="오른쪽을 보고있는 붉은털 원숭이의 옆모습을 근접촬영. 배경은 흐릿하고, 흑백사진이다."/>
    <figcaption id="albert">1949년 6월 14일 우주로 역사 여행을 하기 전의 Albert</figcation>
</figure>

alt 텍스트를 넣을 때, 전화로 누군가에게 페이지를 묘사한다고 상상보세요.

사장된 longdesc속성

longdesc 속성은 원래 이미지에 대해 더 많은 정보를 가지고 있는 분리된 페이지로의 링크를 제공하기 위함이었습니다. 

기본적으로 감춰지는 콘텐츠(거의 사용되어 지지 않았다.)이고, 또 정확하게 사용되어 지지 않았던 속성이라, HTML5에서는 더 이상 쓸모가 없어졌습니다. 

즉, 컨텐츠에 이 속성이 이미 존재해도, 브라우저 지원면에서는 변함이 없습니다. 

그러나, HTML5 명세는 longdesc 속성을 사용하지 말라고 촉구하고 있으며, HTML5 검사기에서는 에러 메세지를 받을 것입니다. 

권장되는 HTML5 대안은 이 컨텐츠를 현재 페이지에 추가하는 것입니다. 그리고 aria-describedby=””를 사용하여 연결시키면 됩니다. 

이 속성은 이미지에 대한 묘사를 이미지로 부터 멀리 옮겨 놓아도 무방하게 만들 수 있습니다. 

만약, 이미지에 대한 묘사 내용을 현재 페이지에 포함시킬 수 없다면, <a> 요소를 사용하여 묘사하고 있는 페이지로 링크를 걸면 되는 것입니다.  어쨌든 longdesc의 기능이나 마찬가지인 것입니다.

이렇게 함으로써, 보조기기를 사용하는 사람들 뿐만 아니라, 모든 사용사가 쉽게 컨텐츠에 접근할 수 있을 것입니다.

사장됐지만 준수하는 <table>의 summary 속성

먼저, 어떻게 해석해야 할까? 

그렇다. 쓸모 없게 된 기능은 유효성 검사기에서 에러 메세지를 받고, 반면 쓸모는 없지만 준수하는 기능은 단지 경고 메세지만 받는다는 것입니다. 

그래서 “사용하지 말라”고 딱 잘라 단정을 지을 수는 없습니다.  그러나 전달하고자 하는 메세지에는 변함이 없습니다. 

summary 속성은 특히 <table>에 대한 상세한 설명을 보조기기 사용자에게 제공하기 위해 만들어진 것이었습니다. 

하지만, 현실은 longdesc 사용 방식과 별 다른 차이가 없습니다. HTML5는 이 설명 텍스트를 메인 컨텐츠에 옮기고, 이해하기 힘든 표는 설명으로 소개되어져야 한다고 권하고 있습니다. 

이것은 주위의 컨텐츠에서, <caption>에서, <caption> 안에 <details>에서, <figure> 등등을 통해서 아주 다양한 방법으로 사용할 수 있습니다. 

그러나, 이상적인 해결방법은 <table> 레이아웃과 더 이해하기 쉽게 만들어 주는 headings을 조정하는 것입니다. 

그래서 설명이 따로 필요없게 될 것입니다.

다음은 HTML5 요소와 ARIA landmark roles의 비교 테이블에 대한 예제입니다. 

이 테이블은 <caption>, <thead> 그리고 영역지정(scope) 요소를 사용하고 있고, 부가적인 설명이 필요없을 정도로 충분이 명확합니다.

html

<table id="mapping-html5-to-aria-landmark">
    <caption>
        HTML5의 각 구조적 요소에 적합한 <abbr>ARIA<abbr> Landmark Roles
    </caption>
    <thead>
        <tr>
            <th scope="col">HTML5 요소</th>
            <th scope="col"><abbr>ARIA</abbr> Landmark role</th>
            <th scope="col">Notes</th>
        </tr>
    </thead>
    </tbody>
    ..........
    ..........
</table>

마치며

HTML5 접근성 중 다른 영역(특히, <video>, <audio>, 그리고 <canvas>와 같은 새로운 요소에)은 아직 활발하게 진행중에 있습니다. 

"능력과는 상관없이 모든 사람들에 의한 접근은 가장 기본적인 것이다" 라고 W3C HTML Design Principles이 명시하고 있는 것처럼, 접근성의 쟁점에 대한 도전은 계속되고 있습니다. 

HTML5의 창시자 만큼이나 우리에게도 중요한 부분은 특정화된 기술을 사용하기 보다 이러한 목표를 달성하는 일일 것입니다. 

대단히 향상된 새로운 요소들의 내장된 의미론과 미디어 독립이라는 원칙과 함께 HTML5는 자연스럽게 그 이전 것보다 이미 더 접근이 용이해 졌습니다. 

그리고, 비록 잘 짜여진 HTML5에는 굳이 필요 없겠지만, WAI-ARIA 또한 사용할 수 있는 능력은, HTML5의 내장된 의미론을 무효화시키려 하지 않는 범위 내에서 요구될 때, 접근성을 더 보충할 수 있습니다. 

지금 우리에게 필요한건 유저 에이전트(User Agent)의 지원일 것입니다.

Jaehee's WebClub

1. W3C의 디자인 원칙에 대한 접근성 : 디자인 기능은 장애가있는 사용자가 접근할 수있습니다. 모든 사람의 능력과 관계없이 접근할 수 있어야하는 것은 필수적이다. 기능에 있어서 모든 사용자들이 최대한 활용할 수있는 경우에는 기능이 완전히 생략되어야하지만 다른 메커니즘이 제공되어야한다는 것을 의미하지 않는다. [본문으로]