1. 인식의 용이성 (Perceivability)
모든 사용자가 콘텐츠를 인지할 수 있어야 합니다.
① 대체 텍스트 제공
이미지를 볼 수 없는 사용자를 위해 이미지의 의미를 설명하는 텍스트(alt 속성)를 넣어야 합니다.
alt 속성을 아예 쓰지 않으면 스크린 리더는 파일명(예: IMG_1234.jpg)을 그대로 읽어주거나 "이미지"라고만 안내하여 사용자에게 혼란을 줍니다.
단순한 배경 장식, 구분선, 아이콘 옆에 동일한 내용의 텍스트가 이미 있는 경우에는 alt="" 만 써줍니다.
② 명도 대비
텍스트와 배경의 색상 차이가 뚜렷해야 저시력자나 고령자가 읽기 쉽습니다. (최소 4.5:1 권장)
(디자이너 영역)
2. 운용의 용이성 (Operability)
① 키보드 사용 보장
마우스 없이 키보드(Tab 키, Enter 키 등)만으로도 모든 기능을 사용할 수 있어야 합니다.
IOS(VoiceOver), AOS(TalkBack)에서 테스트
② 충분한 시간 제공
시간 제한이 있는 콘텐츠(예: 자동 로그아웃, 슬라이드 배너)는 시간을 조절하거나 일시 정지할 수 있어야 합니다.
- 슬라이드 배너
ⓐ 정지/재생 컨트롤 제공 (필수)
자동으로 움직이는 콘텐츠는 사용자가 멈출 수 있어야 합니다.
정지 버튼: 좌측 하단이나 우측 하단 등 눈에 잘 띄는 곳에 '일시정지' 버튼을 제공해야 합니다.
자동 정지: 마우스 커서를 배너 위에 올리거나(Hover), 키보드 초점(Focus)이 배너 내부에 진입했을 때 슬라이드가 멈추도록 설계해야 합니다.
ⓑ 키보드 접근 및 초점 이동
이동 보장: Tab 키를 눌러 배너의 이전/다음 버튼, 인디케이터(점 버튼), 배너 링크에 순차적으로 접근할 수 있어야 합니다.
ㄴ 이전/다음 및 인디케이터 구성
버튼 이름: 이전/다음 버튼에 aria-label="이전 배너 보기", aria-label="다음 배너 보기"를 설정하여 용도를 알립니다.
현재 위치: 여러 개의 점(Indicator) 중 현재 활성화된 버튼에는 aria-current="true"를 추가하여 현재 위치임을 알립니다.
초점 관리: 현재 화면에 보이지 않는 슬라이드 요소에는 초점이 가지 않도록 처리해야 합니다. (비활성 슬라이드에 visibility: hidden 또는 display: none 적용)
- WAI-ARIA 활용:
ex) 배너 전체 컨테이너에 role="region"과 aria-label="주요 공지사항 배너"를 부여합니다.
현재 슬라이드 상태를 aria-live="polite"를 통해 읽어주되, 사용자가 조작 중일 때는 방해하지 않도록 설정합니다.
현재 몇 번째 배너인지 알 수 있도록 1 / 5와 같은 텍스트 정보를 제공합니다.
숨김 텍스트: 이미지 배너의 경우 alt 속성에 배너 내용을 명확히 적어줍니다.
- 루프(Loop) 구현 시 주의사항
무한 루프의 함정: 키보드 사용자가 마지막 슬라이드에서 Tab을 눌렀을 때, 갑자기 다시 1번으로 돌아가서 '키보드 함정(Keyboard Trap)'에 빠지지 않도록 주의해야 합니다.
순환 구조보다는 마지막 요소 다음에 배너 밖 영역으로 초점이 자연스럽게 빠져나갈 수 있도록 설계하는 것이 접근성 측면에서 권장됩니다.
3. 이해의 용이성 (Understandable)
콘텐츠의 내용을 이해하기 쉬워야 합니다.
기본 언어 표시: 웹 페이지 상단에 해당 페이지의 주 언어(예: <html lang="ko">)를 명시해야 스크린 리더가 올바르게 읽어줍니다.
예측 가능성: 사용자 의도와 상관없이 갑자기 팝업이 뜨거나 초점이 바뀌지 않아야 합니다.
입력 도움: 양식 오류가 발생했을 때 어디가 잘못되었는지 알려주고 수정 방법을 안내해야 합니다.
4. 견고성 (Robust)
미래의 기술(보조공학 기기 등)과 호환되어야 합니다.
문법 준수: HTML 태그의 열고 닫음, 중복 속성 방지 등 표준 문법을 지켜야 보조기기가 콘텐츠를 정확히 해석합니다.
웹 표준 준수: W3C 웹 표준을 준수하여 다양한 브라우저와 기기에서 동일하게 작동하도록 구축합니다.