1. 의미와 목적에 맞는 HTML을 사용하라.
늘 하는 이야기지만, TABLE 태그가 아무리 편리하다 할 지언정, 그것으로 레이아웃을 잡아선 안된다. IMG는 “비텍스트
컨텐트”를 위한 태그이지 장식을 위한 태그가 아니다. 문단은 P로 나누는 것이지, BR이 아니며, 강조는 B대신 STRONG을
쓴다. 밑줄을 위해 DEL을 쓰지 않는다. 목록은 LI를 사용하며, 제목은 Hx를 사용한다. 기타등등, 기타등등…
당신은 이 중에 얼마나 지키고 있는가?
만약, 당신이 이 계통에서 나름 벌어먹고 사는 것으로 만족한다면, 이런 것들을 무시해도 좋다. 그러나 당신이 엉터리 코드를
만들어놓고 User Interface니 User Experience니 떠드는 것만은 참아달라. 심지어 당신보다 아무것도 모르는
클라이언트 앞이라 해도.
마치 귀모 작가가 외계어남발에 비문투성이인 자칭 소설을 써놓고 소설작법에 대해 논하는 것만큼이나 어리석은 일이다.
2. ActiveX를 사용하지 말라.
반드시 ActiveX를 써야 하는 경우가 있긴 하다. 브라우저를 넘어서 Windows OS단의 무언가를 필요로 할 때, ActiveX외에는 대안이 없다.
그러나 그러한 기능을 추가하는 순간, 당신의 웹사이트는 “웹”이 아니게 된다. 곰곰히 따져보면, 차라리 VB나 델파이같은 것으로 전용어플리케이션을 만드는 게 더 바람직할지도 모른다. “웹”이 아닌 것을 “웹”상에 올려놓지 마라.
고스톱 게임은 웹이 아니다. 인터넷 뱅킹도 웹이 아니다. 당신이 지금 만들고 있는 것도 웹인지 아닌지 차근차근 생각해보라.
3. Frame과 Popup을 사용하지 말라.
모든 팝업은 죄악이며, 그 중에서도 인덱스페이지의 팝업은 더 큰 죄악이다.
새창띄우기를 강제적으로 할당하지 마라. 사용자에게 선택권을 주라. 무지몽매한 사용자들로부터 새 창이 뜨지 않아 불편하다는
클레임을 받는다면, Shift+클릭을 이용하라고 친절하게 답변해줘라. 한 켠에 공지해두는 것도 좋겠다. 사용자들은 금방 배운다.
당신이 생각하는 만큼 멍청하고 게으르지 않다.
프레임을 써야겠다면 타이틀을 정확히 명시해두라. 또, NOFRAMES을 이용해 프레임을 지원하지 않는 브라우저를
고려하라.(당신이 짐작하는 것보다 프레임을 지원하지 않는 브라우저와 그 사용자는 꽤 많다.) 그러나 역시 프레임을 쓰지 않는
것이 가장 훌륭한 대안이다.
4. 마우스에 의존하지 말라.
onmouseover, onmouseout 등의 마우스 이벤트를 사용하지 말라. 최소한, 저 이벤트를 이용한 기능이 빠지더라도
웹사이트 이용에 아무런 지장이 없도록 만들라. 전적으로 마우스에만 의존하는 기능은 접근성에 매우 심각한 문제를 불러온다.
특히, 마우스가 올라가면 서브메뉴가 보이는 방식이라든가, 반드시 마우스로만 작동시킬 수 있는 이미지버튼등을 주의하라.
5. 색상과 그림에 의존하지 말라.
색상에 대해 지킬 것은 두가지이다. 디자인시 같은 명도의 색상들은 되도록이면 피할 것. 링크와 본문의 명도차이를 둘 것.
흑백으로 변환했을 때 구별이 가야 하기 때문이다. 링크의 경우에는 밑줄을 그어주는 것이 매우 바람직하다.
IMG는 “비텍스트 컨텐트”요소에만 사용하도록 한다. 즉, 그 이미지가 없으면 컨텐트 자체의 내용 전달이 힘들 때에만 사용한다.
이미지를 사용할 수 없는 경우들이 있으므로 반드시 대체텍스트를 제공한다.
대체텍스트는, 이미지 파일이름도, 이미지 이름도, 이미지에 대한 설명도 아니라, 바로 이미지가 담고 있는 내용자체를 텍스트로
풀어 제공해야 한다. “기사 이미지”라는 대체텍스트는 잘못된 것이다. “8월 22일 아침 9시, 성산대교앞 혼잡한 교통상황”쯤은
되어야 한다는 소리다.
alt로 대체텍스트를 너무 길게 적지 마라. 길게 적어야 겠다면, 따로 파일로 적어두고, longdesc속성을 이용해 연결한다.
Flash나 Embedding, AJAX등에도 대체텍스트는 필요하다.
6. CSS를 활용하라.
CSS로 깔끔하게 디자인된 페이지는 매우 높은 접근성을 갖게 된다. 덤으로 깔끔하게 CSS를 적용시키기 위해서는 1번에서 말한
의미에 맞는 HTML이 필요충분조건이 된다. 시맨틱한 마크업과 CSS의 조화, 그 자체만으로도 접근성에 50점은 먹고 들어가게
된다.
inline CSS는 쓰나마나이니 이건 제외.
7. JavaScript에 의존하지 말라.
Form Submit을 JavaScript를 이용해 하지 말 것.
ASP.NET의 어떤 케이스, 몇몇 JavaFramework에서는 여러가지 파라미터를 넘기기 위해 페이지 전체를 하나의 폼으로
삼고, 링크를 서브밋버튼처럼 쓰는 경우가 있다. 접근성 면에서 아주 안좋다. 솔루션을 바꿀 것을 추천한다.
그 외에도 Form Validating을 위해 JavaScript로 하는 경우가 있는데, Validating자체는 매우 유용하긴 하나 JavaScript로만 하는 것은 보안상 혹은 데이터 무결성을 저해하는 나쁜 케이스이다.
해결책은 간단하다. JavaScript를 하나도 쓰지 말고 웹사이트를 만들라. JavaScript가 하나도 없이 잘 돌아가는
사이트가 되면 이제 필요한 부분마다 JavaScript를 붙인다. 그러면 JavaScript에 의존하지 않는, 그러면서도
JavaScript의 편리함을 누릴 수 있는 사이트가 될 것이다.
8. 소리, 깜박임등을 이용하지 말라.
“쪽지가 도착했습니다.” – 한 때 제X보드 스킨 중에 저런 소리로 쪽지를 알려주는 UI가 있었는데, 절대 사용하지 말 것. 청각장애자가 아니더라도, 브라우저나 디바이스에 따라 소리 이용이 불가능한 경우가 많기 때문이다.
번쩍이는 Animated GIF, 플래시, DHTML은 모두 사용불가다. 사실 촌스럽기도 하다.
9. IE를 피하라.
IE전용 페이지로 만드는 순간, 당신의 웹사이트는 접근성에서 10Km쯤 멀어지게 된다. 개발도, 확인도 모두 비IE 브라우저에서
하라. IE기준으로 만들고나서 다른 브라우저로 보며 접근성을 위해 뜯어고치는 것보다, 비IE브라우저 기준으로 만들고 나서 IE로
보며 수정하는 것이 훨씬 빠르고 쉽다.
물론 당연히 VBScript, JScript(JavaScript와 혼동하지 말것.), ActiveX, 기타 IE전용이라 이름붙은 어떤 것도 피하라.
피할 수 없다면 브라우저 스니핑 기법을 통해 IE로 접속했을 때에만 적용되도록 하며, 다시 말하지만 절대로 IE에서만 이용할 수 있는 페이지가 되어선 안된다.
10. 장애인을 위해 아무것도 하지 마라.
별도의 장애인용 페이지, 별도의 자체 TTS… 모두 버려라. 실제로 이것들은 전혀 장애인들에게 도움되지 않는다. 무익할 뿐만
아니라 오히려 해가 된다. 위에 설명한 9가지만이라도 제대로 지키면 접근성은 90점 이상 획득한 셈이다.
0개의 댓글