웹 접근성 지침 정리

2024년 8월 20일 · #공부#팁

이미지 등 텍스트가 아닌 요소를 이용시 그 의미나 용도를 동일하게 인식할 수 있도록, 간단 명료한 대체 텍스트를 제공한다.

  • 대체텍스트를 제공함으로써 검색어에도 영향을 준다.
  • 이미지
    • alt 속성을 제공하지 않거나 “사진 이미지” 등 아무 의미 없는 대체텍스트를 재공하는 경우
      • → 산속 나무에서 고로쇠 약수를 두명의 사람들이 담고 있는 모습
    • 시각 장애인 분들은 더 상세한 설명을 선호하지만, 개발자들의 리소스를 생각하여 적당히 간단 명료하면 된다.
  • image of text(텍스트를 이미지로 제공 - 국제 표준에는 금지하고 있지만 국내에는 아직 존재)
    • 위 경우 텍스트와 동등한 내용으로 대체텍스트를 제공해야 함
    • 죄측메뉴_ 등 불필요한 prefix를 넣지 않는다.
    • ~이미지, ~버튼, ~메뉴 등 불필요한 정보는 대체 텍스트로 제공하지 않는다.
  • 약도
    • 약도는 최소한의 정보만 제공
  • 꾸밈요소
    • 꾸밈 이미지, 구분선 등은 고의로 인지가 안되도록 구현해야 함.
    • 배경이미지로 처리하거나, alt="" 처리
      • alt 속성이 아예 없는 경우, 파일명을 읽는다. 그러므로 빈 스트링을 줘야 한다.
  • 자동가입방지문자
    • 대체텍스트로 자동가입방지 코드를 제공하면 안된다.
    • 자동가입방지 코드 여부를 알려주고 실제 코드는 음성으로 들려주거나 문자메시지로 전송
  • 썸네일
    • a태그 안에 텍스트와 함께 있는 경우 alt를 빈 스트링으로 넣는다
    • 그렇지 않은 경우 의미없는 단어 보다는 글 제목을 alt 에 넣어준다.
  • 기호/부호
    • 기호/부호의 용도나 목적을 대체 텍스트로 제공한다.
    • 별점의 경우 5개의 별 각각마다 이미지로 주지 않고, 1-10점을 나타내는 별들을 하나의 이미지로 주어야 한다. 10점 만점에 5점
  • 리스트
    • 순위가 있는 경우 ul 대신 ol
  • 표를 이미지로 제공하는 경우 똑같은 자리에 똑같은 표를 마크업 하여 제공

  • 영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체수단을 제공해야 한다.
    • 자막, 전체 원고, 대본, 수어 등
  • 자막은 일반인들에게도 시끄러운 환경이나 오디오 재생이 어려운 환경에서도 도움이 된다.
  • 자막
    • 배경음악만 제공하는 영상의 경우 어떤 콘텐츠인지 알 수 있도록 텍스트로 제공한다.
    • 영상 내용과 자막은 일치해야 한다. 내용을 요약하지 않는다.
    • 자막을 끄고 켤 수 있으면 좋다.
    • 효과음에 대한 자막 제공 (e.g. 남자가 기침하는 소리)
  • 음성 정보
    • 자막은 청각장애인을 위한 것이지만, 영상 내에 음성 없이 텍스트 정보만 표시되는 경우도 존재한다.
    • 이 경우 시각 장애인은 인지할 수 없기 때문에 나레이션 등의 음성 정보도 제공해야 한다.
  • 수어
    • 자막과 수어는 겹치지 않게 제공한다.
    • 녹화된수어와 실시간 수어가 겹치지 않게 제공한다.
    • 수어 영상의 화질은 알아 볼 수준으로 제공한다.
    • 수어 통역사가 같이 무대에 있는 경우, 영상 전환시 수어 통역사가 보이지 않는 경우를 주의한다. 우측 하단에 따로 보여주는게 제일 좋다.

콘텐츠는 색에 관계 없이 인식 될 수 있어야 한다.

  • 흑백모드, 고대비모드(저시력 시각장애인), 색맹 사용자가 인식할 수 있도록 콘텐츠를 제공해야 한다.
  • 도표
    • 범례에 색을 제공할 때에는 색 뿐 아니라 패턴도 제공해야 한다.
    • 색 구분이 어려운 도표의 경우 텍스트를 함께 제공한다.
    • 색 구분과 텍스트 제공이 모두 어려운 경우 하단에 같은 내용의 도표를 함께 제공한다.
  • 네비게이션
    • 페이지 네비게이션의 현재 페이지를 표시하는 경우 텍스트 색상으로만 구분하지 않고, 배경색을 반전시키거나 모양을 다르게 한다.
    • 사진 슬라이드의 경우 점 네비게이션을 타원으로 넓게 주거나 아웃라인 표시
    • 현재 페이지를 숫자로 표시
  • 체크박스
    • 체크된 요소를 색상만 변경하지 말고 음영을 준다. 체크되지 않은 요소에 옅은 회색의 체크를 넣지 않는다.
  • 별점
    • 노란색 별과 옅은 회색 별을 사용하는 경우 점수도 함께 표시한다.
  • 일정표 달력
    • 색상 점 안에 약어 또는 패턴 표기

지시사항은 모양, 크기, 위치, 방향, 색, 소리등에 관계 없이 인식될 수 있어야 한다.

  • 단일 감각에만 의존하는 방법으로 제공하면 안된다.
  • 사례
    • 위치 의존 지시사항
      • 이 필드는 필수항목입니다. → 아이디는 필수항목입니다.
    • 방향 의존 지시사항
      • 위 항목을 입력하세요. → 위의 이름, 이메일 주소를 입력하세요.
    • 시각 의존 지시사항
      • 보이는 숫자를 입력하세요. → 자동가입방지 숫자를 입력하세요.

텍스트 콘텐츠와 배경간의 명도대비는 4.5:1 이상이어야 한다.

  • 저시력 장애인, 색각 장애인, 노인 대상
  • 노란 배경에 흰 글자를 사용하는 경우 잘 보이지 않는다.
    • 글자를 검정으로 바꾸거나, 배경을 어두운 색으로 바꾸어서 대비를 줘야 한다.
  • 탭콘텐츠나 메뉴 선택시 글자 색상만 바뀌는 경우 색상이 배경색과 명도 대비가 약할 수 있다.
  • placeholder 도 명도대비 준수 대상이다.
  • 규정상, 확대가 가능하면 3:1 까지도 가능하다. 그러나 웬만하면 4.5:1 비율을 권장하고 있다.

자동으로 재생되는 배경음을 사용하지 않아야 한다. 배경음으로 인해 스크린리더 이용 고객이 콘텐츠를 인식하고 사용하는데에 방해 받지 않아야 한다.

  • 3초 미만 재생되는 경우는 예외조항에 포함된다.
  • 배경음을 제공하고싶다면 정지된 상태에서 제공해주고 사용자가 필요할 때 켤 수 있게 한다.

이웃한 콘텐츠는 시각적으로 구분되도록 제공한다.

  • 텍스트가 겹쳐서 인식이 어려운 경우가 없게 한다.

모든 기능은 키보드만으로 사용할 수 있어야 한다.

  • 지체장애인, 뇌성마비 장애인 뿐 아니라 시각장애인도 키보드에 전적으로 의존하고 있다.
  • 초점 적용 가능 요소 위반
    • input, a, button 태그 대신 div 태그에 관련 기능들을 구현하는 경우
  • onfocus="this.blur()" 로 이벤트를 등록하는 경우

키보드를 이용한 초점 이동은 논리적이어야 하며, 시각적으로 구별할 수 있어야 한다.

  • 사용자 입력간 자연스러운 초점 이동이 돼야 한다.
  • 이 과정에서 콘텐츠 조작이 불가능한 상태가 되거나, 갑작스러운 페이지 전환이 일어나면 안된다.
  • 포커싱 되어있는 콘텐츠는 시각장애인, 저시력 장애인들이 구별할 수 있어야 한다.
  • 비장애인들이라도 마우스를 쓸 수 없는 사람이나, 상황 등에서도 유용하다.
  • 사례
    • 스타일 초기화시 outline: none 속성을 주는 경우가 있는데, 이는 지침을 위반한 것이다.
    • 포커싱 된 모습과 일반 상태의 모습이 차이가 크지 않은 경우 장애인들이 구별하기 어려울 수 있다.

웹페이지에서 제공하는 모든 이웃한 컨트롤은 개별적으로 선택, 사용할 수 있도록 충분한 크기로 제공해야한다.

  • 크기
    • 클릭 가능한 영역 - 대각선 길이 6mm 이상
      • 픽셀 단위로 개발하기 때문에 mm 단위는 애매하다.
      • W3C 에서 권고하는 픽셀 환산 값은 아래와 같다.
        • 1inch = 2.54cm = 25.4mm = 96px
        • 1mm = 약 3.78px
        • 1px = 약 0.26mm
      • 대각선 길이 6mm(22.68px) 를 만족하는 정사각형의 경우 width, height 값은 약 4.3mm 이다.
      • 이를 픽셀로 환산하면 가로세로 16~17px 정도 된다.
  • 여백
    • 테두리 안쪽으로 최소 1픽셀 이상의 여유
  • 기대효과
    • 손 떨림이 있는 사용자, 시각장애인도 쉽게 웹사이트를 이용할 수 있다.

시간 제한이 있는 콘텐츠(3분 내 보안코드 입력 등)는 응답시간을 조절할 수 있어야 한다.

  • 시간 제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하다.
    • 지적장애, 학습장애가 있는 사람들은 문서를 읽고 이해하는 시간이 더 많이 필요할 수 있다.
  • 보안 등의 이유로 반드시 필요한 경우 이를 회피할 수 있는 수단을 제공해야 한다.
    • 시간 연장 기능 제공

자동으로 변경되는 콘텐츠(캐로셀, 롤링 콘텐츠)는 움직임을 제어할 수 있어야 한다.

  • 장애인 사용자는 반응속도가 느리기 때문에, 뭔가 이용 하려고 하면 넘어가버려서 이용이 어려울 수 있다.
  • 정지 기능 뿐 아니라 이전/다음 버튼도 제공하면 좋다.
  • 마우스를 올리거나 포커스가 되어 있을 때 롤링 콘텐츠는 정지 되어야 한다.
  • 하지만 호버, 포커스시 정지 보다는, 명확하게 정지/다음/이전 버튼을 제공하는게 제일 좋다.

초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

  • 특정 사용자에게 발작을 일으킬 수 있다.
    • 광과민성발작증후군
    • 일본에서 다수의 아이들이 발작을 일으킨 사례가 있음.
  • 주의 집중이 어려운 사람의 경우 집중도가 떨어질 수 있다.
  • 불가피한 경우 게임/영상 콘텐츠 등을 시작하기 전에 발작에 대한 사전 경고를 꼭 해줘야 한다.

키보드 사용시, 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

  • 메뉴 등과 같은 반복 영역을 바로 건너뛰어 핵심 영역으로 직접 이동할 수 있는 수단을 제공해야 한다.
  • 페이지 최상단(GNB등)에 본문 바로가기, 주메뉴 바로가기 등의 버튼 제공
  • 반복되는 기능이 없는 경우는 제공하지 않아도 된다.

페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

  • 각 페이지는 유일하고 서로 다른 페이지 제목을 가져야 한다.
  • title 태그, HTML title 속성
  • 동일한 페이지에 포함된 모든 프레임은 해당 프레임만의 유일하고 서로 다른 프레임 제목을 가져야 한다. (요새는 iframe 을 잘 안쓴다.)
  • 제목은 간단명료해야 하며, 해당 페이지, 프레임, 콘텐츠 블록을 유추할 수 있도록 제공해야 한다.
  • 기대효과
    • 스크린 리더 사용시, 제목 정보로 내가 필요한 콘텐츠인지 아닌지 판단해서 스킵할 수 있다.
  • 페이지 제목
    • 탭 제목도 포함해서, 서로 url이 다르다면 유니크한 페이지 제목을 가져야 한다.
    • 위치 정보(breadcrumb)를 제공하는 경우 순서에 맞게 제목을 제공한다.
    • 역순, 정순 둘다 옳으므로 일관성 있게, 맥락에 맞게 제공한다.
  • 프레임 제목
    • iframe 등 프레임 요소를 쓰게 되면 본문의 영역과는 별개의 콘텐츠로 인식 되므로 스킵할지 아닐지 결정하기 위해 제목을 지정해줘야 한다.
    • 내용 없음 - 개발자 사용 용도 라고 표시해주는 것도 중요하다.
  • 콘텐츠 블록
    • 본문 내 제목 요소들
    • 제목 요소들은 반드시 h 태그를 사용한다.
    • h 태그는 스크린리더에서 책갈피, 목차 등으로 사용하기 용이하다.

링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

  • 링크텍스트 → 기능, 액션, 실행
  • 스크린 리더 사용자의 경우 주변 맥락을 통해 링크를 유추하고 실행해야 한다.
  • 링크를 클릭했을 때 무슨 일이 벌어질 것인지 예측할 수 있어야 한다.
  • 준수사례
    • 페이지를 표기할 때 1 처럼 숫자만 표기하지 말고 웹툰 14페이지 중 1 페이지 처럼 명확히 제공한다.
    • 자세히보기 만 표기하지 말고 진료시간 자세히보기 처럼 표기하여 링크의 용도와 목적을 명확히 제공한다.
  • title 속성 사용
    • 텍스트 정보를 노출하고 싶지 않다면 title 속성에 자세한 정보를 담을 수 있다.
    • e.g. 더보기
      • title="간행물자료실"

웹페이지에서 주로 사용하는 기본 언어를 정확히 명시해야 한다.

  • 스크린리더, 점역프로그램 등 보조기술은 기본 언어를 인식하여 자동으로 음성 모듈을 선택하거나 해당 언어에 적합한 점역 방법을 선택한다.
  • 주 사용 언어는 html 태그의 lang 속성에 명시한다. 한국어는 ko 이다. kr 이 아님.
  • 부분 언어
    • 외국어를 쓰는 경우 부분적으로 언어를 명시한다.
    • e.g. <span lang="zh">你好</span>
      • 중국어로 표기하면 니하오 라고 읽고,
      • lang 표기를 하지 않으면 한국어 발음으로 이호 라고 읽게 된다.
  • xhtml 은 그에 맞게 표기한다.

사용자가 의도하지 않은 기능은 실행되지 않아야 한다.

  • 새 창, 초점에 의한 맥락 변화 등
  • 컨트롤이나 사용자 입력은 포커스 됐을 때 의도하지 않은 기능이 자동적으로 실행되지 않아야 한다.
  • 사용자의 마우스나 키보드 조작에 의해서만 실행돼야 한다.
  • 사용자가 인지하지 못한 상황에서 새창, 팝업창 등이 열리지 않아야 한다.
    • 브라우저에서도 새창, 새탭을 자동으로 띄우지 못하게 막고 있다는 점.
  • 홈페이지 진입시 새창 팝업 금지
    • 그러면 공지는 어떻게 해야합니까?
      • 페이지 상단에 콘텐츠를 가리지 않는 형태의 배너
  • 콤보박스(Select)
    • 선택하는 과정과 실행하는 과정을 분리한다.
    • Select 옵션 선택시 바로 실행되는 것이 아니라, 옵션 선택 후 Submit 버튼을 눌러야 실행되어야 한다.
  • 새 창 열시
    • 새 창을 제공하는 경우 별도로 새 창 열림등의 텍스트 정보를 제공한다.
      • 스크린 리더 마다 _blank 속성을 읽지 않아주는 경우가 있다
      • innerText, alt 로 주면 좋고 불가피한 경우 title 속성에 줘도 된다.
      • e.g. alt="홈페이지 바로가기(새 창)"
  • 초점이 자동으로 이동하지 않도록 제공
    • e.g. 주민번호, 휴대폰번호 등 입력시 앞자리 입력 후 뒷자리로 이동하지 않도록 제공해야한다.

콘텐츠의 문맥은 사용자가 내용을 이해하기 쉽도록 논리적인 순서(선형 구조)로 제공해야 한다.

  • 시각적으로 그리드 레이아웃을 구성하여도 맥락은 선형적으로 제공돼야 한다.
  • 스타일 시트를 제거하여도 그 내용을 순서대로 읽어 문서의 의미를 이해하기 쉬워야 한다.
  • 목록구조
    • 카운트할 수 있는 목록 형태 - ul, li 로 구현
    • 순서가 있는 목록 형태 - ol, li 로 구현
      • 아이콘으로 가로로 예쁘게 표현 된 경우도 리스트 태그를 사용하자.
      • e.g. 민원신청 → 접수 → 민원수리 → 완료 → 결과 통보 ... 이런 형태의 UI
  • 계층구조
    • Mega Menu, 조직도, 트리 등 계층을 갖는 구조의 경우도, 계층을 갖는 ul, li 구조로 구현해야 한다.
      • 예시 - CSS 가 없는 경우 아래와 같이 나오도록.
        • 메뉴1
          • 서브1
          • 서브2
        • 메뉴2
          • 서브1
          • 서브2
  • 탭콘텐츠
    • 탭 제목과 내용이 논리적 순서로 제공돼야 한다.
    • 각 탭 제목 바로 다음에 다음 내용이 오는 논리적인 순서로 구현한다.
      • 위 계층구조 예시와 동일하게
  • 표
    • 표의 제목과 내용을 서로 매칭하여 이해할 수 있도록 하나의 <table>을 제공한다.
    • 하나의 표를 두개의 <table> 태그로 나누어 구현하지 않아야 한다.
      • e.g. 제목과 내용을 각각 분리하여 두개의 테이블 태그를 사용하는 경우

표는 이해하기 쉽고 표의 이용 방법을 예측할 수 있게 구성해야한다.

  • 표는 좌표가 존재하고 2차원 정보가 되어, 어렵게 느껴질 수 있다.
  • 제목셀과 내용셀이 잘 매칭돼야 한다.
  • 복잡한 구조의 표 - 제목셀이 여러개인 경우
    • 각 row 가 제목 → 내용 → 제목 → 내용 ... 순서의 구조인 경우
    • 각 제목 셀에 id 값을 부여하고, 내용 셀의 headers 속성으로 해당 젬고 셀을 매칭하여 제공
  • caption 정보 미제공
    • 표에 caption 정보를 제공하지 않고 summary 속성 정보만 제공하는 경우
    • summary 정보를 제거하고 caption 태그는 필수로 제공한다.
    • caption 정보는 display: hidden 등올 감추기 말고, 스크린리더 사용자가 읽을 수 있게 overflow: hidden 으로 제공.

사용자 입력필드에는 대응하는 레이블을 제공해야 한다.

  • 스크린리더 사용자는 입력필드에 어떤 정보를 입력해야 하는지 알아야 한다.
  • 제목이 있는 서식
    • lable 태그의 for 속성과 입력필드의 id 값이 일치하도록 제공
  • 화면 내 제목이 없는 서식
    • 검색어 입력 필드 등
    • input 태그에 title 또는 aria-lable 속성을 사용한다.
  • 2개 이상의 입력 서식 (전화번호 등)
    • lable 태그는 1:1 로만 매칭이 가능하다.
    • 각 필드에 title 또는 aria-lable 속성을 사용한다.
      • e.g. 이동전화 앞번호, 이동전화 중간번호, 이동전화 뒷번호
  • 유사한 용도의 서식
    • 동의합니다 체크박스의 경우
      • 동의 대상이 서로 다른 두개의 체크박스에 대해서는 서로 다른 더 명확한 레이블 정보를 제공한다.
      • e.g. title="전체약관 동의", title="홈페이지 회원 이용약관 동의"
    • Select 를 포함한 검색의 경우 예시
      • Select - title="검색 구분"
      • Input - title="검색어"

입력 오류를 정정할 수 있는 방법을 제공해야 한다.

  • 애초에 입력 오류가 발생하지 않도록 사전 설명을 먼저 제공한다
  • 오류가 발생한 위치와 발생하게 된 이유 등에 관한 정보를 알려주어야 한다.
  • 입력값 또는 형식에 대한 사전 설명
    • 사전 설명은 입력 필드보다 상단에 마크업 돼야한다.
    • placeholder 로 입력에 대한 주의사항을 병행하여 제공한다.
    • 만약 둘다 어렵다면 title 속성에 제공하는 방법도 있다.
  • 서식 입력오류 안내
    • 오류 발생시 system alert 으로 제공한다.
      • 오류 알림을 화면 내 정보로만 제공하는 경우 스크린 리더 사용자는 오류 발생 여부를 인지하기 어렵다.
    • 상황에 맞는 오류메시지를 제공한다. (뭘 잘못한건지)
  • 제목과 내용이 1:N 으로 매칭되는 서식 (휴대폰번호, 이메일 등)
    • 각 입력서식에 대해 구분 가능한 오류를 알려줘야한다.
      • e.g. 휴대폰 뒷자리를 입력해주세요.
      • e.g. 이메일 도메인 주소를 확인해주세요.

  • 보조기기가 정확히 읽을 수 있도록 마크업의 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
    • 마크업 점검도구 활용 - Markup Validation Service
  • 기본적으로 웹표준(W3C)을 준수해야한다.
  • id 값이 중복되지 않아야 한다.
  • 하나의 태그 내에 속성 값이 중복되지 않아야 한다.

  • 외부 애플리케이션을 embed 하는 경우 접근성을 준수한 애플리케이션을 embed 해야한다.
  • 스크린리더 등의 보조기술 지원