모든 사람의 요구에 맞는 사이트로 더 많은 독자를 끌어들이십시오.
장애가있는 사용자가 귀하의 웹 사이트에 액세스 할 수있게함으로써 모든 사람이 접근 할 수있게됩니다. 실제로 웹 사이트를 더욱 쉽게 이용할 수있게되면 사람들이 검색 엔진에서 내 웹 사이트를 찾도록 도울 수 있습니다. 왜? 검색 엔진은 독자가 웹 사이트의 콘텐츠를 찾고 이해하기 위해 사용하는 것과 매우 유사한 신호를 사용하기 때문에
그러나 정확히 어떻게 코딩 전문가가되지 않고도 접근 가능한 웹 사이트를 만들 수 있습니까?
다음은 기본적인 HTML 지식을 가진 거의 모든 사람들이 웹 사이트의 접근성을 향상시키는 데 사용할 수있는 몇 가지 팁과 요령입니다.
웹 접근성 도구
W3C는 웹 접근성 도구 목록을 제공하여 웹 사이트의 잠재적 문제를 파악할 수있는 검사기로 사용할 수 있습니다. 즉, 여전히 스크린 리더로 탐색하고 직접 체험 해 보는 것이 좋습니다.
관련 읽기 : 보조 기술이란 무엇이며 어떻게 작동합니까?
스크린 리더 이해하기
웹 사이트의 접근성을 향상시킬 수있는 가장 중요한 방법 중 하나는 스크린 리더가 웹 사이트를 이해할 수 있는지 확인하는 것입니다. 화면 판독기는 합성 음성을 사용하여 화면의 텍스트를 읽습니다. 그것은 꽤 간단하게 들린다. 그러나 스크린 리더는 귀하가 현재 설정 한 방식대로 귀하의 웹 사이트를 이해하지 못할 수도 있습니다.
가장 먼저 할 일은 스크린 리더를 시험해보고 화면 판독기를 보는 것입니다. Mac 사용자는 VoiceOver를 사용해보십시오.
- 시스템 환경 설정으로 이동하십시오 .
- 접근성을 선택하십시오 .
- VoiceOver를 선택하십시오 .
- VoiceOver 활성화 확인란 을 선택하십시오.
명령 -F5를 사용하여이 기능을 켜고 끌 수 있습니다.
Windows 컴퓨터를 사용하는 경우 NVDA를 다운로드 할 수 있습니다. 단축키 컨트롤 + alt + n을 사용하여 토글을 켜고 끌 수 있도록 설정할 수 있습니다.
두 화면 판독기는 사용자가 키보드로 탐색하도록하여 작동합니다 (마우스를 사용하면 볼 수없는 경우 마우스를 사용하는 것이 좋습니다) 탐색을위한 초점 영역을 만들어 이해합니다. 포커스는 본질적으로 키보드가 "가리키고"있는 곳이지만 대개 커서 대신 포커스 객체 주위에 강조 표시된 상자로 표시됩니다.
기본 설정이 성가신 경우 음성 피치와 음성 속도를 모두 변경할 수 있습니다 (표준 느린 음성 읽기를 듣고 약 5 분이 지나면 대개 음성이 들립니다). 맹인은 일반적으로 화면 판독기가 고속으로 설정된 웹 사이트를 읽습니다.
이렇게 할 때 눈을 감는 데 도움이 될 수 있지만, 계속 열어 놓고 비교하는 것도 도움이 될 수 있습니다. 웹 사이트를 청취 할 때 즉시 알아 차릴 수있는 것들 중 일부는 텍스트의 일부가 잘못되었을 수 있다는 것입니다. 제목과 표가 뒤죽박죽이 될 수 있습니다. 이미지는 건너 뛸 수도 있고 "이미지"또는 똑같이 도움이되지 않는 것을 말할 수도 있습니다. 테이블은 문맥이없는 일련의 항목으로 읽히는 경향이 있습니다.
이 문제를 해결할 수 있습니다.
대체 태그 또는 대체 속성
alt 태그 또는 대체 (alt) 속성은 HTML에서 이미지를 설명하는 데 사용됩니다. HTML에서는 다음과 같이 보입니다.
HTML 코드가 숨겨진 시각적 도구로 웹 사이트를 만들더라도 거의 항상 이미지 설명을 입력 할 수 있습니다. 아무 것도 입력 할 수 없지만 (alt = ""), 각 이미지에 유용한 설명을 제공하는 것이 좋습니다. 당신이 장님이라면 이미지에 대해 무엇을 알아야할까요? "여성"은 그다지 도움이되지 않지만 어쩌면 "접근성, 유용성, 브랜딩 및 디자인을 포함한 여성 그리기 디자인 흐름도"일 수 있습니다.
제목 텍스트
웹 사이트는 항상 HTML 제목 태그를 표시하지는 않지만 화면 판독기에 유용합니다. 웹 사이트의 각 페이지에 방문자에게 페이지의 내용을 알려주는 설명이있는 제목 (지나치게 자세한 내용은 아님)이 있는지 확인하십시오.
웹 사이트에 좋은 정보 계층 구조 부여
헤더가있는 큰 텍스트 청크를 분해하고 가능 하면 H1, H2, H3 계층 구조를 가진 헤더를 적절하게 사용하십시오. 스크린 리더를 위해 웹 사이트를보다 쉽게 만들뿐만 아니라 다른 사람들에게도 더 쉽게 웹 사이트를 제공합니다. 또한 Google 및 기타 검색 엔진이 귀하의 웹 사이트 색인을 개선하는 데 도움이되는 훌륭한 신호입니다.
마찬가지로 웹 사이트가 논리적 인 콘텐츠 순서에 있고 관련없는 정보 상자가 나타나지 않는지 확인해야합니다. 광고를 사용하는 경우 광고가 지나치게 개입되지 않아 웹 사이트의 텍스트가 너무 자주 분리되지 않는지주의하십시오.
더 나은 테이블 만들기
HTML 표를 사용하는 경우 굵은 텍스트로 표 제목을 지정하는 대신 화면 판독기에서 쉽게 이해할 수 있도록 태그를 사용하여 표에 표제를 추가 할 수 있습니다. "범위"요소를 추가하고 표에 새 행과 열을 명확하게 레이블을 지정하여 화면 판독기가 아무런 문맥도 제공하지 않고 일련의 표 셀을 덜컥 거리지 않도록 할 수 있습니다.
키보드 탐색
일반적으로 웹 사이트에 넣은 것은 키보드 만 사용하여 다른 사람이 생각할 수있는 것이어야합니다. 즉, 화면 판독기에서 탐색 버튼을 사용할 수없는 경우 탐색 버튼이 애니메이션 드롭 다운 버튼이 아니어야합니다 (잘 모르겠는지 확인하십시오. 일부 버튼은 키보드 사용을 위해 프로그래밍되어 있습니다).
자막
웹 사이트에 비디오 또는 오디오 요소를 추가하면 캡션이 있어야합니다. HTML5 및 YouTube와 같은 많은 동영상 스트리밍 서비스는 자막 지원을 제공합니다. 자막은 액세스 가능성뿐 아니라 사무실이나 시끄러운 장소에서와 같이 오디오를 재생할 수없는 웹 사이트를 탐색 할 수있는 사용자에게 유용합니다.
팟 캐스트 또는 기타 오디오 요소의 경우 텍스트 사본을 제공하는 것이 좋습니다. 오디오를들을 수없는 사람들에게 유용 할뿐만 아니라 텍스트를 가지고 있으면 Google 및 다른 검색 엔진이 해당 콘텐츠를 쉽게 색인하고 Google 순위를 올릴 수 있습니다 .
아리아
고급 수준의 접근성을 원한다면 HTML5 ARIA 또는 WAI-ARIA 사양이 앞으로 새로운 표준이되는 것을 목표로합니다. 그러나 이것은 복잡한 (진화하는) 기술 매뉴얼이므로 ARIA 유효성 검사기를 사용하여 웹 사이트에서 해결할 수있는 문제가 있는지 검사하십시오. 모질라는 ARIA를 시작하는 데 더 친숙한 가이드를 가지고 있습니다.