바깥고리, 웹표준에 맞추기 at CunningWeb에 댓글이 몇개 달리면서 몇가지 오해가 있는 듯하여, AS 차원의 포스팅입니다.
일단 다음과 같은 코드를 보세요.
[html]
A.
주식회사 abcd
[/html]
이 코드는 아무런 문제될 게 없습니다.
두번째 코드를 보세요.
[html]
B.
주식회사 abcd
[/html]
이 코드는 문제가 좀 있습니다.
1) XHTML 1.0 Strict 이후부터는 target속성이 빠지게 되므로 validator를 통과할 수 없습니다.
2) 사용자의 의사에 관계없이 새창띄우기를 시도합니다.
세번째 코드를 보겠습니다.
[html]
C.
주식회사 abcd
또는
주식회사 abcd
[/html]
이건 더 안좋습니다. target을 쓰지 말라니까 이렇게 해놓고 validator를 통과했다고 만족하시면 안됩니다. validator는 어디까지나 최소한의 룰입니다. 왜 룰이 생겼는지를 생각하지 않고 단순히 룰을 위한 룰로 받아들이면 위와 같은 코드가 나옵니다.
이 방법은 javascript를 쓸 수 없는 환경(장애인, 비PC기반 디바이스 등)에서의 접근성을 저해하며, 검색엔진 최적화 전략(SEO)에도 바람직하지 않습니다. 물론 검색엔진을 비롯한 machine-feed로 쓰기에도 적당하지 않습니다. 물론 이 역시 사용자의 의사에 반하는 새창띄우기를 강제합니다.
다음코드를 또 봐주세요.
[html]
D.
주식회사 abcd
또는
주식회사 abcd
[/html]
그나마 이건 좀 낫습니다. href에 실주소가 들어있기 때문에 machine-friendly하다 할 수 있습니다. 문제는 위의 경우에는 부모창과 새 창이 모두 같은 abcd.com/abcd.html로 연결되버립니다. 그건 좀 곤란하죠.
아래의 경우에는 부모창은 그대로이고, 새 창만 abcd.com으로 연결됩니다. 물론 javascript가 안될 경우에는 새창이 아닌 기존창에서 페이지변경이 일어나게 되니 접근성에도 큰 문제는 없습니다.
그런데 이러면 코드가 별로 아름답지 못합니다. HTML body내에 script는 되도록이면 줄이는 게 좋습니다.
또 다른 코드를 보겠습니다.
[html]
E.
주식회사 abcd
[/html]
겉보기에는 상당히 친절해보이는 코드입니다. 문법상으로는 틀리지 않습니다. (XHTML 1.0 Strict 이상에서는 target이 없다는 점은 빼고.) 웹컨텐츠 접근성 가이드 지침에 나온 대로 대체텍스트도 충실히 써줬습니다.
그러나 이 코드가 좋은 코드냐… 실제로는 그렇지 못한 점이 있습니다.
1) 같은 곳에 대한 링크가 중복되어있습니다. machine-feed로 쓰일 때 혼동을 줄 수 있습니다.(예:링크의 갯수로 링크 가중치를 계산하는 알고리즘을 사용할 때 등)
2) 추가된 이미지는 컨텐트가 아난 장식적 요소입니다. 장식적 요소가 HTML코드에 포함되는 것은 Structure와 Content, Presentation, Behavior를 분리하는 시맨틱마크업을 충족시키지 못합니다.
3) 실제로 시각장애인이 사용하는 스크린 리더기가 이같은 코드를 만날 경우, 상당히 불편합니다. 왜냐하면 같은 곳에 대한 링크를 계속 줄줄줄 읽어주기 때문입니다. (스크린 리더기가 읽어주는 텍스트는 장애인들에게는 매우 유용하지만, 한편으로는 일반인이 듣는다면 거짓말 조금 보태, 없던 장애가 생길만큼 불편하기도 합니다.)
4) 한가지 문제가 더 있는데, 위의 코드는 링크가 연달아 나옵니다. 이렇게 링크가 연달아 나오는 경우(링크 사이를 공백문자로 분리할 경우에도 마찬가지), 몇몇 장치에서는 제대로 해석이 안될 수도 있습니다. 그래서 WCAG 1.0에서는 링크가 연달아 나오는 것을 권하지 않습니다.
중간 결론은 이렇습니다.
A.에 소개된 코드가 가장 좋습니다. 바깥고리고 새창이고 뭐고, 저대로 쓰는게 100점 만점입니다.
B.에 소개된 코드는 XHTML 1.0 Strict 이상(XHTML 1.1, XHTML 2.0등)을 포기하면 그럭저럭 허용될 코드입니다.
C.는 매우 안좋습니다.
D.의 두번째 코드는 그럭저럭 쓸만합니다만 HTML과 Script를 분리하지 못했기에 아름답지 못합니다.
E.의 코드는 불필요한 이미지의 사용, 링크의 반복 문제가 생깁니다.
더 나은 방법이 있긴 합니다.
[html]
F.