[웹 접근성] 버튼과 링크 그리고 접근성

이번 포스트에서는 버튼과 링크, 그리고 접근성에 대해서 이야기해 볼까 합니다.

웹사이트나 웹어플에서 버튼과 링크는 없어서는 안 되는 존재입니다.

버튼 없이는 아무런 상호작용도 못하고, 링크 없이는 어느 곳으로도 갈 수 없습니다.

'버튼이 버튼이고, 링크가 링크지 접근성이랑 무슨 상관?'이라고 생각하시나요?

그렇다면 당신은 아직 HTML을 제대로 이해하지 못했습니다.

웹접근성에서 자주 언급되는 중요사항 중 하나가 시맨틱 HTML을 사용하는 것입니다.

그럼 이제 버튼이랑 링크를 제대로 파헤쳐볼까요?

좋은 버튼 만드는 방법

좋은 버튼을 만들려면 먼저 버튼의 사용 용도를 알아야 합니다.

버튼은 무언가를 할 때(액션) 사용하는 요소입니다.

그러면 어떤 버튼이 좋은 버튼일까요?

일단 좋은 버튼은 그 목적과 결과가 사용자에게 뚜렷하게 전달됩니다.

여기서 사용자는 스크린 리더 사용자도 포함합니다.

버튼에 뚜렷한 목적 설정하기

버튼의 목적은 어디에 어떻게 사용되는지에 따라 달라집니다.

버튼을 만드는 방법은 크게 세 가지 방법으로 볼 수 있습니다.

일반 텍스트를 사용한 버튼

<button>검색</button>

이 방법은 별거 없습니다. 그냥 우리가 이미 아는 방법으로 <button> 요소 안에 일반 텍스트를 사용하면 끝입니다.

윈도 크롬 브라우저에서 NVDA로 읽으면 "검색 버튼"이라고 읽습니다.

이미지를 사용한 버튼

<button>
    <img src="search.png" alt="검색" />
</button>

이미지 버튼은 <button> 요소 안에 이미지를 사용해서 만든 버튼입니다. 이 방법으로 버튼을 만들 땐 alt 속성에 버튼의 목적을 작성해야 합니다.

윈도 크롬 브라우저에서 NVDA로 읽으면 "검색 그래픽 버튼"이라고 읽습니다. "그래픽"은 이미지를 말합니다.

alt를 사용하지 않으면 "버튼 레이블 없는 그래픽"이라고 읽습니다. "버튼 레이블 없는 그래픽"은 지금 스크린 리더가 버튼에 있지만 이 버튼이 어떤 버튼인지, 어떤 용도인지 전혀 알 수 없습니다.

아이콘을 사용한 버튼

<button aria-label="검색">
    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
</button>

아이콘 버튼은 <button> 요소 안에 아이콘을 사용해서 만든 버튼입니다. 이 방법을 사용할 땐 아이콘에 aria-hidden="true"를 사용하고 버튼에 aria-label="검색"을 사용합니다.
aria-hidden="true"는 요소를 스크린 리더로부터 숨길 때 사용합니다. 요소가 스크린 리더 사용자에게 불필요하다고 여겨질 때 사용합니다. 아이콘 같은 경우는 주로 디자인 때문에 사용되기 때문에 스크린 리더 사용자에겐 불필요한 정보입니다.
aria-label="검색"은 <button> 검색 </button>이랑 같은 효과를 나타냅니다.
이렇게 만들면 윈도 크롬 브라우저에서 NVDA로 읽으면 "검색 버튼"이라고 읽습니다.
aria-label과 aria-hidden을 사용하지 않으면 "버튼" 이라고만 읽습니다.

메뉴 버튼

메뉴 버튼은 메뉴를 열고 닫을 때 사용됩니다. 처음부터 그렇게 디자인하는 경우도 있지만 주로 모바일같이 작은 화면에서 많이 보이는 버튼입니다. 이 버튼을 만들 때 위 세 가지 중 하나를 사용해서 만들면 되지만 한 가지 더 추가해야 합니다.

<!-- 닫혇을때 -->
<button aria-label="메뉴" aria-expanded="false">
    <i class="fa-solid fa-bars" aria-hidden="true"></i>
</button>

<1-- 열렸을때 -->
<button aria-label="메뉴" aria-expanded="true">
    <i class="fa-solid fa-bars" aria-hidden="true"></i>
</button>

위 예시에서 아이콘 버튼으로 메뉴 버튼을 만들었습니다. 여기서 한 가지 추가된 속성이 aria-expanded입니다.
이 속성은 버튼이 무언가를 열고 닫을 때 사용합니다. 이 속성의 값이 false이면 현재 닫혀있다는 뜻이고 true이면 열려있다는 뜻입니다.
윈도 크롬 브라우저에서 NVDA로 false일 때 읽으면 "메뉴 버튼 접힘"이라고 읽고, true일 때 읽으면 "메뉴 버튼 열림"이라고 읽습니다.

좋은 링크 만들기

링크는 버튼과는 다르게 이동할 때 사용하는 요소입니다.
좋은 링크를 만드는 방법은 버튼과 비슷하지만 한 가지 다르다면 목적대신 목적지를 나타내야 합니다.

<a href="...">블로그</a>

<a href="...">
    <img src="blog.png" alt="블로그" />
</a>

<a href="..." aria-label="블로그">
    <i class="fa-solid fa-blog" aria-hidden="true"></i>
</a>

버튼처럼 텍스트, 이미지, 또는 아이콘을 사용해서 블로그 페이지로 가는 링크를 만들 수 있습니다.
여기서 이 우리는 이 링크의 목적지가 블로그 페이지라는 걸 알 수 있습니다.
윈도 크롬 브라우저에서 NVDA로 읽으면 "블로그 링크"라고 읽습니다.

<a href="...">
    <img src="blog.png" />
</a>

<a href="...">
    <i class="fa-solid fa-blog" aria-hidden="true"></i>
</a>

만약 alt나 aria-label을 사용하지 않으면 스크린 리더 사용자는 이 링크의 목적지가 어디인지 알 수 없습니다.
윈도 크롬 브라우저에서 NVDA로 읽으면 이미지를 사용한 건 "링크 레이블 없는 그래픽", 아이콘으로 사용한 건 "링크"라고 읽습니다.

결론

버튼과 링크 없이 웹사이트나 웹어플을 만들 수 없다고 할 수 있을 만큼 많이 사용되는 요소들입니다. 그만큼 그 사용 용도가 보조 기술 사용자들에게도 뚜렷하게 전달될 수 있도록 신경을 써야 합니다.

오늘 내용이 앞으로 여러분들이 버튼/링크를 만드는데 도움이 되길 바랍니다.

질문이나 수정사항이 있으시면 아래 댓글에 남겨주세요.