WAI-ARIA, 웹 표준과 웹 접근성에 대하여
위로 가는 버튼을 구현하려다 웹표준과 접근성에 대해 공부하게 되었다
발단은 2013년에 올라온 이 글
"원래 HTML 코딩할 때 주던 방식은 <a href="#top">맨 위로</a> 간단히 이렇게 했었다. 그러나, 저렇게 써 주면 접근성 오류는 물론이고 웹표준 프로그램 돌리면 링크 오류 뜬다. <a> 태그에 #기호를 쓰기 때문에 웹표준 오류!"
<a>와<button>은 기본 동작과 기능 뿐 아니라 키보드 인터랙션도 다르므로 키보드 사용자와 스크린리더 사용자에게 혼동을 가져온다.
링크와 버튼은 다른 요소로 마크업을 해야 하고, 같은 기능은 동일한 요소로 시맨틱하게 마크업해야 한다.- 버튼은 사용자가 양식을 제출해야 하거나, 팝업을 열거나, 동작을 실행 또는 취소 등 이벤트를 트리거할 때 사용하는 위젯으로 엔터키와 스페이스바로 동작이 되어야 한다.
- 링크는 주로 참조 자료를 제공하기 위해 사용하는 것으로 주로 타겟은 내부이거나 외부일 수 있으며, 엔터키로만 동작이 된다.
버튼 역할을 하는 건데 <a>요소로 제작되었다면 해결책
<button>요소로 변경하거나 ARIA role 속성을 사용하여 버튼 역할을 명시해 주고 스페이스바로 사용할 수 있도록 스크립트 이벤트를 추가해야 한다.- 롤 속성은
role="button"이것
WAI-ARIA란?
마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다.
(ex. 버튼을 클릭하여 페이지 새로고침이나 링크 이동으로 페이지가 전환되는 것이 아닌 컨텐츠 내용이나 구조가 바뀌는 상황에서 페이지 전환 상태나 정보를 WAI-ARIA로 알려준다.)
또한 WAI-ARIA는 단순 HTML로 표현할 수 없는 의미들을 태그에 부여하여 시각적인 불편함이 있는 사용자들게 일반적인 구조의 HTML에서 필요한 요소에 적절한 정보를 전달받아 원활하게 페이지 탐색 및 이용을 하도록 도와준다.
- 주의점
- 올바르지 못한 ARIA를 사용할 바엔 ARIA를 사용하지 않는 편이 좋다.
- 스크린리더를 사용하여 페이지에 접근하는 경우 ARIA의 정보에 의지하게 되는데 바르지 못한 정보를 제공하게 되는 경우 스크린리더 사용자의 페이지 접근에 치명적인 영향을 주게된다.
- ARIA를 사용하기 전에 태그의 역할과 의미에 맞게 작성한다.
- 태그의 기본 의미를 중복해서 선언할 필요는 없다.
- 페이지에서 사용하는 태그의 역할이 잘못된 ARIA를 선언하면 안된다.
위로 가는 버튼 완성본
<button type="button" onclick="window.scrollTo(0,0);">
<span class="text-hidden">상단으로</span>
<i class="fa-solid fa-chevron-up text-base"></i>
</button>span에 text-hidden은 스킨에 원래 있던 부분이라 그대로 두었다. 그러고보니 이것도 접근성 때문에 일부러 넣은 것인지 찾아봐야겠다. font awesome 아이콘을 button으로 감싸주었다. button은 button타입으로 선언해준 다음, onclick 이벤트를 이용하여 해당 버튼 클릭 시 창 최상단 좌표(0,0)로 가게 해주는 스크립트를 삽입하였다.
버튼에 타입을 쓰는 이유 (button type="button")
- 타입 명시가 없다면 기본적으로 'submit' 처리가 일어나게 된다.
- 명확한 구분을 위해 submit이 아닌 버튼에는 type="button"을 지정해주는 것이 좋다.
<input type="button">
<button>은<input>의 역할을 잇기 위해 나중에 추가된 태그<input>은 열린 태그라 자식 요소를 가질 수 없다는 단점 등이 있다.- 하지만
<button>은 자식 태그를 가질 수 있고, CSS에서 가상 선택자로 꾸며주는 것도 가능 - 그래서 지금은 굳이
<input type="button">을 사용할 필요가 없다.
