HTML의 접근성 기본 사항 알아보기
접근성을 염두에 두고 HTML을 디자인하는 것이 중요합니다.
HTML에 액세스 할 수 있다는 것은 장애가 있는 사람들이 웹을 사용할 수 있음을 의미합니다. 완전히 맹인이거나 시각 장애가 있는 사용자, 청력 상실 문제가 있는 사람 및 기타 여러 가지 장애가 있습니다.
불행히도 이 주제는 필요한 중요성을 갖지 않으며 다른 것만큼 멋지지는 않습니다.
한 사람이 내 페이지를 볼 수 없지만 여전히 콘텐츠를 소비하고 싶다면 어떻게 해야 합니까?
첫째, 그들은 어떻게 합니까?
마우스를 사용할 수 없고 스크린 리더라고 하는 것을 사용합니다. 당신은 그것을 상상할 필요가 없습니다. 지금 시도해보십시오.
Google은 무료 ChromeVox Chrome 확장 프로그램을 제공합니다.
접근성은 도구가 요소를 쉽게 선택하거나 페이지를 탐색 할 수 있도록주의해야합니다.
웹 페이지와 웹 앱은 항상 첫 번째 목표 중 하나로서 접근성을 기반으로 구축되지는 않았으며 버전 1은 공개되지 않았지만 사실 후에 웹 페이지에 액세스 할 수 있게 만들 수 있습니다. 조만간 더 나아지지만 결코 늦지 않았습니다.
중요하며 우리나라에서는 정부 또는 기타 공공 기관에서 제작 한 웹 사이트에 액세스 할 수 있어야 합니다.
HTML에 액세스 할 수 있게 한다는 것은 무엇을 의미합니까? 생각해야 할 주요 사항을 설명하겠습니다.
참고 : 색상, 대비 및 글꼴과 같은 CSS 주제에서 다루어야 할 몇 가지 다른 사항이 있습니다. 또는 SVG 이미지에 액세스 할 수 있는 방법. 나는 그들에 대해 이야기하지 않습니다.
시맨틱 HTML 사용
시맨틱 HTML은 매우 중요하며 처리해야 할 주요 요소 중 하나 입니다. 몇 가지 일반적인 시나리오를 설명하겠습니다.
제목 태그에 올바른 구조를 사용해야 합니다. 가장 중요한 것은 h1이며 덜 중요한 것에는 더 높은 숫자를 사용하지만 동일한 수준의 제목은 모두 같은 의미를 가져야 합니다 (트리 구조처럼 생각해야 함).
h1
h2
h3
h2
h2
h3
h4b와 i 대신 strong과 em을 사용하십시오. 시각적으로 동일하게 보이지만 처음 2 개는 더 관련성이 있습니다. b와 i는 더 시각적인 요소입니다.
목록이 중요합니다. 화면 판독기는 목록을 감지하고 개요를 제공 한 다음 사용자가 목록에 들어가도록 선택할 수 있습니다.
테이블에는 내용을 설명하는 캡션 태그가 있어야 합니다.
<table>
<caption>Dogs age</caption>
<tr>
<th>Dog</th>
<th>Age</th>
</tr>
<tr>
<td>Roger</td>
<td>7</td>
</tr>
</table>이미지에 대체 속성 사용
모든 이미지에는 이미지 내용을 설명하는 alt 태그가 있어야 합니다. 이는 좋은 습관일 뿐만 아니라 HTML 표준과 HTML이 요구하지 않는 한 유효하지 않습니다.
<img src="dog.png" alt="picture of my dog">검색 엔진에 대한 인센티브가 있다면 검색 엔진에도 좋습니다.
role 속성 사용
role 속성을 사용하면 페이지의 다양한 요소에 특정 역할을 지정할 수 있습니다.
보완, 목록, 목록 항목, 기본, 탐색, 지역, 탭, 경고, 응용 프로그램, 기사, 배너, 버튼, 셀, 확인란, 컨텐츠 정보, 대화 상자, 문서, 피드, 그림, 양식, 그리드, gridcell, 제목, img, 목록 상자, 행, 행 그룹, 검색, 스위치, 테이블, tabpanel, 텍스트 상자, 타이머.
많은 정보를 제공하고 있으며 각 MDN 링크를 제공합니다. 그러나 페이지의 모든 요소에 role을 할당 할 필요는 없습니다. 대부분의 경우 화면 판독기는 HTML 태그에서 유추 할 수 있습니다. 예를 들어 nav, button, form과 같은 의미 태그에 역할 태그를 추가 할 필요가 없습니다.
nav 태그 예제를 살펴 보겠습니다. 이를 사용하여 다음과 같이 페이지 탐색을 정의 할 수 있습니다.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>nav 대신 div 태그를 사용해야 하는 경우 탐색 role을 사용합니다.
<div role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>여기 실제적인 예가 있습니다 : role이 태그가 이미 의미를 전달하지 않을 때 의미 있는 값을 할당하는 데 사용됩니다.
tabindex 속성 사용
tabindex 속성을 사용하면 Tab 키를 눌러 "선택 가능"요소를 선택하는 방법의 순서를 변경할 수 있습니다. 기본적으로 링크와 양식 요소 만 Tab 키를 사용하여 탐색하여 "선택 가능"합니다 (그리고 tabindex를 설정할 필요가 없습니다).
tabindex = "0"을 추가하면 요소를 선택할 수 있습니다.
<div tabindex="0">
...
</div>대신 tabindex = "-1"을 사용하면 이 탭 기반 탐색에서 요소가 제거되므로 매우 유용 할 수 있습니다.
aria 속성 사용
ARIA는 Accessible Rich Internet Applications를 의미하며 요소에 적용 할 수 있는 의미를 정의하는 약어입니다.
aria-label
이 속성은 요소를 설명하는 문자열을 추가하는 데 사용됩니다.
예:
<p aria-label="The description of the product">...</p>자리 표시자 속성이 있기 때문에 명시적인 레이블 없이 검색 할 수 있는 입력 상자가 있는 블로그 사이드 바에서 이 속성을 사용합니다.
aria-labelledby
이 속성은 현재 요소와 레이블을 지정하는 요소 사이의 상관 관계를 설정합니다.
input 요소를 label 요소에 연결하는 방법을 알고 있다면 비슷합니다.
현재 요소를 설명하는 항목 ID를 전달합니다.
예:
<h3 id="description">The description of the product</h3>
<p aria-labelledby="description">
...
</p>aria-describedby
이 속성을 사용하면 요소를 설명 역할을 하는 다른 요소와 연결할 수 있습니다.
예:
<button aria-describedby="payNowDescription" >Pay now</button>
<div id="payNowDescription">Clicking the button will send you to our Stripe form!</div>aria-hidden을 사용하여 내용 숨기기
내 사이트에서 최소한의 디자인을 좋아합니다. 예를 들어 내 블로그는 주로 콘텐츠이며 사이드 바에 링크가 있습니다. 그러나 사이드 바의 일부 내용은 페이지를 볼 수 없는 사람의 경험에 추가되지 않는 시각적 요소일 뿐입니다. 내 로고 사진 또는 어둡거나 밝은 테마 선택기와 같습니다.
aria-hidden = "true"속성을 추가하면 화면 판독기에 해당 요소를 무시하도록 지시합니다.
더 배울 곳
이것은 주제에 대한 소개일 뿐입니다. 자세한 내용은 다음 리소스를 권장합니다.
원본 : https://flaviocopes.com/accessibility/
등록된 댓글이 없습니다.
