스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례

이것은 액세스 가능한 웹 양식에 대한 시리즈의 세 번째 할부입니다. 이전 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. 이 기사는 양식 내에서 스크린 리더 내비게이션을 탐색하고 액세스 가능한 양식 설계를위한 모범 사례를 개요합니다.

편집자 주 : 이 게시물은 현재 모범 사례를 반영하도록 업데이트되었으며 추가 코드 예제가 포함되어 있습니다. 당신의 의견은 환영합니다!

화면 독자 이해

스크린 리더는 디지털 텍스트를 오디오 또는 점자로 변환하는 AT (Assistive Technologies)입니다. 시각 장애인을위한 필수 도구입니다. 이 안내서는 Apple 장치의 내장 스크린 리더 인 Mac VO (VoiceOver)를 예로 사용합니다. VO를 활성화하고 사용하는 특정 방법은 장치에 따라 약간 다를 수 있습니다. macOS에서 음성을 활성화

최신 MacBook Pro에서 명령 키를 유지하고 터치 ID를 세 번 빠르게 누르면 VO를 활성화하십시오. 구형 MacBook Pro (터치 바와 함께)는 바로 가기 CMD FN F5를 사용합니다. 기존 키보드의 경우 동등한 단축키를 사용하거나 접근성 설정을 통해 VO를 활성화하십시오. 활성화되면 VO는 입문 메시지를 제공합니다 탭, 컨트롤, 옵션, 시프트 및 화살표 키 조합을 사용하여 탐색하거나보다 직접 탐색을 위해 음성 로터를 사용 할 수 있습니다. VoiceOver의 수정 자 키 기본 음성 오버 수정 자 키는 제어 옵션이지만 캡 잠금 장치 또는 두 가지 조합에 맞게 사용자 정의 할 수 있습니다. 음성 로터를 사용하여

수정 자 키 "U"(예 : 캡 잠금 U)를 사용하여 로터를 활성화하십시오. 왼쪽 및 오른쪽 화살표 키를 사용하여 다른 옵션을 탐색하십시오.

제목 수준으로 탐색

수정 자 키를 사용하여 헤딩 레벨로 탐색 CMD H. 수정 자 키 사용 CMD H를 사용하여 문서 구조를 다시 이동하십시오. 웹 양식의 접근성 모범 사례 웹 양식은 웹 상호 작용의 기본입니다. 액세스 가능한 양식을 작성하기위한 모범 사례는 다음과 같습니다

명시 적 대 암시 적 레이블 :
1. 암시 적 라벨링 ( 속성을 ​​링크 레이블 및 입력에 사용)은 허용되는 반면, 명시 적 라벨링 ()은 일반적으로 선명도에 선호됩니다. . for <label>...</label> 필수 필드 :
필수 필드에

속성을 ​​사용하십시오. 모든 사용자에게 필요한 필드를 나타내는 시각적 큐 (예 : 별표)를 항상 제공합니다.

<label for="name">Name:</label> <input type="text" id="name">

2. 기본 HTML 버튼 사용 : 항상 폼 제출에 요소를 사용하십시오. 버튼으로 스타일링 된 DIV 사용을 피하십시오 required
데모 및 리소스

코드 예제는 음성 데모 github repo Email (required):* 를 방문하십시오. VoiceOver를 사용하는 라이브 데모는

에서 VoiceOver
3. 를 사용하여 웹 양식을 탐색 할 수 있습니다. 스크린 리더 소프트웨어 옵션 <button></button>
nvda : Windows 용 무료 및 오픈 소스 화면 리더 jaws :

Windows의 인기있는 상업용 화면 리더 해설자 : Windows 11의 내장 스크린 리더 ORCA :

GNOME 기반 Linux 분포의 스크린 리더 토크백 : 안드로이드의 내장 스크린 리더

브라우저 및 스크린 리더 호환성

HTML 요소 및 ARIA 속성에 대한 브라우저 지원에 대한 정보는 Caniuse.com 및 Aria의 접근성 지원 설명서를 참조하십시오. 스크린 리더 호환성은 브라우저 지원에 따라 다릅니다. DigitalA11y의 기사, "스크린 리더 및 브라우저! 접근성 테스트를위한 가장 좋은 조합은 무엇입니까?" 유용한 통찰력을 제공합니다. 감사의 말 Adrian Roselli, Karl Groves, Todd Libby, Scott O'Hara, Kev Bonnett 등의 기여에 감사드립니다. 추가 읽기

Apple Voiceover Support

Wai-Aria 저작 관행

• html 의 Wai-Aria Google 토크백 지원
• 화면 판독기 상호 작용 모드 이해 필수 속성 요구 사항

위 내용은 스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!