MacOS의 VoiceOver로 웹 사이트의 화면 판독기를 지원하기 시작합시다.

화면 판독기에서도 개발된 웹 응용 프로그램을 처리할 수 있도록 보이스 오버를 사용해 생각보다 간단하게 해보는 방법을 정리해 봤다.
이 글에는 맥OS 하이시라(10.13.6(17G65)를 전제로 보이스오버 작동법 등이 버전이 바뀌어도 크게 달라지지 않는다는 내용이 담겼다.
VoiceOver란
애플은 맥OS와 iOS에 탑재된 화면 판독기다.시각 장애자를 대상으로 화면에 배열된 것들이 소리를 낼 수 있다.

시각적 액세스 가능성 - MC-Apple(일본)

시각 보조 기능 아이폰 애플(일본)

VoiceOver는 MacOS에 내장되어 있기 때문에 Mac만 있으면 화면 판독기를 시도할 수 있습니다.
iOS에 대한 Voice Over를 시도하려면 다음 기사를 참조하십시오.
아이폰의 VoiceOver를 사용해 보세요.Qiita
보이스 오버를 시작하기 위해서 읽는 거.
VoiceOver 시작 설명서
나는 상술한 애플의 공식 안내서만 보았다.그냥 보이스 오버로 직접 만든 웹페이지를 시험해보고 싶다면 필요한 곳만 읽으면 충분하다.
어쨌든 두 개만 기억해주세요.

Voice Over를 유효/무효화하는 방법

VoiceOver 키

Voice Over 사용/사용 안 함
어쨌든 Voice Over를 유효하거나 무효화시키는 데 가장 중요한 방법은 기억입니다.
Voice Over-Voice Over 시작 설명서 열기/닫기
다음 중 하나를 사용합니다.

Commond+F5 순

터치 ID

를 Command 누르면서 빠르게 3번 누릅니다.

시리에게 "보이스 오버를 켜주세요

터치바가 달린 맥북 프로를 이용하면 F5 키를 누르기 어렵고, 개인적으로는 Command 키를 누르면서 터치 ID를 3회 빠르게 누르는 것이 가장 쉽다고 생각한다.
VoiceOver가 활성화되면 MacOS 작업에 많은 변화가 발생합니다.특히 터치바의 버튼이 한꺼번에 눌리지 않아 고통스러웠고, 예를 들어 Esc 버튼을 세 번 누르면 고통스러웠기 때문에 VoiceOver를 켜는 것은 화면 리더의 행동을 확인하고 싶을 때만 가능했다.
VoiceOver 키
VoiceOver를 사용하여 MacOS를 조작할 때 VoiceOver 키(VO 키)를 사용합니다.VoiceOver 키는 기본적으로 CapsLock이지만 Control+Option으로 변경할 수도 있습니다.시스템 환경 설정에서 보조 기능→Voice Over를 선택하여 Voice Over 유틸리티를 통해 변경합니다.

CapsLock을 Control 키로 변경한 경우 Control+Option으로 변경합니다.
또 맥북 프로에 사용되는 자체 제작 키보드(Ergo 42)를 연결하는 왼손 최하단에 Control+Option을 1키로 누를 수 있는 키가 설치됐고, 보이스 오버 작업에서 자주 사용하는 시프트와 스페이스도 배열이 변경됐다.이 세 개의 키와 오른손의 맨 아래에 배열된 화살표 키만 해당하는 조작을 할 수 있다.이 작은 지도는 GiitHub에 공개됩니다. .
Voice Over로 웹 페이지 읽어보기
VoiceOver를 시도하고 싶은 웹 페이지를 연 후 VoiceOver를 시작하십시오.보이스 오버는 맥OS에서 어떤 조작도 할 수 있지만 보이스 오버가 없으면 조작할 수 있는 사람이 보이스 오버로 모든 작업을 완성하려면 어렵다.
VoiceOver를 열면 검정색 창이 표시됩니다.VoiceOver에서 읽은 내용이 이 창에 표시됩니다.

갑자기 보이스 오버를 켜고 갑자기 다양한 것을 읽기 시작했는데 무엇을 해야 할지 몰라 웹페이지를 읽기 시작해 혼란스러웠다.
물론 고장이 나서 VoiceOver를 사용하는 사람은 여기서부터 낭독을 시작해서 키보드 조작으로만 웹 페이지를 읽어야 하지만 웹 개발자가 스크린 리더를 시도하고 싶을 때읽고 싶은 곳 주위를 먼저 드래그하거나 두 번 클릭한 다음 선택하는 것이 좋다.당신은 먼저 당신이 선택한 부분을 읽을 수 있습니다.1

거기서부터 보이스 오버를 누르면서 좌우 화살표를 누르면 앞을 읽을 수 있다.VoiceOver 키를 누르면서 좌우 키를 누르는 것이 VoiceOver의 기본적인 이동 방법이다.
VoiceOver 키를 누르면서 스페이스바를 누를 수 있는 링크 및 버튼 작업이 근처의 조작은 다 읽을 때까지 기다렸다가 조작 방법을 알려줄게요. "지금 링크에 있어요. 이 링크를 눌러야 해요...."기본적으로 조작법은 말을 할 줄 아는 거니까 진정하고 들으면 바로 조작할 수 있겠죠.

제목 및 랜드마크 이동
방금 마우스 포인터로 읽고 싶은 곳을 선택하는 방법을 소개했지만 실제 화면 리더의 사용자는 제목과 커서 요소를 사용하여 읽고 싶은 부분으로 이동한다.이쪽 방법도 소개해 주세요.
VoiceOver 키를 누르면서 U 키를 누르면 회전 메뉴가 표시됩니다.위아래 좌우의 화살표 키로 회전자를 조작할 수 있다.

로터 이동 사용 - VoiceOver 시작 설명서
만약에 웹 페이지에main 요소와nav 요소를 통해 지표를 설정하거나 h1 등 제목 요소를 사용했다면 이 룰렛을 사용하여 목적지로 이동할 수 있다.
끝말
Voice Over의 간단한 사용 방법에 대해 설명합니다.앞서 소개한 바와 같이 평소에 맥을 사용하는 사람들은 기본적으로 어떤 설정도 하지 않고 화면 리더를 시도할 수 있다.자신이 만든 웹페이지뿐만 아니라 다양한 웹페이지에서 시도해보면 의외의 방법으로 보조성을 고려했거나 평소 일반적으로 사용하는 웹페이지가 스크린 리더라면 전혀 사용할 수 없다는 것을 발견할 수 있다.Mac를 추천하는 사람은 꼭 해 보세요.
사파리, 크롬에서 완성됐지만 Firefox가 잘 못하는 것 같은데...  ↩