참고: https://www.codecademy.com/article/accessibility-and-html
시각 장애가 있는 대부분의 사용자는 screen reader를 사용하여 인터넷을 사용합니다. 이 포스트에서는 시각 장애가 있는 사용자가 콘텐츠에 접근할 수 있도록 하는 다양한 방법에 대해 알아보겠습니다.
들어가며
웹 페이지는 모든 사용자가 접근할 수 있도록 디자인해야 합니다. 특히, 웹 페이지의 시각적/동적인 특성이 시각 장애가 있는 사용자에게도 의미가 있는지 확인해야합니다.
대부분의 시각 장애인 또는 맹인 사용자는 screen reader의 도움으로 웹 페이지에 접근합니다. 스크린 리더는 웹 페이지의 HTML을 분석하여 콘텐츠를 큰 소리로 읽어주고 사용자의 명령에 따라 페이지를 탐색하고 링크 클릭, 입력 필드 입력, 양식 제출과 같은 작업을 수행해줍니다. 이 포스트에서는 웹 페이지의 접근성을 높이고 스크린 리더가 더 잘 해석할 수 있도록 몇 가지 방법을 제공하겠습니다.
Alt text
스크린 리더가 페이지의 요소를 더 쉽게 이해하게하는 한 가지 방법은 이미지에 대한 alt 텍스트를 제공하는 것입니다. 스크린 리더에 이미지를 설명하기 위해 <img> 태그의 속성으로 alt 텍스트를 추가합니다. 예를 들면:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page!</title>
</head>
<body>
<img alt="A brown bear" src="https://images.pexels.com/photos/35435/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" width="300" />
</body>
</html>
screen reader는 단순히 페이지에 이미지가 존재한다고 알리지 않고 이미지에 대한 설명("A brown bear")을 사용자에게 크게 읽어줍니다. 웹 접근성을 높이려면 alt 텍스트로 웹 페이지의 각 이미지에 대해 간단한 설명을 제공해야 합니다.
Semantic tags
웹 페이지에서 문자열의 스타일 지정 시 다음의 태그를 본적이 있을 것 입니다:
<b> vs <strong>, <i> vs <em>
<b> 태그를 <strong>으로 바꿔도 페이지의 모양은 전혀 변화가 없다는 것을 확인할 수 있습니다. <b> 및 <strong> 태그는 텍스트를 굵게 표시하고 <i> 및 <em> 태그는 텍스트를 이탤릭체로 표시합니다. 각각의 쌍이 화면에 보여지는 기능은 같지만 웹 접근성과 관련해서는 근본적인 차이가 있습니다.
<b>와 <i> 요소는 각각 굵게 표시, 이탤릭 표시로 단순히 텍스트가 화면에 어떻게 보일지에 대한 태그입니다.
그러나 <strong>과 <em>은 텍스트를 이해하는 방법을 나타내며 동일한 시각적 효과를 보이지만 스크린 리더가 텍스트를 해석하는 방법에 영향을 미칩니다. 이러한 태그를 시맨틱 태그라고 합니다.
따라서 <strong>, <em>은 <b>, <i>와 시각적으로 유사한 텍스트를 생성하지만 스크린 리더에게는 시각적으로 강조 표시된 부분을 소리로서 사용자에게 전달하게됩니다.
ARIA
WAI-ARIA 라고도 하는 ARIA는 Accessible Rich Internet Applications의 약자입니다. ARIA는 요소에 추가할 수 있는 다양한 마크업 확장(일반적으로 HTML5 속성)을 정의하여 스크린 리더에게 요소에 대한 자세한 정보를 제공하고 시각 장애가 있는 사용자가 웹 페이지에서 일어나는 일을 더 잘 파악할 수 있도록 도와줍니다.
예를 들어 ARIA의 유용한 속성 중 하나는 role 속성입니다. 이를 요소에 추가하면 스크린 리더에게 페이지 컨텍스트에서 해당 요소의 기능이 무엇인지에 대한 추가 컨텍스트를 제공합니다. 예를 들어 다음 HTML 코드를 사람이 본다면 쉽게 메뉴로 인식할 수 있습니다.
<nav>
<ul>
<li>Put navigation here</li>
</ul>
</nav>하지만 스크린 리더가 이해하기에는 그리 간단한 작업이 아닙니다. 이를 해결하려면 role 속성에 navigation이라는 값을 추가하면 됩니다:
<nav role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</nav>이제 스크린 리더는 이게 메뉴라는 것을 알게 되고 그에 따라 사용자에게 옵션을 제공합니다.
사용자에게 form 및 체크박스의 상태를 알려주고 JavaScript에 의해 방금 변경된 페이지의 요소를 알려주는 것 같이 많은 ARIA 속성이 있습니다. 이 포스트에서는 ARIA와 관련된 모든 내용을 다루지는 않겠습니다. 세부사항이 궁금하면 ARIA spec을 확인하기 바랍니다.
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 실행 시간 계산 (console.time) (7) | 2023.05.12 |
|---|---|
| [javascript] 자바스크립트 파일 업로드 (form post) (7) | 2023.05.12 |
| [javascript] 자바스크립트 getBoundingClientRect (size, position) (6) | 2023.05.10 |
| [javascript] 자바스크립트 요소 삽입 insertBefore (18) | 2023.05.09 |
| [javascript] 자바스크립트 배열 정렬 (array sort) (5) | 2023.05.04 |
댓글