웹 접근성 교육

웹 접근성 교육

도구 설치

  • Firefox Setup 55.0b9
    • Firefox 구버전. 교육 실습용.
  • Firebug
    • 파이어폭스용 요소 검사 도구
  • OpenWax(Open Web Accessibility eXtension)
    • 웹 접근성 진단 도구
  • WebDeveloper
    • 각종 설정을 초기화 할 수 있다.
    • 실습에서는 CSS를 초기화해서 웹이 구조를 제대로 가지고 있는지 보는 용도로 사용했다.
  • picpick
    • color picker
  • CCA(Colur Contrast Analyser)
    • 배경색, 글자색의 대비가 일반 크기 텍스트, 큰 텍스트에서도 적절한지 판단.
  • WAT
    • Internet Explorer 용 접근성 도구
  • kwcag a11y inspector
    • 요소 대각선 크기 측정 도구

잡담

  • 단수 장애
  • 복수 장애
  • Class Action ?
    • 한국: 소송 한 사람만 배송한다.
    • 미국: 한 사람이 소송에서 승소하면 기준에 해당하는 사람 모두 배상해야한다.
  • 장애인 차별 금지법(장차법)

24개 검사항목 중

  1. 시각 장애
    • 적절한 대체 텍스트 제공
    • 이미지에 적절한 alt 제공
    • 시각장애인이 낭독기를 통해 alt 속성을 읽을 때 제대로 접근할 수 있도록 한다.
    • alt를 안달면 src를 읽는다.
    • alt=”” 는 의미없는 이미지일때 쓴다.
    • background-image 일 때, alt를 달 수 없다.
      • ir 기법
      • 안드로메다 기법
      • display:none 이 아닌, height:0; width:0
        • 리스트 스타일 이미지에는 빈값 alt=””
        • 인포그래픽 옆에 제목이 있을 경우 인포그래픽에 alt=”” 해주는게 좋다. 중복방지.
        • QR 코드는 QR 코드라고 쓰지 않고, 이동할 웹에 대한 정보를 적는다.
  2. 청각 장애
    • 동영상에 자막과 수화 동시 제공
    • 닫힌 자막, 열린 자막
    • 닫힌 자막은 닫을 수 있다. 좋은 방법.
    • 열린 자막은 동영상 자체에 있는 것이라 닫을 수 없다. 나쁜 방법. - 동영상을 요약하면 안된다. 전체 제공. - 동영상 원고를 제공한다. - UCC 처럼 사용자가 올린 것에는 해당하지 않는다. 관리 불가능이기 때문이다. - 자동재생 금지
    • 영상은 재생되어도 된다.
    • 소리는 낭독기를 방해하기 때문에 안된다.
  3. 색맹, 색약, 저시력
    • 색깔로 구분을 해주면 안된다.
    • 패턴으로 구분을 해줘야 한다. 네모, 세모, 동그라미.
    • 텍스트 콘텐츠의 명도 대비
  4. 키보드 사용 보장
    • heading 태그가 있어야 한다.
    • js 작성시 onmouse만이 아니라 onfocus도 설정해줘야 한다.
    • onfocus=’this.blur()’ 는 focus 했을때 없어지기 때문에 절대 사용금지.
    • outline=0 하면 안된다. 포커스 했을 때 있어야 한다.
  5. 모바일
    • 터치요소 크기가 대각선 6mm를 넘어야 한다.
    • 각 터치 요소를 1mm이상 띄워줘야 한다.
  6. 운용의 용이성
    • 광과민성 발작: 깜빡임과 번쩍임 사용 금지. 초당 3~50 회를 사용하지 않아야 한다.
    • 사용할 경우 경고 메세지 먼저 주면 OK - 자동으로 움직이는 컨텐츠의 경우 응답시간 조절 가능하도록 만들어야 한다. - [여기]링크 안됨.
    • 더 구체적으로 제시해야 한다. - 빈 링크 안됨. - html lang=”ko” 작성해준다. 해 줄 경우 리더기가 더 제대로 읽어준다.
  7. 이해의 용이성
    • index 페이지에 들어오자마자 팝업은 안된다.
    • 본문의 내용을 가려서는 안된다는 내용 때문. - 사용자가 의도하지 않는 기능은 실행되지 않아야 한다. - CSS를 없앴을 때, 밑으로 떨어지는 구조가 좋은 구조다. - 가상 커서에 대한 초점이동 - 글 제목, 글 내용, 더보기 순서로 구성되어 있어야 한다.
    • 글제목 글제목 글제목, 글 내용 글 내용 글 내용 안된다. - 테이블 태그에 caption 및 p 에 설명 및 요약을 넣어야 한다.
    • 표의 의미가 있을때만 넣어야 한다.
    • 의미가 없다면 넣어주면 안된다.(레이아웃 용도로 table을 사용할 때)
    • headers를 사용하면 순서를 지정해 줄 수 있다. - ID, PW 입력 로그인 창
    • label 태그와 input 태그를 일치시켜 줘야 한다. - 회원가입창
    • 틀린 정보가 있을 시 무엇이 틀렸는지 알려줘야 한다.
    • 포커스를 해당 input에 줘야한다. - 마크업 오류 방지
    • 중복 아이디 금지
    • 태그 열고 닫음 오류
    • 중복된 속성 금지. name=’form’ name=’post’ - 인터페이스를 일관되게
    • 확인 취소
    • 확인 취소
    • 취소 확인
웹 접근성 교육 부산