[코딩] 코딩시 유의 및 웹 접근성 연구소 사이트에서 지켜야 했던 사항들

• [코딩] 코딩시 유의 및 웹 접근성 연구소 사이트에서 지켜야 했던 사항들
• 꾸준한 html 유효성 검사, css 유효성 검사. (css 핵 No!)

• outline: 0; 또는 :focus {outline: 0;} 사용 지양.

  CSS 작성시 위와 같이 속성을 정하면 익스플로러 외에 브라우저에서 키보드 이동시 포커싱이 안 보이는 문제점 발생하므로 사용하지 않는다.

• 시각적으로 콘텐츠를 숨길 경우 모든 장치에서 콘텐츠를 숨라는 의미를 가진 display: none 아닌visibility:hidden;을 이용하자. 숨긴 빈 공간이 생길 경우 이런 방식으로 처리하면 display: none의 시각효과와 같다. visibility:hidden; position:absolute; overflow:hidden; height:0; width:0; font-size:0;

• table {border-spacing:0; border-collapse: collapse;}

  table 보더 속성을 <table border="1">로 하고 코딩시 파이어폭스에서만 td, th {border-left:0}으로 해도 검정 세로선이 생기므로 collapse 속성을 사용이 완전하지 못함.

• body의 기본 폰트 사이즌 font-size:0.75em 으로 em 단위로 설정하면 브라우저의 텍스트 조절 기능 이용시 엄청난 크기로 확대 되는 현상 발생.
  em단위는 최상위에 설정된 font-size를 기준으로 가지게 되며, 그 하위는 상위를 기준으로 상속 되므로 최상위 기준이 아닌 자신이 속해있는 부모(body)의 font-size를 100%(1em)으로 설정이 되어 75%로 설정값을 변경하고 하위는 em 단위를 사용. 
  브라우저 마다 조금씩 하위 속성들의 상속 값에 차이가 있었음.
  글자 단위 계산 도움 사이트: http://aloestudios.com/tools/emchart/
• 익스플로러 6에서만 메인 중앙 콘텐츠에서 마지막이 되는 콘텐츠가 2개씩 표현 되는 요상한 버그가 있었는데, 코드 자체를 바꿔도, css를 바꿔어 보아도 해결이 안 되었는데 주석 때문에 있었던 현상. 사이트 오픈 직전에 주석을 줄여서 해결 했습니다.. ㅜㅜ

  

• <li><h3>소제목</h3></li>이런 식으로 리스트 안에 h 태그가 들어가는 부분을 지양 함. 특히 사이트맵 부분 코딩시 이런 방식으로 코딩 되는 사례가 많으나 바람직한 방법은 아님.
• tabindex의 사용 제한.
  • 굳이 tabindex를 사용하지 않아도 문서의 논리적 구조가 맞으면 제대로 이동 가능
  • 한 번 사용하면 문서의 모든 영역에 탭인덱스 설정을 하여야함. 유지보수시 한 부분이 변경되면 다른 부분도 다 수정해야 하므로 관리에 어려움.
• 모든 링크는 밑줄과 파란색으로 링크임을 명확하게 표시할 것. 단, 게시판 같이 링크임을 알 수 있는 곳은 예외로 함. 
  외부사이트로 나가는 경우 아이콘을 이용하여 시각적으로 외부로 연결 된다는 것을 알리기. 
  하지만 가장 좋은 방법은 <a href="http://wah.or.kr" title="웹 접근성 사이트로 이동" class="out">웹 접근성 연구소</a>같이 링크의 title 속성을 이용해서 링크의 목적을 같이 표현하는 것이라고 합니다.
• ol 또는 ul 태그 사용시 기본 불릿 모양이나, li의 list-style:demical 인 경우 숫자가 익스플로러에서는 안보이는 현상이 있었습니다. 주로 li를 담고 있는 ul의 margin값의 계산 차이에서 오는 것 같았습니다. 이 부분은 ul의 margin값을 이용하여 숨겨진 불릿이 표현 되게 수정 하는 방향으로 하였습니다. 브라우저 별로 차이가 나는 간격은 디자인에 따라 적당이 문제 안되는 부분에서 처리하였습니다. 아니면 ol, ul의 margin-left:0을 피하거나요 ^^;