중요 표시 버튼을 접근성 있게 만들기
Nts Nuli
2010-09-01 22:12:21
아래와 같이 생긴 중요 표시 버튼, 많이들 보셨나요?
중요한 메일이나, 파일들을 표시하기 위해 사용하는 기본적인 UI 요소로 클릭을 하면 색깔이 진해지면서 중요한 아이템이라는 의미를 나타내고, 다시 클릭을 하면 해제가 됩니다.
오늘은 이 중요 표시 버튼을 접근성 있게 만드는 방법을 공유해보고자합니다. 먼저-
'접근성이 있다' 라고 말할 수 있는 것은 아래 두 가지 항목을 만족시키기 때문입니다.
<a>로 처리할 수도 있고, <button>을 이용할 수도 있지만 저는 체크박스(<input type="checkbox">)를 이용해보려고 합니다.
그 이유는 중요 버튼을 사용하는 데 있어서 어떤 항목이 중요한지,안한지에 대한 '상태'정보가 무엇보다 중요하다고 생각했으며
그 '상태'정보를 가장 직관적으로 나타내 줄 수 있는 것은 체크박스라고 생각했기 때문입니다. ^^
체크박스를 이용한다면 기본적인 마크업은 아래와 같을 것입니다.
반드시 <input>의 id값과 <label> for 값을 동일해주어야 둘 사이의 관계가 성립되니 꼭 유의해주세요~! <input type="checkbox" id="isimp"><label for="isimp">중요 표시</label>
중요한 메일이나, 파일들을 표시하기 위해 사용하는 기본적인 UI 요소로 클릭을 하면 색깔이 진해지면서 중요한 아이템이라는 의미를 나타내고, 다시 클릭을 하면 해제가 됩니다.
오늘은 이 중요 표시 버튼을 접근성 있게 만드는 방법을 공유해보고자합니다. 먼저-'접근성이 있다' 라고 말할 수 있는 것은 아래 두 가지 항목을 만족시키기 때문입니다.
<a>로 처리할 수도 있고, <button>을 이용할 수도 있지만 저는 체크박스(<input type="checkbox">)를 이용해보려고 합니다.
그 이유는 중요 버튼을 사용하는 데 있어서 어떤 항목이 중요한지,안한지에 대한 '상태'정보가 무엇보다 중요하다고 생각했으며
그 '상태'정보를 가장 직관적으로 나타내 줄 수 있는 것은 체크박스라고 생각했기 때문입니다. ^^
체크박스를 이용한다면 기본적인 마크업은 아래와 같을 것입니다.
반드시 <input>의 id값과 <label> for 값을 동일해주어야 둘 사이의 관계가 성립되니 꼭 유의해주세요~! <input type="checkbox" id="isimp"><label for="isimp">중요 표시</label>
위의 이미지를 보면 체크박스는 안보이는데 어떻게 체크박스를 사용할 수 있을까요??
그 비밀은 바로 아래 그림에 있습니다~
<input> 엘리먼트는 밑에, <label> 엘리먼트는 그 위에 얹혀진 형태로, 우리 눈에 보이는 별모양의 이미지는 <label>이 되는 것입니다. 대체 텍스트는 필수! 바로 위에서 눈에 보이는 별 모양의 이미지가 <label>이 된다고 설명하였습니다.하지만 이미로만 표시하면 시각 장애환경에서 해당 콘텐츠를 인식할 수 없겠쬬?
따라서 텍스트가 반드시 제공되어야 합니다. 이때 텍스트는 살짝 숨겨서 눈에는 보이지 않지만 스크린 리더로는 인식이 가능하도록 처리해줍니다. 아래 코드의 blind 클래스가 바로 숨김처리를 해주는 녀석입니다. <label><span class="blind">중요 표시</span></label>
숨김처리를 해 줄때 display:none으로 해주면 안된다는 점을 명심해주세요~!
display:none으로 하면 눈에만 안보일 뿐 아니라 스크린리더도 인식하지 못한답니다~
그리고, 별 모양의 이미지가 클릭커블하다는 것을 알려주기 위해서 마우스 커서 모양을 변경(cursor:pointer)하는 것도 중요합니다.