웹 접근성을 고려하는 설계가 중요하다고 느낀 부분을 블로그에 남겨두고자 한다.
HTML과 CSS로 애플 홈페이지를 클론코딩하다가, 아래와 같은 제품 카드 컴포넌트를 만드는데, 한가지 고민한 부분이 있었다.
아래의 이미지를 보자.
가운데에 있는 '더 알아보기', '구입하기' 버튼이다.
언뜻 보기에는 두 요소와 상호작용할 때의 동작은 페이지를 이동하는 것인지 팝업창이 열리는 것인지 모르겠다.
페이지 이동이 아니라, 단순히 '더 알아보겠다.', '구매하겠다.'라는 사용자의 초점을 행동에 맞춘 텍스트이기 때문에 의미만 봤을 때는 버튼이라고 생각되고(생긴 것도 버튼같음...), <button> 요소를 사용해서 마크업하기 쉽다.
하지만, 아래와 같은 생각을 거쳐서 마크업을 수정했다.
1. 저 버튼을 눌렀을 때, '제품 상세정보 페이지', '구매 페이지'로 이동할 것으로 예상되지 않나?
2. 그렇다면 <a> 요소로 마크업 하는 게 적절하지 않을까?
3. <button> 요소 안에 <a> 요소를 넣는 것은 문제가 될까?
우선, 3번의 생각에서 여러가지 접근성 관련 포스팅 등을 찾아보고 내린 결론은 '문제가 된다' 였다.
왜냐하면, <button> 요소와 <a> 요소는 모두 클릭했을 때, 어떤 상호작용이 예상되는 요소들이다. 두 요소를 서로의 children으로 사용했을 때, 어느 한쪽을 완전히 무시하는 상황이 되고, 심지어 IE 같은 몇몇 브라우저에서는 제대로 동작하지 않기도 한다. 이런 모호성과 중복 때문에 접근성에서 큰 문제가 된다.
버튼과 링크를 사용하는 상황
- 버튼: 사용자의 선택이나 상호작용 등을 처리할 때
- 링크: 페이지 이동이 예상될 때
그렇다면, 어떻게 마크업해야 좋을까?
https://www.youtube.com/watch?v=dhsr2LGTA-s
위의 유튜브 영상을 참고하여 아래와 같이 작성하였다.
<a role="button" href="/" class="button button-blue button-left">
더 알아보기
</a>
<a role="button" href="/" class="button button-blue button-right">
가격 보기
</a>페이지의 이동이 일어나므로 <a> 요소로 마크업하되, role="button" 이라는 역할을 주어, 스크린 리더 사용자도 버튼이라는 것을 알 수 있게 하였다.
여기서, "어느 쪽을 사용하던 그냥 의미론적인 차이일 뿐이고, 스크린 리더 사용자를 제외하면 <button> 으로 마크업해도 아무 문제 없지 않나?" 하는 생각을 가질 수 있다.
하지만, 또 아래의 이미지를 보자.
<button> 마크업
<a> 마크업
<a> 마크업 에서만 페이지 이동 관련 속성들이 나타난다.
의미라던가 일부 사용자 뿐만이 아니라, 마우스 우클릭을 했을 때 모든 사용자들에게 '페이지 이동'이라는 상호작용에 대한 여러 선택사항들이 <button> 요소를 사용하면 완전히 무시되는(고려되지 않는) 것이다.
role="button"을 사용하면, 키보드 사용자들이 Enter 키뿐만 아니라 Space 키로도 이 요소를 활성화할 수 있기를 기대할 수 있다. 따라서 JavaScript를 사용하여 Space 키 이벤트를 처리해야 할 수도 있다.
이처럼 웹 접근성은 '일부 사용자'가 아니라 '모든 사용자들'의 사용성 향상을 위해서도 꼭 지켜야할 부분인 것이다.
앞으로도 항상 접근성에 대해 생각하고, '더 나은 사용자 경험'을 고민하는 개발자로 성장하고 싶다.
