Semantic markup - onclick·href=”#”에 관하여

onclick·href=”#”

이번 포스팅에서는 요소가 가진 의미와 onclick event의 적절한 사용법에 대해 알아보도록 합니다.

링크와 버튼의 의미

스크린리더 사용자는 각 요소가 가리키는 속성에 따라 동작을 예측하고, 해당 요소를 실행하는 데에 맞는 키 조작을 염두에 두고 웹 페이지를 사용합니다. 

이를테면 체크박스이면 해제/선택할 수 있는 요소이므로 엔터 키가 아닌 스페이스를 사용하고 콤보 상자 면 alt + 아래쪽 화살표를 눌러 리스트를 확장하여 요소를 선택합니다. 

그러면 스크린리더 사용자는 링크와 버튼의 의미는 어떻게 받아들이고 조작할까요?

링크는 아시다시피 일반적으로 목적지로 이동, 버튼은 제출·로그인 등과 같이 기능을 수행하는 트리거로 이해됩니다.

예를 들어 로그인이라는 텍스트가 링크인지 버튼(Submit) 요소인지에 따라 로그인을 눌렀을 때 실행되리라 예측하는 것이 다릅니다. 

만약 링크라면 로그인 정보를 입력하는 페이지로 이동할 것이라는 것을 예상할 수 있고 버튼이면 사용자가 입력한 정보를 통해 페이지에 로그인하는 기능이라 예상합니다. 

물론 단순히 로그인이 링크 혹은 버튼 인지만을 확인하여 판단하지 않고 전체적인 맥락 역시 고려의 대상이 됩니다만 일반적으로는 위에 기술한 의미로 이해합니다.

좀더 깊게 들어가면 링크도 현재 페이지 링크, 메일 링크 등으로 세분화됩니다. 

즉 만약 ‘본문으로 바로가기’와 같이 id를 지정하고 A 요소에 href=”#”이 추가된 경우 스크린리더에서는 이러한 링크를 현재 페이지 혹은 same page 링크라 출력합니다. 

스크린리더 사용자는 해당 요소는 다른 url이 아닌 현재 페이지에서의 다른 위치로 이동함을 예측할 수 있습니다. 

a 요소에 mailto 속성이 들어가면 스크린리더는 메일 링크라고 읽어주어 사용자에게 다른 메일 프로그램이 실행됨을 명확하게 전달해줍니다.

링크와 버튼은 키보드 사용법도 다릅니다. 링크는 일반적으로 엔터키로만 실행할 수 있는데 비해 버튼은 엔터뿐만 아니라 스페이스로도 실행이 가능합니다.

Onclick, href=”#”

우리가 일반적으로 onclick event가 붙은 요소를 마크업 한 것을 살펴보면 접근성을 준수하기 위하여 href=#을 추가하는 경우가 많음을 알 수 있습니다. 이는 a 요소에 href 속성이 없으면 브라우저 api에서 키보드 접근성을 지원하지 못하여 탭 키로 요소를 선택하는 등의 액션이 불가능하기 때문입니다. 

그런데 앞에서 설명한 버튼과 링크의 의미에 비추어 생각해본다면 onclick은 목적지로 가는 요소가 아니라 기능이 실행되는 역할을 합니다. 

따라서 a 요소의 href는 아무런 의미를 갖지 않으므로 불필요한 소스 코드일뿐 아니라 스크린리더 유저에게도 정확한 요소 전달을 해주지 못하게 됩니다.

한 가지 예를 더 들어보겠습니다.

html

<a id="x_123" class="niftyNuBtn" href="javascript:;">Do Something</a>

위의 소스 코드 역시 특정 기능을 실행하는 스크립트이지 목적지로 가는 요소가 아니므로 링크로 요소 전달이 되는 것은 정확하지 않습니다. 

그렇다면 해결방안은 무엇일까요? 

button 요소를 사용하는 것이 onclick 요소 혹은 javascript의 의미를 좀더 정확하게 알려줄 수 있습니다.

디자인 이슈

Onclick 요소는 대개 시각적으로는 링크처럼 표시하는 경우가 많기 때문에 button 요소를 사용할 경우 디자인에 어울리지 않을 수 있습니다.

이때 요소는 버튼으로 유지하고 다음과 같은 css를 적용해볼 수 있습니다

css

link {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
}

위의 css로 커버가 되지 않는 경우에는

• A 요소를 사용하고 aria 속성 중 button role을 사용하여 스크린리더에게 버튼임을 알려줍니다.
• Href 속성이 없어 탭키로 해당 요소에 포커스가 되지 않고 스크린리더 없이 엔터나 스페이스로 액션을 실행할 수 없으므로 커스텀 컨트롤에 접근성 적용하기 아티클을 참고하여 tabindex 및 스크립트를 추가해 줍니다.
• 만약 해당 버튼이 배너 영역의 두 번째 배너 버튼과 같이 선택되었음을 같이 나타내 주어야 한다면 aria-selected="true" 등의 속성을 추가로 사용할 수 있습니다.>

Tip : 버튼 요소명이 아이콘으로 표시될 때는 aria-label

검색 버튼과 같은 요소의 경우 버튼명을 아이콘으로 표시하기도 합니다. 

이런 경우 aria-label을 통하여 스크린리더용 버튼 요소명을 부여해줄 수 있습니다.

html

<button aria-label="닫기" onclick="myDialog.close()">X</button>

Jaehee's WebClub

[출처] NULI(널리)