HTML5에선 근래에 그 쓰임새가 더욱 다양해진 여러 형태의 웹 문서나 웹 애플리케이션의 사용 패턴에 부응하려고 기존 elements의 확장 개념으로 좀 더 명확한 구조적/의미론적 정의를 부여하는 새로운 elements가 추가되었다.
그래서 그 쓰임새에 맞는 적절한 elements를 가지고 HTML 문서를 작성하면, 저자가 의도한 대로 그 의미가 제대로 전달되면서 더불어 다양한 웹 접속 장비에서의 해석도 훨씬 수월해지기 마련이다.
문제는, 웹 브라우저가 새로운 elements에 대응하는 Accessibility APIs를 아직 제대로 적용하지 못하고 있는 실정이다. 결국 웹 접근성을 고려해서 WAI-ARIA에 근거한 적당한 ARIA landmark role을 직접 지정해 주어야 하는데, 마침 W3C에서 HTML을 작성할 때 WAI-ARIA를 올바로 구현하는 법에 대한 안내 문서(W3C Editor’s Draft )를 공개하였다.
이 문서에서 ARIA role을 적용해야만 하는 HTML5 elements와 해당 element에 지정해 주어야 하는 기본 ARIA role을 간추리면 다음과 같다.
ARIA role을 적용해야만 하는 HTML5 elements(이)란 제목의 글 마저 읽기 →
WordPress에서 장문의 긴 글을 작성했을 때, 만약 해당 글을 index 페이지에선 그 내용을 다 보여주지 않고 글 앞부분의 도입부만을 보여주고 싶을 때를 대비해 more tag로 처리하는 기능을 제공한다. 그런데 이 기능을 그대로 가져다 쓰면 웹 접근성 면에서 문제가 생길 수 있다.
이렇게 해서 자동 생성된 링크 텍스트는 기본적으로 그냥 무의미한 more…로 표시되는데, 만약 글의 앞뒤 문맥을 인지하지 못한 상태에서 해당 링크를 스크린 리더를 통해 접근했을 땐 해당 링크가 어느 곳을 가리키는지 알 수가 없는 것이다. 하지만, 다행히 WordPress의 the_content() 함수를 제대로 쓰면 이 more tag의 내용을 입맛에 맞게 수정할 수가 있다.
the_content() 함수는 일반적으로 WordPress에서 사용되는 The Loop라는 PHP 코드 안에서 쓰이는데, 보통 WordPress 테마 파일의 index.php나 혹은 최신 WordPress에서 기본 제공하는 Twenty Twelve 테마 같은 경우 post의 종류에 맞는 여러 군데의 템플릿(template)에 사용되고 있으며 상황에 맞게 각기 따로 수정해 주어야 한다. WordPress의 more tag 접근성 문제(이)란 제목의 글 마저 읽기 →
평소 img에다 필수도 아닌 title attribute을 사용하는 일은 거의 없었고 또 그래야 할 동기도 없었다. 그림에 대한 설명은 alt로도 충분하다고 생각했기 때문이다.
그런데 무조건 모든 그림과 관련된 정보를 alt의 속성으로 묶어서 쓰기엔 무리가 있고 가끔 간단한 그림의 보충 설명이나 제목은 alt보단 title 속성을 써주는 것이 더 적절한 때가 있단다.
alt 속성은 필수 요소로서 그림을 대체하는 내용이 들어가는데, 보통 그림이 없다고 가정했을 때 앞뒤 문맥을 자연스럽게 연결하는 내용을 대신 써주는 게 좋다. 그리고 간혹 생략 시에도 앞뒤 문맥이 자연스럽게 연결되면서 내용을 전달하는데 별 지장이 없다면 그냥 공백으로 놔두는 것도 가능하다. img를 위한 alt 그리고 title의 쓰임새 비교(이)란 제목의 글 마저 읽기 →
디자인에 민감한 사람들의 이야기를 듣다보면 많은 이들이 일반 링크나 대체 이미지로 치장된 링크를 눌렀을 경우 보여지는 링크 둘레의 점선을 없애달라는 요구를 많이 한다. 하지만, 이는 키보드 접근성을 해치는 경우라서, 그대로 놔두거나 적어도 링크 옆으로 삐져 보이는 점선을 없애는 조치 – a {overflow: hidden;} – 만을 권하고 있다.
요 점선의 목을 쥐고 있는 놈이 바로 outline이란 놈인데, 민감한 디자이너와 접근성 우선 옹호자 모두가 만족할 수 있는 문제의 해결 방법이 공개되었다. Opera에 속해 있는 Patrick씨가 future of web design tour 2009에서 행한 키보드 접근성에 관한 프리젠테이션에 있는 내용인데, 핵심은 적절한 상황(키보드 focus를 방해하지 않는 마우스 클릭)에서만 이 outline을 없애서 키보드 접근성을 해치지 않으면서도 링크 선택시 보여지는 점선의 둘레를 없애라는 것이다.
코드로 보면 너무나 간단하다.
a:active { outline: none; }
물론, 여기서 일반 a 태크의 outline property는 건드리지 않는 것이 중요하다.
너무나 단순하지만, 잠시라도 깊이 생각해보질 않아서 이렇게 쉬운 해결책을 그 동안 그냥 지나쳐 버렸던 것일까?
이미지 대체 링크를 마우스나 키보드를 사용해서 선택했을 때 여러 경우의 수를 조합해서 비교해 놓은 실험 페이지에서 최적의 결과를 직접 확인할 수 있다.
마지막으로, Patrick씨 행한 프리젠테이션 슬라이드(pdf)에 나와있는 맺음말을 옮겨놓는다.
if you style :hover, also :focus and :active
don’t suppress outline completely (reintroduce :focus and suppress :active)
leave tabindex alone – source order
JavaScript on hover (mouseover/mouseout) also on focus/blur (if focusable element)
lightboxes and their problems
only attach behaviour to focusable elements
