a 요소(하이퍼 링크)의 사용성과 접근성.a 요소의 개요a 요소의 어원에 해당하는 말은 anchor 입니다. 즉, 우리말로 직역하면 ‘닻’ 이라는 뜻이고 의역하면 ‘연결’ 이라는 의미가 됩니다. 그리고 a 요소는 href 라는 필수 속성을 갖는데 이것의 어원은 Hyper text REFerence 입니다. 즉, 무언가를 참조하라는 뜻이고 a 요소는 결국 다른 어떤 자원을 ‘참조’ 하라는 연결의 의미를 갖습니다. Web 이라는 거미줄을 짓는데 있어서 가장 중요한 요소입니다. 우연의 일치인지는 모르겠지만 어쨌든 W3C의 HTML 요소 색인 페이지를 보아도 a 요소는 HTML 요소(Element) 가운데 가장 먼저 소개됩니다. abc 순으로 정렬되니까 당연히 그렇겠죠.^^ 이렇게 중요한 요소를 우리는 그동안 너무 쉽게 생각하고 잘못 사용하지는 않았는지 되돌아 보는 시간을 가졌으면 합니다. a 요소의 바른 사용법과 사용성및 접근성 측면에서 어떤 이슈가 있는지 살펴보도록 하겠습니다. UI개발자 뿐만 아니라 웹 기획자 분께도 이번 포스팅을 권장합니다.
a 요소의 사용성웹 기획자분께 이번 포스팅을 권장한다는 의미는 다름아닌 사용성 때문입니다. a 요소로 마크업 하는 텍스트나 이미지에 대한 설명문구에 여기 를 클릭하세요. 와 같은 방식으로 링크를 하는것이 좋지 않다는 사실은 잘 알고 계실 것입니다. 링크된 문서를 아주 짧막하게나마 판별할 수 있는 핵심키워드를 선택하여 링크에 ‘향기’ 를 부여해 주시는 것이 좋지요. 이동할 페이지를 예측 가능하도록 해주는 겁니다. 링크의 ‘향기’ 라는 표현은 사용성전문가 제이콥 닐슨이 즐겨쓰는 말인데 제가 좋아하는 표현이기도 합니다.
디자이너의 창의성을 존중해서 일지는 모르겠지만 a 요소에 대한 WSG(Web Style Guide) 작업에 얼마나 신경 쓰셨나요? 그것이 오직 디자이너의 영역이라고만 생각해서 소홀하지는 않았나요? 링크는 링크답게 일반 문장과 확실히 차별화된 색상을 일관되게 사용해야 합니다. 파랑색이 사용성은 가장 좋습니다. 하지만 링크의 본래 색인 파랑색을 유지하는 것에 대하여 디자이너가 두고만 보지는 않겠지요. 그렇다면 파랑색이 아니라도 좋으니 부디 본문의 텍스트 색상과 확연히 구분되는 다른 색상을 일관되게 사용하도록 하는 방침을 정하고 WSG에 반영해 주세요. 웹페이지의 수많은 글과 이미지 가운데 링크 요소를 또렷하게 구분할 수 있도록 하는 것은 빠른 웹페이지 탐색에 있어서 가장 중요한 요소 입니다. 링크인지 아닌지 마우스를 올려봐야지 알 수 있도록 디자인 되었다면 사용성이 좋지 않다는 증거입니다. 마우스로 링크를 탐색하게 내버려 두지 마세요. 그냥 눈으로만 보고도 링크라는 것을 확실하게 알 수 있어야죠. 이것이 링크라는 믿음을 주세요.
운영체제 또는 웹 브라우저는 애시당초 만들어 질 때부터 고도의 사용성과 접근성을 갖춘 상태로 제품이 출시됩니다. 그 한 예로서 키보드나 마우스에 의하여 포커싱된 곳을 점선으로 표시해 주는 방법이 있죠. 이렇게 포커싱된 영역을 점선으로 표시해주게 되면 사용자는 링크의 영역을 학습하게 되어 다음번에는 더욱 정확한 위치에 마우스를 가져다 댈 수 있고 또한, 마우스가 없는 상태에서는 현재 어느곳에 포커스가 머물고 있는지 보여주기 때문에 키보드를 주로 사용하는 노트북 사용자들에게 도움이 됩니다.
자바스크립트 등의 기법을 이용하여 링크의 영역을 표시해 주는 점선을 감추지 마세요. <a href="" onfocus="this.blur()"> 등의 방법을 이용하게 되면 키보드를 주로 사용하는 사람(매우 고급 사용자이거나 매우 어렵게 웹을 사용하는 사람일 확률이 큼)들은 해당 링크에 접근할 수 없습니다. 궁금하시면 키보드로 시도해 보세요. 이 링크는 키보드를 이용하는 사람이 접근할 수 없는 링크 입니다. 제발 이런식으로 일을 어렵게 만들지 않으셨으면 좋겠습니다. 이 점선 없앤다고 해서 디자인 퀄러티가 더 높아질꺼라고 생각한다면 웹 말고 인쇄소 가서 디자인 하시는게 더 적성에 맞으실껍니다. 버스 디자인 예쁘게 만든다고 생뚱맞게 알파벳 그려넣어서 한참 욕먹었잖아요. 좋은 디자인은 예쁘면서도 사용하기 편리해야 하고 웹은 특히 더 그래요.
a 요소의 접근성웹에 접근이 쉽지 않은 시각장애인의 경우 스크린리더라는 장치를 사용하여 웹을 탐색하게 됩니다. 웹 페이지에 존재하는 텍스트나 이미지에 포함된 alt 텍스트들을 읽으면서 겨우겨우 웹을 탐색하죠. 스크린리더가 어떻게 웹을 탐색하는지 궁금하신 분들은 짬을 내어 류준호님의 블로그에 소개된 ‘스크린리더 소개 동영상’ 을 한번 보실것을 권장합니다. 동영상은 약 30분 정도의 분량으로서 야후의 접근성 프로젝트 매니저(전맹)가 직접 스크린리더를 이용하여 웹을 탐색하는 장면을 영상으로 담은 내용입니다. 국산 스크린리더와 다소 차이가 나는 부분도 있을 수 있으나 스크린리더라는 제품에 대한 간접경험으로서 충분히 가치있는 시간이 될 것입니다.
시각장애인이 스크린리더를 이용하여 웹을 탐색할 때 모든 문장을 읽어주기를 원하지는 않습니다. 링크의 목록만 추려내거나 제목(h1~h6 요소로 마크업된)만을 따로 정렬시킨 다음 절반에 가까운 시간을 불필요한 내용을 스킵하는데 할애합니다. 눈이 보인다면 쓸데없는 내용이 빠르게 피해 가겠지만 전적으로 귀에만 의존하는 맹인들은 목적지에 다다르기 위하여 잘 정리된 단서(향기있는 링크, 구조화된 제목)를 필요로 합니다. 시각장애인은 마우스 포인터를 볼 수 없으므로 마우스를 전혀 사용하지 않으며 키보드만 사용합니다. 따라서 <a href="" onfocus="this.blur()"> 이런식으로 코딩해 놓으면 키보드로 접근할 수 없으므로 시각장애인은 이 링크를 이용할 수 없습니다. 또한 ‘향기’ 없는 링크는 사용성보다 접근성 측면에서 더욱 치명적입니다. 스크린리더를 이용하여 링크만 정렬해 놓은 상태에서 ‘여기’, ‘바로가기’ 등등의 키워드를 듣게되는 맹인들의 기분은 어떨까요?
a 요소의 새창 띄우기현재 HTML의 활성 표준인 XHTML 표준(strict) 명세에는 target 이라는 속성이 폐기(deprecated)되었으며 strict DTD를 사용하는 경우 target 속성은 더이상 유효하지 않습니다. 이것은 링크의 타겟 프레임을 사용자가 직접 제어하도록 유도하기 위한 방침이며 사용자의 의지와 관계없이 강제로 새창을 띄우는 것이 합리적인 방식이 아니라는 것을 의미합니다. 사용자는 Ctrl+Click, Shift+Click 등의 단축키를 이용하여 선택적으로 새창을 띄울 수 있습니다. target 속성으로 하여금 사용자의 의사에 반하는 새창 띄우기 관행은 사라져야 함이 옳습니다. 한편 현재 대부분의 웹페이지 제작자들이 사용하고 있는 transitional DTD를 사용하는 경우 target 속성을 여전히 유효하게 취급하고 있으므로 새창을 띄우는 것이 전혀 금기시 되는 상황은 아닙니다. 다만 그것이 불합리한 방식이며 링크 타겟에 대한 선택권을 점진적으로 사용자에게 돌려주도록 바꿔 나아가야 할 것입니다. 새창이 부담스러운 열악한 PC 사용자를 생각해서라도 그것이 맞고 이것은 접근성이슈인 동시에 사용성 이슈이기도 합니다.
a 요소의 의미론적 마크업a 요소가 무언가를 참조하기 위한 마크업이라는 것을 위에서 말씀드린 바 있습니다. 하지만 분명 어떤 자원을 참조하고 있음에도 불구하고 <img onclick="window.open('abc.html', '_self')"> 이와같은 방식으로 마크업하는 행태가 있는데 이것은 의미론적으로도 맞지 않고 접근성도 0 점이 됩니다. 마우스로 이것을 클릭하는 것은 가능하지만 키보드로는 접근이 되지 않습니다. a 요소로 무언가를 마크업 해야하는 상황은 명백합니다. 현재 페이지를 포함하여 웹의 어떤 자원을 참조하고 있다면 반드시 a 요소로 마크업 하여야 합니다.
예를 들어 img 에 onclick 이벤트를 넣어 도움말을 띄우는 경우가 있는데 이러한 방법은 잘못된 방법입니다. a 요소로 마크업 하고 a 요소에 대한 href 속성 값으로는 도움말의 URI 를 적어주는 것이 맞습니다. 이런식의 코드가 나와야 합니다.
<a href="#help" onclick="showBubble(); return false;"><img alt="쇼핑 도우미란?"></a>
<p id="help">관련상품을 자동으로 추천해주는 기능입니다.<p>
return false 를 넣어주는 이유는 자바스크립트가 동작하는 환경에서는 #help 라는 id 를 지닌 곳까지 굳이 스크롤 시켜줄 필요가 없기 때문입니다. 이것은 a 요소의 본래 목적인 ‘참조’ 의 의미에도 맞고, 키보드로도 접근이 가능하며, 자바스크립트가 동작하지 않은 상태에서도 HTML 코드만 가지고 제 기능을 수행할 수 있는 매우 좋은 예제코드 입니다. 또한 팝업을 띄울 때에도 마찬가지 입니다. 다음과 같은 코드를 사용하여 a 요소에 대한 참조(href)의 값으로 의미없는 # 대신 유효한 URI 를 입력할 수 있습니다.
<a href="pop.html" onclick="window.open(this.href, 'popName', 'width=300,height=200'); return false;"><img ...></a>
두 개의 예제 모두 자바스크립트가 동작하는 환경에서는 그 장점을 최대한 활용하지만 자바스크립트가 동작하지 않는 환경에서도 잘 기능되도록 배려한 ‘겸손한 자바스크립트(unobtrusive javascript)’ 의 예라고 볼 수 있습니다. 예제 코드는 신현석님의 글 ‘접근성을 해치지 않는 Javascript의 사용‘을 인용했습니다.