이것은 양식 접근성에 관해 진행 중인 소규모 시리즈의 세 번째 게시물입니다. 3번째 포스팅을 놓치셨다면 꼭 보세요 :focus-visible을 사용하여 사용자 포커스 관리. 이 게시물에서는 양식을 탐색할 때 스크린 리더를 사용하는 방법과 몇 가지 모범 사례를 살펴보겠습니다.

스크린 리더란 무엇입니까?

웹을 돌아다니다 보면 "스크린 리더"라는 용어를 들어보셨을 것입니다. 현재 구축 중인 경험에 대해 수동 접근성 테스트를 실행하기 위해 화면 판독기를 사용할 수도 있습니다. 화면 판독기는 일종의 AT 또는 보조 기술입니다.

화면 판독기는 디지털 텍스트를 점자 판독기에서 일반적으로 볼 수 있는 합성 음성 또는 점자 출력으로 변환합니다.

이 예에서는 Mac VO를 사용하겠습니다. Mac VO(VoiceOver)는 모든 Mac 장치에 내장되어 있습니다. iOS, iPadOS 및 macOS 시스템. macOS를 실행 중인 장치 유형에 따라 VO를 여는 방법이 다를 수 있습니다. 제가 이 글을 쓰고 있는 VO를 실행중인 맥북프로는 터치바가 없어서 하드웨어에 맞춰 단축키를 활용하겠습니다.

macOS에서 VO 회전

업데이트된 Macbook Pro를 사용하는 경우 컴퓨터의 키보드는 아래 이미지와 유사하게 보입니다.

당신은 cmd 키를 누른 다음 Touch ID를 빠르게 세 번 누릅니다.

TouchBar가 있는 MBP(MacBook Pro)를 사용하는 경우 바로가기를 사용합니다. cmd+fn+f5 VO를 켜세요. 데스크톱이나 노트북에서 기존 키보드를 사용하는 경우 키가 동일해야 합니다. 그렇지 않으면 접근성 설정에서 VO를 켜야 합니다. VO를 켜면 음성과 함께 이 대화 상자가 나타납니다. VO 소개.

"VoiceOver 사용" 버튼을 클릭하면 VO를 사용하여 웹 사이트와 앱을 테스트할 수 있습니다. 한 가지 명심해야 할 점은 VO가 Safari와 함께 사용하도록 최적화되어 있다는 것입니다. 즉, 스크린 리더 테스트를 실행할 때 Safari가 사용 중인 브라우저인지 확인하세요. 이는 아이폰과 아이패드에도 마찬가지다.

처음부터 VO를 사용할 수 있는 두 가지 주요 방법이 있습니다. 제가 개인적으로 사용하는 방법은 웹사이트로 이동하여 다음과 같은 기능을 조합하여 사용하는 것입니다. tab, control, option, shift 및 화살표 키만 사용하면 효율적으로 환경을 탐색할 수 있습니다.

경험을 탐색하는 또 다른 일반적인 방법은 VoiceOver 로터. 로터는 경험에서 원하는 위치로 직접 이동하도록 설계된 기능입니다. 로터를 사용하면 전체 사이트를 탐색할 필요가 없으며 이를 "자신만의 모험 선택"이라고 생각하면 됩니다.

조합 키

수정자 키는 VO의 다양한 기능을 사용하는 방법입니다. 기본 수정자 키 또는 VO is control + option 하지만 Caps Lock으로 변경하거나 두 옵션을 모두 선택하여 교대로 사용할 수 있습니다.

로터 사용

로터를 사용하려면 수정자 키와 문자 "U"를 조합하여 사용해야 합니다. 나에게 있어 수정자 키는 다음과 같습니다. caps lock. 나는 누른다 caps lock + U 그리고 로터가 나를 위해 회전합니다. 로터가 나타나면 왼쪽 및 오른쪽 화살표를 사용하여 원하는 경험 부분으로 이동할 수 있습니다.

제목 수준별 탐색

경험을 탐색하는 또 다른 깔끔한 방법은 제목 수준을 이용하는 것입니다. 수정자 키 + cmd + H 제목 수준을 기준으로 문서 구조를 탐색할 수 있습니다. 을 눌러 문서를 뒤로 이동할 수도 있습니다. shift 이렇게 순서대로 수정자 키 + shift + cmd + H.

역사 및 모범 사례

양식은 HTML의 가장 강력한 기본 요소 중 하나입니다. 페이지에서 무언가를 검색하든, 무언가를 구매하기 위해 양식을 제출하든, 설문조사를 제출하든 상관없습니다. 양식은 웹의 초석이며 우리 경험에 상호작용성을 도입하는 촉매제였습니다.

웹 양식의 역사는 1995년 XNUMX월에 도입된 것으로 거슬러 올라갑니다. HTML 2.0 사양. 어떤 사람들은 웹이 좋았던 시대라고 말하는데, 적어도 나는 그렇게 말합니다. Stephanie Stimac은 다음에 대한 멋진 기사를 썼습니다. 스매싱 매거진 제목이 "선택 및 그 이상 표준화: 기본 HTML 양식 컨트롤의 과거, 현재 및 미래".

다음은 웹용 액세스 가능한 양식을 작성할 때 따라야 할 5가지 모범 사례입니다.

1. 양식 요소를 사용하고 있는지 확인하십시오. 양식은 기본적으로 액세스 가능하며 항상 div 위에 사용해야 합니다.

<form>
  <!-- Form controls are nested here. -->
</form>

2. 반드시 for 와 id 속성 label'모래 input’로 연결되어 있습니다. 이렇게 하면 레이블을 클릭/탭하면 초점이 입력으로 이동하고 입력을 시작할 수 있습니다.

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

3. 양식을 완성하기 위해 필드가 필요한 경우 필수 속성과 aria-required 속성을 사용하세요. 이로 인해 양식 제출이 제한됩니다. aria-required 속성은 해당 필드가 필수임을 보조 기술에 명시적으로 알려줍니다..

<input type="text" id="name" name="name" required aria-required/>

4. 사용, :focus, :focus-within 와 :focus-visible 사용자가 포커스를 받는 방법을 관리하고 맞춤설정하는 CSS 가상 클래스입니다.

form:focus-within {
 background-color: #cfffcf;
}

input:focus-within {
 border: 10px solid #000000;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 2px solid crimson;
 border-radius: 3px;
}

5. A button 양식 제출과 같은 작업을 호출하는 데 사용됩니다. 그걸 써! 다음을 사용하여 버튼을 만들지 마십시오. div'에스. ㅏ div 정의상 구분선입니다. 고유한 접근성 속성이 없습니다.

Rescale과 함께 비즈니스를 가속화하는 방법에 대해 알아보세요.

코드를 확인하려면 VoiceOver 데모 GitHub 리포지토리. 선택한 스크린 리더를 사용하여 위의 데모를 시험해 보려면 다음을 확인하세요. VoiceOver를 사용하여 웹 양식 탐색.

스크린 리더 소프트웨어

다음은 해당 운영 체제에서 사용할 수 있는 다양한 유형의 화면 판독기 소프트웨어 목록입니다. Mac을 선택하지 않는 경우 Windows, Linux는 물론 Android 장치에도 사용할 수 있는 옵션이 있습니다.

NVDA

NVDA는 NV Access의 스크린 리더입니다. 현재는 Microsoft Windows 7 SP1 이상을 실행하는 PC에서만 지원됩니다. 더 많은 액세스를 원하시면 다음을 확인하세요. NV Access 웹사이트의 NVDA 버전 2024.1 다운로드 페이지!

입 부분

위의 참조 내용을 이해했다면 좋은 회사에 있는 것입니다. JAWS 웹사이트에 따르면 간단히 말해서 다음과 같습니다.

JAWS를 직접 확인해 보세요 해당 솔루션이 귀하의 요구 사항에 적합하다면 꼭 시도해 보세요!

이야기하는 사람

내레이터는 WIndows 11과 함께 제공되는 내장 화면 판독기 솔루션입니다. 이를 화면 판독기로 사용하기로 선택한 경우 아래 링크는 사용법에 대한 지원 문서입니다.

내레이터에 대한 완전한 가이드

오카

Orca는 GNOME을 실행하는 다양한 Linux 배포판에서 사용할 수 있는 화면 판독기입니다.

TalkBack에

Google TalkBack은 Android 기기에서 사용되는 스크린 리더입니다. 전원을 켜고 사용하는 방법에 대한 자세한 내용은 Android 접근성 지원 사이트에서 이 기사를 확인하세요..

브라우저 지원

HTML 요소와 ARIA(Accessible Rich Internet Application) 속성에 대한 실제 브라우저 지원을 찾고 있다면 다음을 제안합니다. HTML용 caniuse.com 와 ARIA에 대한 접근성 지원 브라우저 지원에 관한 최신 4-1-1을 얻으세요. 브라우저가 해당 기술을 지원하지 않으면 스크린 리더도 지원하지 않을 가능성이 높습니다.

디지털A11Y 기사를 통해 브라우저 및 스크린 리더 정보를 요약하는 데 도움이 될 수 있습니다.  스크린 리더와 브라우저! 접근성 테스트에 가장 적합한 조합은 무엇입니까?

링크

https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac

https://www.w3.org/TR/wai-aria/

https://www.w3.org/WAI/standards-guidelines/aria/

https://support.google.com/accessibility/android/answer/6283677?hl=en

https://support.google.com/accessibility/android/answer/6283677?hl=en

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• PlatoData.Network 수직 생성 Ai. 자신에게 권한을 부여하십시오. 여기에서 액세스하십시오.
• PlatoAiStream. 웹3 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 플라톤ESG. 탄소, 클린테크, 에너지, 환경, 태양광, 폐기물 관리. 여기에서 액세스하십시오.
• PlatoHealth. 생명 공학 및 임상 시험 인텔리전스. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/