화면 읽기 프로그램 접근성 문제 발견 및 해결
"접근성 및 화면 읽기 프로그램" 단원에서 화면 읽기 프로그램에 대해 간략하게 설명했습니다. 화면 읽기 프로그램은 이름 그대로 사용자에게 화면을 읽어줍니다. 또한 웹 애플리케이션 및 복잡한 콘텐츠를 탐색하고 상호 작용하기 위한 가청 신호, 컨텍스트 및 컨트롤을 제공합니다.
화면 읽기 프로그램 옵션
Windows에는 내레이터가 기본적으로 포함되어 있습니다. JAWS 및 NVDA(비 Visual Desktop Access) 도 Windows에 설치할 수 있습니다. macOS와 iOS에는 VoiceOver가 기본적으로 설치되어 있습니다.
다음 연습에서는 운영 체제에서 제공하는 화면 읽기 프로그램을 사용하도록 설정하고 이를 사용하여 피자 웹 사이트와 상호 작용합니다.
화면 읽기 프로그램을 위한 접근성 있는 콘텐츠 만들기
최신 웹 애플리케이션은 텍스트로 채워진 간단한 페이지가 아닙니다. 최소한 탐색, 제목 및 이미지도 포함됩니다. 여기에는 대화형 양식, 등록 및 로그인, 검색 기능, 구조화된 데이터 테이블 등이 있습니다.
콘텐츠의 구조가 올바르다면 사용자는 화면 읽기 프로그램을 통해 복잡한 콘텐츠를 탐색하고 상호 작용할 수 있습니다. 올바른 구조를 만들려면 브라우저에서 보기 좋게 만드는 것이 아니라 웹 표준을 준수해야 합니다.
페이지 구조
시각적으로 디자인하는 경우 모든 위치에서 <div>를 사용하는 것이 괜찮을 수 있습니다. <div> 요소는 CSS를 통해 무언가처럼 보이도록 스타일을 지정할 수 있으며, 부트스트랩은 <div> 요소의 자유로운 사용을 방해하지 않습니다.
하지만 되도록이면 구조적 HTML 요소를 사용하면 화면 읽기 프로그램에 더 많은 의미 체계 정보와 컨텍스트를 제공할 수 있습니다. 구조적 HTML 요소는 다음과 같습니다.
<header>: 로고, 탐색, 검색 및 로그인을 포함하여 페이지 맨 위에 일반적으로 표시되는 콘텐츠입니다.<nav>: 탐색 링크가 있는 페이지의 일부를 나타냅니다.<main>: 이름에서 알 수 있듯이 이 태그는 페이지의 주요 콘텐츠를 나타냅니다.<article>: 머리글이 있는 개별 아티클로, 일반적으로 목록에 표시됩니다.<aside>: 사이드바 또는 설명선과 같은 페이지의 추가 정보입니다.<footer>: 일반적으로 저작권 정보 및 개인 정보 취급 방침을 포함하는 페이지의 맨 아래에 있는 정보입니다.<section>: 이전 그룹 중 하나에 맞지 않는 콘텐츠 블록을 나타냅니다.
이 모든 항목은 <div> 요소와 동일하게 스타일을 지정할 수 있습니다. 이렇게 하면 태그만 바꾸면 됩니다. 기본 ASP.NET Core 레이아웃 페이지(/Pages/Shared/_Layout.cshtml에 있음)는 header, nav, main 및 footer를 포함하여 여러 요소를 사용합니다.
제목 요소
HTML <h1> - <h6> 요소는 콘텐츠 제목을 표시합니다. <h1>은 페이지 제목에 대해 예약된 가장 높은 수준이며, 페이지당 한 번만 사용해야 합니다. 이후 <h1> 수준은 중요도 순으로 중첩됩니다.
피자 재료에 대한 자세한 정보가 있는 웹 사이트의 페이지를 상상해 보세요. 다음과 같은 제목을 사용할 수 있습니다.
- Margherita Pizza Ingredients (h1)
- Dough (h2)
- Flour (h3)
- Yeast (h3)
- Salt (h3)
- Sugar (h3)
- Sauce (h2)
- Toppings (h2)
- Mozzarella (h3)
- Basil (h3)
- etc.
다음 연습에서 볼 수 있듯이 일반적인 실수는 실제 제목 요소를 사용하는 대신 텍스트 스타일을 사용하여 제목을 나타내는 것입니다. 화면 읽기 프로그램은 이러한 의사 제목을 볼 수 없습니다. 화면 읽기 프로그램에 대한 탐색을 제공하려면 실제 제목 요소를 사용해야 합니다.
탭 순서
대부분의 사용자는 키보드를 사용하여 애플리케이션을 통해 이동하고 탭 순서에 의존합니다. 다행히 HTML 페이지에서 탭 순서를 실수로 망치는 것은 불가능하지는 않지만 어렵습니다. 그렇다 하더라도 FastPass를 사용하여 탭 순서를 확인해야 합니다. 키보드로만 애플리케이션을 탐색하여 사용자 환경을 이해하는 연습을 하세요.
이미지 및 대체 텍스트
우리는 웹 페이지에서 이미지를 여러 가지 방법으로 사용합니다. 어떤 이미지는 콘텐츠에 중요하고, 어떤 이미지는 장식용입니다. 이 정보를 화면 읽기 프로그램에 제공하려면 모든 이미지에 alt 특성이 있어야 합니다.
이미지가 콘텐츠의 중요한 부분인 경우 alt 특성에 간단한 설명이 포함되어야 합니다. 휴대폰을 통해 사용자에게 웹 페이지에 대해 설명할 때, 뭐라고 하시겠습니까?
<img src="/img/mozzarella.png" alt="A close-up picture of a fresh baked mozzarella pizza">
이미지가 장식용인 경우 다음과 같이 빈 설명을 포함합니다.
<img src="/img/divider.png" alt="">