접근성을 위해 디자인
접근성은 비교적 큰 주제이므로 단일 학습 모듈에서 접근성의 모든 부분을 다룰 수는 없습니다. 그러나 만드는 모든 페이지에서 구현하려는 몇 가지 핵심 개념이 있습니다. 액세스 가능한 페이지를 새로 디자인하는 것이 기존 페이지를 액세스 가능하게 만드는 것보다 더 쉽습니다.
디자인된 방식대로 HTML 사용
HTML은 페이지를 만드는 데 사용할 수 있는 단추, 링크, 양식 컨트롤 등의 많은 요소를 제공합니다. 이러한 각 요소에는 클릭 가능, 링크 가능 또는 포커스 받기와 같은 기본 제공 기능 세트가 있습니다.
참고
포커스는 컨트롤이 키보드 입력을 받을 수 있음을 의미하는 웹 개발 용어입니다. 단추는 포커스를 받아 사용자가 스페이스바를 선택하여 활성화하거나 "클릭"할 수 있도록 합니다.
CSS와 JavaScript를 사용하면 모든 요소를 모든 유형의 컨트롤처럼 보이게 만들 수 있습니다. 예를 들어 <span>을 사용하여 <button> 요소를 만들 수 있으며 <b>는 <a>가 될 수 있습니다. 이 기능은 페이지 스타일 또는 레이아웃 지정에 대한 몇 가지 바로 가기를 제공하지만 기본 제공 기능을 제거합니다. 화면 읽기 프로그램과 같은 도구에서는 <span>이 <a>로 사용되고 있음을 이해할 수 없습니다. 키보드로 탐색하는 사용자는 <button> 요소를 시뮬레이션하도록 프로그래밍 된 <div> 요소에 포커스를 설정할 수 없습니다.
자주 건너뛰는 또 다른 HTML 요소는 헤더(<h1>~<h6>)입니다. 시각적 관점에서 헤더 태그는 가장 큰 텍스트 크기에서 시작해서 가장 작은 텍스트 크기에서 끝납니다. 이 규칙은 많은 개발자가 헤더 요소를 사용하지 않고 대신 <div> 또는 기타 일반 요소를 스타일화하도록 합니다.
아쉽게도 스타일화된 일반 요소는 구조적 정보가 아닌 시각적 정보만 전달합니다. 화면 읽기 프로그램 사용자는 주로 제목을 사용하여 정보를 찾고 페이지를 탐색합니다. 화면 읽기 프로그램 사용자가 쉽게 탐색할 수 있는 사이트를 만들려면 설명 제목 콘텐츠를 작성하고 의미 체계 제목 태그를 사용하는 것이 중요합니다.
페이지에서 컨트롤을 만들 때 항상 적절한 HTML을 사용하는 것이 가장 좋습니다. 하이퍼링크를 원하는 경우 <a>를 사용하고, 단추를 원하는 경우 <button>을 사용합니다.
유효한 시각 신호 사용
개발자가 화면 읽기 프로그램을 유일한 접근성 도구로 생각하는 경우가 많습니다. 그러나 사용자는 다른 도구를 많이 사용하거나 도구를 전혀 사용하지 않을 수 있습니다. 브라우저 사용자는 특정 시각 신호를 사용하여 페이지와 상호 작용하는 방법을 이해합니다.
CSS의 훌륭한 기능 중 하나는 특정 표시 요소 제거를 포함하여 페이지 표시 방법을 완벽하게 제어할 수 있다는 것입니다. 예를 들어 텍스트 상자에서 윤곽선을 제거하거나 하이퍼링크에서 밑줄을 제거할 수 있습니다. 하지만 이러한 형식의 신호를 제거하면 해당 신호에 의존하는 사용자가 컨트롤 형식을 인식하기 더 어려워질 수 있습니다.
키보드 고려
마우스 또는 트랙패드/터치패드를 사용할 수 없는 사용자도 있습니다. 대신 이러한 사용자는 키보드 상호 작용을 사용하여 요소 간을 이동합니다. 키보드 사용자가 아래로 이동할 때 각 상호 작용 요소에 액세스할 수 있도록 페이지가 논리적 순서로 콘텐츠를 표시하는 것이 중요합니다.
사용자가 탭으로 페이지를 이동하면 HTML 원본에 컨트롤이 나열되는 순서에 따라 포커스가 컨트롤 간을 이동합니다. 페이지에 대한 컨트롤은 예상되는 페이지 탐색 순서로 HTML 원본에 나열되어야 하며 CSS를 사용하여 사용자에게 시각적으로 페이지를 배치해야 합니다.
예를 들어 2개의 열이 있는 양식을 만든다고 가정해봅니다. 양식을 작성하는 사용자를 위한 자연스러운 흐름을 고려한 다음, 해당 순서로 컨트롤을 나열할 수 있습니다. 그런 다음, CSS를 사용하여 열을 만들고 적절한 위치에 컨트롤을 표시할 수 있습니다.
키보드 탐색은 의미 체계 HTML에 크게 의존합니다. 단추와 같은 특정 컨트롤은 포커스를 받아들이지만 div 요소는 그렇지 않습니다. HTML에 이미 존재하는 컨트롤을 다시 만드는 경우 사용자가 키보드로 페이지를 사용하기 더 어려워집니다.
중요
키보드 탐색은 수동으로 테스트해야 하며 만드는 모든 페이지에서 이를 수행해야 합니다. WebAIM에는 키보드 탐색 전략에 대한 자세한 정보가 있습니다.