id를 이용한 링크

HTML 4.01 - 7.5.2 Element identifiers: the id and class attributes

페이지 내에서 이동하는데 사용되는 링크는 크게 두가지 방법으로 이용됩니다. 가장 많이 사용되는 방법은 이동하고자 하는 부분에 <a> 태그를 추가하고 그 태그에 name 속성을 지정하는 방법입니다. 이렇게 만들어진 <a> 태그는 다른 곳에서 <a href="#name">과 같이 접근할 수 있습니다. 현재 스크린리더는 이 방법을 지원하고 있습니다.

또 다른 방법은 id를 이용하는 방법입니다. 위의 방법 처럼 <a> 태그를 추가하는 것이 아니라 이동하고자 하는 부분에 있는 HTML태그에 id를 부여하고 링크를 <a href="#id">와 같이 사용하는 것입니다. CSS를 이용해서 웹페이지를 제작할 경우 id와 class를 많이 사용하게 되는데 이때 사용한 id를 링크나 스크립팅에도 같이 사용하는 효율적인 방법입니다. 현재 이러한 방식의 링크는 브라우저에서는 잘 지원을 하고 있지만 스크린리더는 지원을 하고 있지 않습니다.

<label> 태그의 지원

사용자 입력 폼에서 입력창과 텍스트를 연결해 주기 위해서 <label> 태그를 사용합니다. 레이블 지정은 두가 방법으로 사용할 수 있습니다. 첫번째는 <label>의 for 속성과 <input>의 id 속성을 같게 부여하여 명시적으로 연결하는 방법입니다.

<label for="user-id">아이디</label>
<input id="user-id" type="text" />

"user-id"를 동일하게 부여하여 레이블과 입력창을 연결해 주었기 때문에 입력창에 대한 명확한 레이블을 알 수 있습니다. 두번째 방법은 명시적인 지정 없이 텍스트와 입력창을 <label> 태그로 묶어주는 것입니다.

<label>
    아이디
    <input type="text" />
</label>

첫번째와 같이 명시적으로 서로를 연결시키는 방법은 레이블과 입력창 사이에 다른 요소 - </td>와 같은 태그 - 가 있는 경우에도 사용할 수 있는 반면에 두번째와 같이 암묵적으로 연결시키는 방법은 반드시 텍스트와 입력창이 같은 곳에 위치하고 있어야 하고 레이블 안에 다른 요소를 포함해서도 안됩니다.

레이블은 라디오 버튼이나 체크박스에 사용하게 되면 항목이 많아도 라디오 버튼의 앞의 텍스트가 레이블인지, 뒤의 텍스트가 레이블인지 혼동하지 않고 정확하게 자기가 원하는 항목을 선택할 수 있습니다.

성별 : 
<input id="gender-male" type="radio" />
<label for="gender-male">남자</label>
<input id="gender-female" type="radio" />
<label for="gender-female">여자</label>

국산 스크린리더의 경우 <label> 태그 자체를 지원하지 않기 때문에 두가지 방법 모두 지원되지 않습니다. 외산 스크린리더의 경우 대부분 명시적인 연결은 지원하지만 암묵적인 연결은 지원하지 않습니다. 그래서 많은 접근성 관련 글들에서는 명시적 연결을 권장하고 암묵적 연결은 사용하지 않는 것이 좋다고 하고 있습니다. 이는 아마도 IE가 암묵적인 레이블 사용을 지원하고 있지 않아서인 것 같습니다. 구현이 용이하다면 두가지 방법을 모두 지원하는 것이 좋을 것입니다.

리스트의 인식

<ul>, <ol>, <dl>은 항목의 나열인 리스트를 나타내는 태그 입니다. <ul>, <ol>은 하나의 항목을 나타낼 때 <li>를 이용하고 <dl>은 <dt>, <dd>를 이용합니다. 리스트는 CSS를 이용해서 사이트를 제작할 때 가장 많이 사용하는 태그이고 네비게이션과 같은 주요한 기능들에도 사용합니다.

<ul>
    <li>리스트 항목 1</li>
    <li>리스트 항목 2</li>
    <li>리스트 항목 3</li>
</ul>

국내 스크린리더의 경우 이 리스트를 그냥 일반 텍스트와 같이 처리하여 항목들이 구분이 되지 않습니다. 외산 스크린리더의 경우 테이블과 비슷하게 리스트의 시작에서 항목의 갯수를 알려주어서 리스트가 시작되었다는 것과 그 크기를 알려줍니다.

리스트는 단독으로 쓰이는 경우가 많지만 중첩해서 사용하는 경우도 많습니다. 가장 대표적인 예가 사이트의 상단 메뉴와 같은 부분입니다.

<ul>
    <li>메뉴 1
        <ul>
            <li>하위 메뉴 1</li>
            <li>하위 메뉴 2</li>
            <li>하위 메뉴 3</li>
        </ul>
    </li>
    <li>메뉴 2</li>
    <li>메뉴 3</li>
</ul>

이와같이 리스트를 중첩해서 사용할 때에는 밖의 큰 리스트와 안에 포함된 리스트를 명확하게 구분할 수 있어야 합니다. "하위 메뉴 1"은 "메뉴 1"과 명확하게 구분할 수 있어야 메뉴에서 현재 선택되어 있는 부분을 확실하게 알 수 있습니다. 현재의 국내 스크린리더의 경우 이 리스트를 모두 일반 텍스트와 같이 처리하여 항목들이 구분 되지 않습니다. 리스트의 시작과 끝을 사용자가 인지할 수 있어야 CSS로 제작된 페이지를 이용할 때 효과적으로 사이트를 이용할 수 있을 것입니다.