취업을 위해 스터디그룹을 결성해서 전체 마크업을 할 당시에는 분명 웹접근성을 거의 지켜서 마크업했었는데... 그게 제 능력이라기보다는 동료들의 능력이었나 봅니다.


자료를 날리고 나서 다시 개인적으로 마크업하다 보니 웹접근성 부분에서 부족한 부분이 많이 눈에 띄어서 보완작업을 좀 했습니다.


일단 비교 페이지는 다음과 같습니다.


보완작업 이후 페이지 : http://zoahaza.dothome.co.kr/pf2014/002_nanumnow_self/nanum_main2.html


보완작업 이전 페이지 : http://zoahaza.dothome.co.kr/pf2014/002_nanumnow_self/nanum_main.html


그냥 눈에 보기에는 똑같을지도 모릅니다.


하지만 장애인 웹 접근성의 관점에서 보면 두 페이지는 상당한 차이가 나는 페이지들입니다.


그 이유를 지금부터 설명드리죠.






1. DTD를 html4 -> xhtml1.0으로 변경, 마크업 스타일도 xhtml1.0에 맞게 수정했습니다.


이건 카더라일수도 있는데 그린컴퓨터아트학원 강사님 중 한분이 html4로는 장애인 웹 접근성을 지킬 수 없는 것처럼 말하더군요. 작년 웹표준/웹접근성 전문가 과정에서는 전혀 그런 얘기가 없었고 접근성 포트폴리오 페이지 만들때에도 html4 스타일로 마크업했었는데 말입니다. 이 부분은 확인이 필요한 듯 합니다만[+ 확인결과 html4로는 장애인 웹 접근성을 지킬 수 없다는건 루머라고 합니다.], 어쨌든 취업에 활용하기 이전에 학원 관계자들에게 포트폴리오를 확인받기 위한 거니까 수정하긴 했습니다.




2. <title></title> 안에 들어가는 문구 수정


보완작업 이전 페이지는 타이틀이 New Web Project로 되어 있습니다. 이건 에디터 툴인 Aptana의 기본값인데, 엄연한 장애인 웹 접근성 위반입니다. 수정이 필요한 부분이었고, 수정을 완료한 상태입니다.




3. <h2> 요소 추가


눈에 보이지 않는 h2 요소를 몇 군데에 추가했습니다.


그냥 육안으로 보기에는 구분이 안가지만, 시각장애인용 스크린리더기에서는 차이를 느낄 수 있는 부분입니다.




4. 네비게이션 링크 부분 마크업 오류 수정


네비게이션 링크 부분은 원래 이런 구조였습니다.


<span><a>내용</a><a>내용</a> ... <a>내용</a></span>


근데 접근성을 위해 중간에 h2 요소를 추가했습니다.


그래서 이런 구조가 되었지요.


<span><h2>제목</h2><a>내용</a> ... </span>


그런데 span은 인라인 요소고 h2는 블록 요소입니다. 따라서 마크업 오류가 발생하게 되는데, span을 div로 수정함으로써 마크업 오류를 수정했습니다.




5. 일부 이미지 alt 속성 추가


alt속성을 넣는 건 접근성 쪽에선 기본 중에 기본이라... 다 넣었다고 생각했는데 w3c validation tool로 확인해보니 두 군데가 빠져 있더군요.




6. 추천, 댓글기능 보여주기 설명 추가


디자인상 페이지의 여러 부분에서 추천, 댓글기능을 보실 수 있습니다.



바로 이 부분인데요, 글자 옆에 있는 이미지를 <img src="경로" alt="설명"/> 과 같은 방식으로 넣었으면 간단히 해결될 문제일 것을... 저 이미지를 배경이미지로 끼워넣었다는게 문제의 발단입니다.


마크업상 배경이미지는 설명을 따로 추가할 수 없는 장식적인 요소로 취급되기 때문에 저 아이콘이 추천, 댓글을 보여주는 기능이라는 사실을 설명해낼 수가 없습니다.


이런 경우에는 따로 숫자 앞쪽에 안보이는 마크업 요소를 추가하여 추천, 댓글기능임을 표기하는 것이 최선책입니다.






이런 이유들로 인해 두 페이지는 눈으로 봤을 때에는 차이를 느낄 수 없지만, 장애인 웹 접근성 측면에서 상당한 차이가 나는 페이지입니다.


무엇보다도 잠깐동안이지만 웹 접근성이 제대로 지켜지지 않은 포트폴리오를 가지고 취업할 자리를 구하러 다녔다는 것을 반성해야 하겠습니다. 몰라서 지나친 부분도 있지만 대부분 이미 알고있던 항목들이었던게 더 큰 문제입니다. 취업준비 하는데 부주의했다고밖에 생각되지 않네요. 반성해야겠습니다.




+) 이번 마크업에 사용한 툴은 Aptana입니다. 2번 항목의 설명에서 이미 눈치채셨을 것 같습니다만...? ^^;





댓글을 달아 주세요

  1. 달빛천사7 2014.11.06 10:25 신고  댓글주소  수정/삭제  댓글쓰기

    html도 계속해야 된는데 안하니까 다 잊어버리네요 오늘 책온다고 문자왔네요

  2. 레오 ™ 2014.11.06 14:27 신고  댓글주소  수정/삭제  댓글쓰기

    html 책 두권 보고 쓱 덮었습니다
    잘못 만지면 고장 난다고 해서 아예 안만지고 있습니다 ㅡㅡ;

    • 책덕후 화영 2014.11.06 16:20 신고  댓글주소  수정/삭제

      잘못만지면 고장이 아니라 웹페이지가 오작동하겠죠 ㅋㅋㅋ html은 하드웨어 성능에 영향을 주는 것이 거의 불가능합니다 자바스크립트라면 모를까... ^^;

  3. 빌노트 2014.11.10 10:00 신고  댓글주소  수정/삭제  댓글쓰기

    웹 접근성에 대한 정답은 구글과 네이버 검색엔진의 지원여부인 것 같습니다^^
    많은 도움 받고 갑니다!

    • 책덕후 화영 2014.11.10 11:25 신고  댓글주소  수정/삭제

      장애인 웹 접근성을 잘 지켜서 블로그나 홈페이지 등을 설계하면 구글 검색엔진에 잘 노출되는건 사실입니다. 근데 네이버는 그렇지 않아요. 이 블로그도 웹 접근성을 지켜서 설계했는데 구글유입수는 꽤 많은 반면 네이버 유입률은 0%입니다. ㅠㅠ 네이버 검색엔진이 웹 접근성으로는 해결할 수 없는 불합리한 측면이 좀 있는듯 합니다. 그 부분에 대해서 다른 블로그 전문가들이랑도 얘기해봤는데 네이버의 잘못이라고 하더군요.

티스토리 툴바