NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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 태그로 마크업 하여야 합니다.

이미지로 처리된 버튼과 풍선도움말 예제예를 들어 이런 사용자 인터페이스가 있다고 칩시다. ‘쇼핑도우미란?’ 이라는 이미지 형식의 버튼이 있고 그것을 클릭하면 풍선도움말이 나타나서 그것을 설명하는 기능입니다. 이런경우 HTML 코드의 수를 줄여보겠다는 심산으로 img 에 onclick 이벤트를 넣어 풍선도움말을 띄우는 경우가 있는데 이러한 방법은 잘못된 방법입니다. a 태그로 마크업 하고 a 태그에 대한 href 속성 값으로는 풍선도움말의 URI 를 적어주는 것이 맞습니다. 이런식의 코드가 나와야 합니다.

<dl>
<dt><a href="#help" onclick="showBubble(); return false;"><img ... / ></a></dt>
<dd id="help">관련상품을 자동으로 추천해주는 기능입니다.<dd>
</dl>

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의 사용‘ 으로부터 인용되었습니다.

분류: 웹 기획,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2007년 7월 11일, 6:26 | 정찬명 | 댓글: 39개 |
트랙백URI - http://naradesign.net/wp/2007/07/11/123/trackback/

39개의 댓글이 있습니다.

  1. Na! 댓글:

    네..
    (자칭) 기획자(라고 이야기하는..사람) 일명 읽었습니다.
    다음과 같은 예제가 있을때..

    =예문=
    OO을 더 알고 싶으다면 [여기]를 클릭하세요.

    일반인은.. 링크가 무엇을 지정할것인지 쉽게 알수 있습니다. 또는 링크를 강조하기 위해.. 특정 단어나 또는 이미지 링크를 사용할수 도 있을것이구요,, 그리고 그내용은 문장 앞절에서 서술하고 있으므로. 문제가 라고 생각하지 못할것입니다.
    웹디자이너 및 개발자도 그렇게 생각하고 있을것이고. 기획자 역시 마찬가지일껍니다.

    그 이유는 다수의 웹개발자에 종사하는분들이.. 스크린리더등의 기기가 작동하는 방식을 알지 못하기 때문이라 생각합니다. 이유는 그런걸 접할기도 쉽지 않고.. 자발적 관심역시 어렵기 때문이라 생각 됩니다.저 역시 작동하는방식을 서적이나. 앞서 가시는 분들의 블로그등을 통해 미약하게나마 습득을 하였을 뿐입니다.

    그런의미에서.. 저와 같은 어린백성들을 위해 앞서가시는 분들의 많은 활동과.. 홍보를 부탁드립니다.
    (원래 앞서가시는 분들은.. 외롭고 힘든 법입니다.. –; 저는 뒤따라 가겠습니다.)

    링크의 서식뿐아니라. 디자인에 관한 문제는.. 웹를 바라보는 관점 같습니다.
    정보냐.. 비주얼이냐.. 정확한 비교인지 모르겠으나.. 그렇습니다.
    정보로 바라본다면… 글꼴이 어떠튼 Text를 써야할것이지만..
    비주얼로 바라본다면.. 글꼴이 안예쁘므로.. 문장을 이미지로 만드는니까요..
    (CSS의 효용을 알아가는 사람은 이미 정보쪽으로 눈을 돌린 사람이라 생각됩니다..)

    이문제도. 사실..개인적으로는 상당히.. 분쟁이 있는 분야입니다..
    저희같은 소규모 업체에서. 보통 사람들을 대상으로 하는 영업포인트는.. 비쥬얼이니까요..

    괜한 소리가 길었습니다..
    글 잘읽고.. 주소 복사해 갑니다..

    [기획자]라고 우기고 다니는-Na!

  2. 정찬명 댓글:

    일전에 스토리보드를 HTML로 작성해서 전달한다는 이야기를 듣고 Na! 님과 같은 기획자분은 또 없을꺼라고 생각했습니다. 게다가 웹에 대한 바른 철학과 지식을 지니고 계시다고 생각되는데 ‘자칭’ 이라뇨. 너무 겸손하시네요.^^ Na! 님과 같은 기획자분이 많이 생겨나셨으면 좋겠습니다.

  3. 이정주 댓글:

    아주 잘 읽었습니다. 예제와 좋은글이기에 머리에 쏙쏙 들어오내요. 이글을 읽고 장애인의 입장을 특히 시각장애인의 입장을 곰곰히 생각해보니 어떻게 웹을 검색할까 엄두가 나질 안더군요. 특히 업무에서 개발할때는 이런 뜻깊음에 상상조차 못했는데 많이 후회스럽습니다.

    정주고의 블로그에 포스트 하였던것처럼 대전대에서 어르신을 모시고 컴퓨터를 가르켜 드리고 있습니다. 하나하나 설명시에 모니터를 자세히 들여보면서 웹을 접근하시는 모습이 꾀나 불편해 보이더군요. 접근성! 요새들어 중요한 문제라는것을 깨달았습니다.

    좋은 글 다시 한번 감사드리며 개발하시는분들이나 학생들에게 읽기를 권고하여야겠네요.

  4. 정찬명 댓글:

    잘 읽었다니 다행이네요.^^ 저는 그다지 많은 것을 알고 있지 못해서 쉬운 글만 쓰는 편입니다.ㅡㅡ; 모교에서 그런 뜻있는 일을 하고 있다는 사실에 뿌듯하네요. 어제는 오래간만에 모교 웹사이트에 방문했는데 웹사이트 개편을 위한 의견수렴을 하고 있더군요. 그래서 우리학교도 웹 접근성 개념좀 탑재해보자는 내용의 제안을 하고 왔습니다. 생각같아서는 당장 달려가서 도와주고 싶은 마음 굴뚝같지만 어디 그럴 수 있나요 ㅡㅡ; 후배들이 이런 분야에 관심 가져주면 정말 자랑스러울것 같습니다. 정주후배가 많이 챙겨주세요 ^^

  5. 댓글:

    알고도 실행하기 힘든…여러 이유로….

    그렇죠?

  6. 정찬명 댓글:

    음.. 무엇에 대한 동의를 원하시는 건지 좀처럼 와닿지 않는군요. 그렇죠?

  7. 이주영 댓글:

    이 점선 없앤다고 해서 디자인 퀄러티가 더 높아질꺼라고 생각한다면 웹 말고 인쇄소 가서 디자인 하시는게 더 적성에 맞으실껍니다.

  8. 이주영 댓글:

    (X)HTML 코드는 지원하지 않으므로 는 [괄호]로 변환해 주세요.
    (흐흐;; 이걸 이제야 봤네요..)

    이 점선 없앤다고 해서 디자인 퀄러티가 더 높아질꺼라고 생각한다면 웹 말고 인쇄소 가서 디자인 하시는게 더 적성에 맞으실껍니다(이말이 확; 와닿네요 ^^;; 라고 썼었는데… -_-;;;;)

  9. 정욱철 댓글:

    이 부분에서 말이죠.
    한가지 더 추가해주셨음 싶네요.

    접근성과 무관한 영역에 a 태그를 사용하는 경우…
    예를 들어 탭메뉴를 이미지로 만드는 것은 대충 분위기상 어쩔수없이 제작을 합니다만…
    onMouseOver를 a태그 내에 넣어야한다…라는 가이드라인을
    메이저급 회사에서도 여전히 시행되고 있습니다. (그 회사에 웹표준 퍼블리셔가 있는 경우에도 말이죠)
    이런 부분도 추가해주심 좋을 듯 합니다.

    [a href=”#help” rel=”nofollow”][img][/a]
    [p]관련상품을 자동으로 추천해주는 기능입니다.[/p]

    이 부분은 title속성을 이용하는 것이 옳다고 봅니다.
    w3c.org표준안에는 위같은 용도의 설명문구를 title속성을 이용하고, 음성브라우저는 title속성을 읽어야 한다라고 되어있습니다. 스크린 리더가 이 표준안은 제대로 따르지 못하고 있죠.(alt속성만 인식)
    google.com에서 “javascript boxover”를 검색하면 나오는 스크립트가 이 표준안에 가장 적합하다고 봅니다.
    음성브라우저에 적합한 title속성을 풍선말형태의 디자인으로 보여주는 script죠.

  10. 정찬명 댓글:

    와우~ 주영씨가 제 블로그에 남긴 첫 번째 댓글! 완전 영광스럽네요^^; (사실 디자이너 분들에게 돌 맞을 각오 하고 썼어요 ㅡㅡ;)

  11. 김현진 댓글:

    저도 왔어요~

  12. 정찬명 댓글:

    영광2 ㅎㅎㅎ!

  13. 정찬명 댓글:

    정욱철님께,
    일단 필터링 된것 사과드립니다. 예전에 필터링 조건을 너무 강력하게 해두는 바람에 이렇게 되었구요. 지금은 필터링 조건을 다시 느슨하게 만들었습니다.

    탭메뉴에는 a 태그를 사용하면 안된다는 말씀으로 이해했는데 맞나요? 하지만 탭 메뉴도 a 태그로 마크업 하는 것이 맞습니다. 해당 탭이 하위 목록들을 참조하고 있기 때문입니다.

    어쨌거나 정욱철님 덕분에 중요한 이야기를 댓글로 추가할 수 있게 되어서 다행입니다.

    추가적으로, 접근성 측면에서 onmouseover 는 권장되지 않으며 onclick 이벤트를 이용하는 것이 바람직 합니다. 왜냐하면 클릭이 아닌 마우스 over 움직임에 의하여 콘텐트의 구조가 변하는 것이 바람직 하지 않기 때문입니다. 실수로 마우스를 움직여서 특정 탭이 선택되었다면 스크린리더 사용자는 그 사실을 알지 못한 상태로 일부 탭과 하위 콘텐트를 건너뛸 수도 있기 때문입니다.

    또한 대부분의 최신 브라우저들은 onclick 이벤트만 주어도 자동으로 onkeydown 이벤트가 작동하도록 지원하고 있습니다. onkeyup, onkeydown, onkeypress 등을 onclick과 동시에 작성하면 포커스가 맺히거나 떠나는 순간에 이벤트가 발생하기 때문에 원치 않는 동작을 실행하게 됩니다. onclick 이벤트 헨들러를 작성할 때에는 다른 이벤트 헨들러를 동시에 작성하지 않는것이 좋습니다.

    그리고 “쇼핑도우미란?” 을 클릭했을 때 설명문구가 나타나는 저 모양은 정의목록으로 마크업 하는것이 맞다는 생각이 뒤늦게 들어서 마크업을 정정 했습니다.(누군가 지적해 주었더라면 더 좋았을 텐데 말이죠ㅡㅡ;)

    PS : 그리고 저도 여쭤볼게 있는데요. a 태그에 rel=”nofollow” 를 넣자고 말씀하신 이유가 궁금합니다.

  14. 문지애 댓글:

    포커스에 스타일을 입힐 순 없을까요?^^;

  15. 정찬명 댓글:

    지애씨, 안되는줄 알면서 왜그러세요 (ㅡㅜ;)
    그것은 웹페이지 제작자가 아닌 운영체제나 브라우저 제작사들이 해야 하는 것이고 저희가 마음대로 바꿀 수 있다면 그것은 바람직 하지 않다고 생각합니다. 포커스의 스타일을 웹페이지 제작자가 바꿀 수 있다면 없앨 수도 있고 기상천외한 모양을 할 수도 있겠죠. 하지만 사용성, 접근성 측면에서 보면 그것은 바람직 하지 않으므로 일관된 하나의 스타일이어야 한다고 말하는 겁니다.

  16. 문지애 댓글:

    ㅋ~
    그런데 너무 제작자들을 못 믿는건 아닐까요? 제작자들도 UI에 대해 열심히 공부하고 있을텐데 말이에요~~^^;

    실은, a에 대해 또다른 궁금한 점이 있어서 왔어요^^
    ‘a 태그의 의미론적 마크업’ 부분에 적어주신 부분 말인데요,
    저게 만약 for로 돌아가는, 제목을 누르면 내용이 보이는 목록이라면 (FAQ에서 많이 사용하는)
    보통 태그로 제어하기 때문에 id값이 필요없어지는데,
    이럴땐 a의 href는 어디로 향기를 보내야 할까요?^^;

    [dl]
    [dt][a href=”#난어디로@ㅁ@;;” onclick=”showContent(); return false;”]제목1[/a][/dt]
    [dd]내용1 입니다~~[/dd]
    [dt][a href=”#난어디로@ㅁ@;;” onclick=”showContent(); return false;”]제목2[/a][/dt]
    [dd]내용2 입니다~~[/dd]
    [dt][a href=”#난어디로@ㅁ@;;” onclick=”showContent(); return false;”]제목3[/a][/dt]
    [dd]내용3 입니다~~[/dd]
    [/dl]

  17. 정찬명 댓글:

    웹페이지 제작자라고 해서 모두 열심히 공부하는 것은 아니겠죠 ㅡㅜ;
    그리고 위와 같은 마크업도 역시 마찬가지 입니다. 이렇게 되어야죠.

    [dl]
    [dt][a href=”#a1”]제목1[/a][/dt]
    [dd id=”a1″]내용1 입니다~~[/dd]
    [dt][a href=”#a2”]제목2[/a][/dt]
    [dd id=”a2″]내용2 입니다~~[/dd]
    [dt][a href=”#a3”]제목3[/a][/dt]
    [dd id=”a3″]내용3 입니다~~[/dd]
    [/dl]

    자바스크립트와 서버측 스크립트는 전혀 생각하지 않고 마크업 하시면 됩니다. 이렇게 HTML 로 처리해야 할 것들이 자신의 소명(?)을 다 하도록 한 다음.. 그 다음 자바스크립트로 UI를 확장하도록 하시면 됩니다.

  18. chimai 댓글:

    확실하지는 않지만 여럼풋한 기억으로 기본 링크 컬러가 색맹인 이용자들도 이것이 링크임을 알 수 있도록
    파란색으로 디자인 되었다는 말이 생각나네요. (파란색을 못보는 색맹은 없다죠?)

    오늘도 좋은 글 읽고 갑니다^^. 찬명님의 글을 읽을때마다 제가 웹디자이너로서 공부가 참 많이 부족하다는 생각을 하게 되서 살짝 좌절하기도 하지만요~

  19. 정찬명 댓글:

    chimai 님께,
    하긴, 링크가 파란색인 이유를 지금까지 모르고 살고 있었군요 ㅡㅡ; 색맹은 전색맹, 부분색맹, 색약으로 나뉘는데 전색맹이 나타나는 비율은 약 1/10만 정도이며 대부분이 부분색맹인데 우리나라의 경우 남성 5.9%, 여성 0.44% 가 색각 이상자(색맹, 색약)라고 합니다. 색각 이상자 중에는 부분색맹으로서 ‘적녹색맹’이 가장 많은데 저도 적녹색맹을 지니고 있습니다. 그래서인지 정말 파랑색은 확실하게 보입니다.ㅎㅎㅎ.

    보통 색맹이라고 하면 색을 완전히 구분하지 못하는 것으로 오해할 수 있는데 적녹색맹의 경우 적색과 녹색을 뚜렷하게 구분할 줄 알며, 단지 적색과 녹색을 희미하게 사용하거나, 작은 크기로 표현할 때, 그리고 섞여있을 때 구분이 쉽지 않아 잘 인식되지 않는 문제가 있습니다. 실제로 적색과 녹색이 포함된 그래프 표현 같은 것은 잘 인식하지 못합니다.

    하지만 빈센트 반 고흐와 만화작가 이현세님도 색맹이라고 합니다. 그리고 저도 유명한 사람은 아니지만 적녹색맹이면서 약 6년간 웹 디자이너로 일했답니다. 즉, 먹고 사는데 지장은 없지만 그래프는 잘 볼 수 있으면 좋겠습니다. ㅡㅡ;

  20. 조남철 댓글:

    안녕하세요.
    웹을 시작한지 얼마 안되는 개발자 입니다.
    HTML에 대해 기초지식도 없이 시작해서 일 있을때마다 하나하나 속성을 찾아서 느릿느릿 개발을 하고 있는데 우연히 좋은 글 읽고 갑니다.
    저 역시 이부분 onfocus=”this.blur()” 에서 가슴 찔리는군요 (사실 조금전에도 한번 썼거든요 -_-;;)

    글이 너무 좋아서 퍼갑니다.
    혹시 안된다면 메일 주시면 바로 삭제 하겠습니다.
    즐거운 연말 되십시요 ^^

  21. 정찬명 댓글:

    도움되셨다니 기쁩니다. 출처표시만 해주신다면 제 블로그를 몽땅 긁어가셔도 좋습니다 ^^;

  22. dauby 댓글:

    onClick으로 처리하고 href에 넣어줄 대체 URI가 없을 경우는 어떤 식으로 해줘야 할까요?

  23. 정찬명 댓글:

    @dauby
    참조 URL이 없다는 것은 링크가 아니라는 의미이므로 다른 요소를 사용하시면 됩니다.
    제가 지금 모바일이라서 직접 링크 걸어드리기 어렵지만 제 블로그에서 button 으로 검색해 보시면 관련 글이 있습니다. 그걸 참고해 보세요. ^^

  24. 양태호 댓글:

    3년전 글을 이제서야 보고 있는 초짜 개발자입니다 -_-;; 무튼 잘 봤습니다~~
    앵커 태그의 사용법에 대한 얘기를 얼핏 들어서.. a에는 javaScript가 없더라도 작동할 수 있는 href를 지정해주고 그 위에 javaScript를 부여해주는게 맞다고 들어서 찾아보다가 여기까지 왔네요 ㅎㅎ

  25. 하선영 댓글:

    안녕하세요.
    초보 퍼블리셔 입니다. 매일 올라온 글 보면서 많은 도움 받고 있습니다. 감사합니다.
    지금 웹접근성에 관련한 작업 진행중에, 궁금한 점이 있어 부끄럽지만 여쭤봅니다.

    a{text-decoration:none; }
    a:hover, a:active, a:focus {color:#df2428 !important; text-decoration:underline; }

    AAAAAAAAAAAA
    BBBBBBBBBBBB
    CCCCCCCCCCCCCC

    포커스 이동을 테스트 하기 위함이고, 각 브라우저마자 포커스 이동하는게 너무 달라서 정찬명님의 도움을 요청하는 바입니다.
    저 위의 html 을 크로스브라우징 했을 때, 파폭과 IE, 크롬 에서는 포커스 이동이 되고 있는데, 유독 사파리에서만 탭키로 포커스 이동을 했을 때, 주소창과 검색창만 돌고 html 의 a 링크로 이동되고 있지 않습니다.
    왜 그런건지 궁금하네요. ㅠ
    혹시 시간 되시면 말씀 좀 부탁드립니다.

  26. 정찬명 댓글:

    @하선영
    저의 이전 게시물을 참고해 보세요. ^^ http://naradesign.net/wp/2008/05/15/141/

  27. 하선영 댓글:

    ^^
    감사합니다. 큰 도움이 됐습니다.
    복받으실거에요~

  28. 정지호 댓글:

    안녕하세요 초보 웹개발자 입니다.
    좋은정보들 항상 감사합니다. 많은 도움을 받고 있습니다!
    염치없이 하나 여쭤볼께 있습니다….
    [a href=”#aaa” onclick=”aaa(); return false;”]

    예를들어 이런식으로 함수호출을 하였을때
    주소창에 http://www.aaaaa.co.kr#aaa 라고 붙는경우가 있었습니다.

    특정컴퓨터 한대만 그러네요.. 사용환경은 익스플러워8입니다..
    왜그러는 건지 잘 모르겠네요 다른 사용자 들은 안붙는데 말이죠…

  29. 정찬명 댓글:

    @정지호
    브라우저가 해석하지 못하는 자바스크립트 오류가 있으면 그럴 수 있겠네요. aaa() 함수는 실행이 되는지요?

  30. 정지호 댓글:

    네 aaa() 함수는 실행이 됩니다.

    브라우저가 해석못하는 자바스크립트 오류가 있으면

    http://www.aaaaa.co.kr#aaa 이런식으로 파라밑어값이 붙어 넘어가나요??

    오류를 아직도 못잡고 있네요 ㅠ

  31. 정찬명 댓글:

    @정지호
    return false 코드가 실행되지 않는 것으로 보아 이 코드 위쪽의 어느 지점을 IE8 브라우저가 해석하지 못하는게 아닐까 생각합니다.

  32. 정지호 댓글:

    답변 감사합니다. 리턴펄스가 실행이 안되는 이유를 찾아야 겠네요 ㅠㅠ

  33. 정지호 댓글:

    제 생각엔 소스코드에는 아무이상이 없는거 같습니다

    특정 한 컴퓨터에서만 리턴펄스가 안먹히는거 보니…

    특정 그 컴퓨터에 브라우져(익스8) 환경설정이 잘못 되어있으면

    리턴펄스가 안먹히는 그런경우도 있을까요?

    예를 들어 도구 보안옵션에 보면 자바스크립트끄는 기능이라던지…

  34. 정찬명 댓글:

    @정지호
    네, 다른 PC의 IE 8 버전에 문제가 없다면 아마도 사용자 환경을 의심해 봐야 할것 같네요.

  35. 강대한 댓글:

    항상 새로운 것을 찾고 있지만 기본에 충실해야겠다는 생각이 문득 드네여~

    감사합니다.

    잘 봤습니다.

  36. […] a 태그의 사용성과 접근성. […]

  37. […] 링크를 연결시켜주는 <a>태그의 잘못된 사용법을 살펴보자. ( 출처 : 나라디자인 a태그의 사용성과 접근성 中 […]

  38. 통스 댓글:

    헉…. 블로그 여기저기에다가 “this.blur()”…. 엄청 써먹어놨는데…. ─.─;;
    노가다를 뛰어야겠네요…. ㅠ.ㅠ

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님