웹 접근성 지침
한국형 웹 콘텐츠 접근성 지침은 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성 4가지 원칙과 각 원칙을 준수하기 위한 13개의 지침 및 해당 지침의 준수여부를 확인하기 위해 24개의 검사항목으로 구성되어 있다
대체 텍스트
텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
ex) <img src="..." alt="이곳에 이미지에 관한 설명을 적어주어야 한다."/>배경으로 처리된 이미지등 alt값을 넣을 수 없지만 사용자에게 의미를 전달해야 하는 경우 숨김 컨텐츠를 통해 대체 텍스트를 제공할 수 있다.
ex) <a className="instagram" href="링크"...>
<span className="hidden">Instagram<span/>
//width,height를 설정하고 overflow를 hidden 처리 하는 등의 css 작업처리 해준다.
</a>상황에 따라 의미를 전달하지 않아야하는 경우도 잘 구분해야 한다. 그럴 경우는 alt=""로 처리한다.
멀티미디어 대체 수단
멀티미디어 컨텐츠를 제공하는 경우도 장애인과 비장애인이 내용을 동등하게 인식할 수 있도록 자막, 대본, 수화 등을 제공해야 한다.
명료성
컨텐츠는 색에 관계없이 인식될 수 있어야 한다. ex)흑백 처리시 각각이 구분되어 전달되어야 한다.
지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다. ex)"아래 버튼을 클릭해 주세요" 보단 "확인 버튼을 클릭해 주세요" 라고 작성해야 한다!
텍스트 컨텐츠와 배경의 명도대비를 4.5 : 1 이상으로 작성해야 한다. 구분이 잘 될 수록 좋다! 단) 로고, 장식 목적의 콘텐츠, 포커스가 맞춰졌을때 명도 대비가 커지는 경우는 검사 항목에 포함되지 않는다.
입력장치 접근성
모든 기능은 키보드 조작으로 사용할 수 있어야 한다.
키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
충분한 시간 제공
자동으로 변경되는 컨텐츠는 움직임을 제어할 수 있어야 한다. ex)캐러셀 슬라이드
이전, 다음, 정지, 재생 버튼을 제공해야 하며 모든 기능을 갖출 수 없는경우 컨텐츠 영역에 마우스 오버 혹은 키보드 접근 시 움직임이 정지된다면 제공한 것으로 간주!
광과민성 발작 예방
초당 3-50회 주기로 깜빡이거나 번쩍이는 컨텐츠를 제공하지 않아야 한다.
입력도움
온라인 서식에서 오류가 발생하는 경우, 사용자에게 오류가 발생한 위치와 오류를 유발하게 된 이유 등에 관한 정보를 알려줘야 한다.
React-JSX
JSX에서는 모든 aria-* HTML 어트리뷰트를 지원한다. hypen-case(kebab-case, lisp-case 등)으로 작성해야 한다.
ex)
<input
type="text"
aria-label={labelText}
aria-required="true"
onChange={onchangeHandler}
value={inputValue}
name="name"
/>해당 작성글은 모든 웹접근성 지침의 가이드라인을 제공하지 않았으므로 웹 접근성 연구소에서 제공하는 지침을 참고해야 합니다.
Reference
