일전에 이 포트폴리오를 소개하면서 웹접근성과 관련된 이야기를 한 적이 있습니다.


http://zoahaza.tistory.com/239




그런데 그 당시의 포트폴리오도 웹 접근성 측면에서 완성본이 아니었습니다.


http://zoahaza.dothome.co.kr/pf2014/002_nanumnow_self/nanum_main2.html




위의 링크는 웹 접근성의 관점에서 미완의 숙제가 몇개 남겨져 있습니다.


그냥 코드를 보고 마크업했었을 때에는 전부 다 지켜졌다고 생각했지만, 스크린리더와 웹 접근성 도구 등으로 확인절차를 거친 결과 미완성인 부분이 몇개 있었습니다.




1. 최근댓글 탭에서 내용을 거치지 않고 바로 More로 탭이 이동되는 것이 논리적인 흐름에 부합하는가?


시각장애인을 위해 웹페이지를 설계할 때에는 특히 html 페이지의 논리적인 흐름에 주의해야 합니다.


그런데 위 페이지의 최근댓글 탭은 다음과 같이 이동하도록 짜여져 있습니다.




이게 과연 웹 접근성 측면에서 올바른 순서일까요?


그렇지 않습니다.


논리적으로 따져보면 2와 3의 순서가 바뀌어야 합니다.


왜냐하면 최근 댓글의 본문들을 전부다 읽고 나서 그것보다 더 많은 정보가 담겨 있는 more에 접근하는 것이 논리적인 순서에 맞기 때문입니다.


따라서 more 링크를 최근댓글 본문이 포함된 리스트 뒤로 넘겨야 합니다.




2. 여러개가 연속된 링크를 구분하기 위해 앞쪽에 쉼표를 넣는 것은 과연 합당한가?


위의 예제에서는 앞쪽에 쉼표가 들어가 있는 부분이 있습니다. 바로 댓글/추천 표시기능을 넣은 작은 아이콘 부분인데요...


스크린리더 에뮬레이터로 실제 동작을 확인 결과, 링크 앞쪽의 쉼표는 없는 것이 낫다는 결론을 내렸습니다.




3. 디자인상의 장애인 웹 접근성 오류


사실 이 포트폴리오는 제가 디자인한 것이 아니기 때문에(...) 이 부분은 수정하지 않았습니다. 하지만 장애인 웹 접근성 오류가 있다는 사실을 알 필요는 있어 보입니다. 


댓글/추천 표시기능 부분의 명도차가 너무 작습니다. 작은 글씨와 아이콘으로 이루어진 부분이기 때문에 명도차가 최소한 4.5는 나와야 하지만 그렇지 못합니다.




4. (접근성과 관련된 부분은 아닐 수도 있음) 확장성을 위해 상단 네비게이션 부분을 a 태그만으로 나열하는 게 아니라 ul li 로 구조화해야 함.


a 태그만으로 상단 네비게이션 부분을 나열했을 때의 문제는 메인메뉴 아래 서브메뉴를 만들어서 구조화시키기 어렵다는 것입니다. 만일 이 경우 구조를 바꾸지 않고 서브메뉴를 만들었을 경우 접근성 문제가 발생할 소지가 큽니다.




5. (접근성과 관련된 부분은 아님) 파이어폭스에서 크로스브라우징 오류


혹시나 위의 기존 링크를 파이어폭스에서 접속하신 분은 뭔가 레이아웃이 이상하다는 것을 느끼셨을 것입니다.


이미지와 이미지 아래의 경계선이 붙어있어야 하는게 제 의도인데, 의도와는 달리 떨어져 있기 때문입니다.



결론적으로 말하면 이 크로스브라우징 오류는 이미지를 감싸는 a태그에 display:block; 속성을 주면 해결됩니다. 그러나 원인을 모르겠다는게 함정이네요 -_-;







결론적으로 3번 항목을 제외하고는 모두 수정을 거쳤으며, 수정이 완료된 페이지는 다음 주소와 같습니다.


http://zoahaza.dothome.co.kr/pf2014/002_nanumnow_self/nanum_main3.html





댓글을 달아 주세요

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

    나도 전에 배워보고 싶었는데 포기했어요

  2. 모바노 2014.11.19 17:32 신고  댓글주소  수정/삭제  댓글쓰기

    본문의 내용과 링크된 최종 페이지를 보니
    화영님의 엄청난 고민이 보이네요. ^^

  3. 레오 ™ 2014.11.19 22:39 신고  댓글주소  수정/삭제  댓글쓰기

    처음부터 끝까자 정독해도 ..모르겠네요 ^^;
    계속 읽어보겠습니다 언젠가 알게 될날이 오겠지요 ..

  4. 천추 2014.11.20 00:13 신고  댓글주소  수정/삭제  댓글쓰기

    유익한 정보 잘 보고 갑니다.
    좋은 하루되시기 바랍니다.

  5. 빌노트 2014.11.24 10:06 신고  댓글주소  수정/삭제  댓글쓰기

    디테일한 것에도 신경쓰는 모습을 보니
    괜히 전문가가 아닌 것 같습니다. 많이 배우네요^^

티스토리 툴바