“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
웹 접근성을 고려한 HTML
접근성을 고려한 HTML 을 작성하는 방법을 배워 보자.
HTML과 접근성
의도와 목적에 맞게 올바른 HTML을 구현하는 것은 왜 중요할까?
예를 들어, 비디오를 재생하는 버튼을 html로 작성해 보자.
1) div태그 로 작성
<div>Play video</div>
2) 웹 접근성을 고려하여 button태그로 작성
<button>Play video</button>HTML에는 요소마다 의미가 내장되어 있다.
button태그는 키보드 접근성이 내장되어 있어 tap으로 탐색가능하다.
웹접근성을 고려한 HTML을 작성한다면 시간적으로도 효율적이고 간결한 코드를 작성 할 수 있다.
장점
1. 개발하기가 더 쉽다. 일부 내장된 기능이 제공되어 이해하기도 더 쉽다.
2. 모바일에서 더 좋다. 시맨틱HTML은 의미없는 코드보다 파일이 훨씬 가볍고 반응형 작성도 쉽다.
3. SEO에 좋다. 검색엔진은 의미없는 태그의 키워드보다 제목, 링크 등 내부의 키워드에 더 중요성을 부여하므로 문서를 더 쉽게 찾을 수 있다.
웹접근성을 고려한 HTML에 대해 더 알아보자.
웹접근성을 고려한 콘텐츠 구조이다
<h1>My heading</h1>
<p>This is the first section of my document.</p>
<p>I'll add another paragraph here too.</p>
<ol>
<li>Here is</li>
<li>a list for</li>
<li>you to read</li>
</ol>
<h2>My subheading</h2>
<p>
This is the first subsection of my document. I'd love people to be able to
find this content!
</p>
<h2>My 2nd subheading</h2>
<p>
This is the second subsection of my content, which I think is more interesting
than the last one.
</p>
이 화면을 파악하기 위해 스크린 리더를 이용하면
1) 각 헤더를 읽어 제목이 무엇인지, 단락이 무엇인지를 알려준다.
2) 다음/이전 항목으로 제목을 이동할 수 있어 분별이 쉽다.
3) 제목이 표시되어 있어 특정 콘텐츠를 찾기 위한 목차로 사용할 수 있다.
접근성을 고려하지 않은 콘텐츠 구조
<span style="font-size: 3em">My heading</span> <br /><br />
This is the first section of my document.
<br /><br />
I'll add another paragraph here too.
<br /><br />
1. Here is
<br /><br />
2. a list for
<br /><br />
3. you to read
<br /><br />
<span style="font-size: 2.5em">My subheading</span>
<br /><br />
This is the first subsection of my document. I'd love people to be able to find
this content!
<br /><br />
<span style="font-size: 2.5em">My 2nd subheading</span>
<br /><br />
This is the second subsection of my content. I think is more interesting than
the last one.웹 화면은 같을 수 있지만 스크린 리더는 이 코드를 해석 할 가이드가 없어 음성으로 식별해 줄 수가 없다.
접근성 외에도 CSS를 사용하여 스타일을 지정하거나 javascript로 조작하기도 복잡하다.
명확한 언어 사용
접근성을 고려한다면
전문용어나 속어대진 명확한 언어를 사용해야 한다.
예를들어,
- 대시를 사용하지 않는다. "5-7 " 대신 "5부터7까지" 를 쓴다.
- 줄임말을 쓰지 않는다. "맘" 대신 "마음"
- 두문자어(첫글자로만든 축약어)를 최소한 한두번 확장한다음 <abbr>태그를 사용하여 설명한다
<p><abbr title="International Olympic Committee">IOC</abbr>
(국제 올림픽 위원회)는 스위스 로잔에 본부를 둔 국제 스포츠 기구이다.</p>
페이지 레이아웃
접근성을 고려한 HTML은 코드를 유지관리하기 쉽다.
레이아웃을 구축할 때 HTML의 기능성 태그를 이용한다.
스크린리더가 판독할 수 있도록 구조에 맞춰 적절한 태그(header, nav, footer, article 등)를 사용하면
독자에게 추가적으로 의미를 제공하여 더욱 접근성이 좋은 문서가 된다.
추가적으로 레이아웃을 구축할 때는 콘텐츠의 순서가 논리적이어야 하는것도 중요하다.
<header>
<h1>Header</h1>
</header>
<nav>
<!-- main navigation in here -->
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<h2>Article heading</h2>
<!-- article content in here -->
</article>
<aside>
<h2>Related</h2>
<!-- aside content in here -->
</aside>
</main>
<!-- And here is our main footer that is used across all the pages of our website -->
<footer>
<!-- footer content in here -->
</footer>
UI컨트롤
UI컨트롤이란 사용자와 웹 화면과의 상호작용 부분(버튼, 링크, 작성양식 등)을 말한다.
UI컨트롤 접근성은 기본적으로 브라우저에서 키보드로 조작 가능한 것이다.
tap키를 이용하여 주요 요소로 초점 이동 가능 한가이다.
그리고 ENTER/RETURN을 눌러 링크를 따라 들어가거나 버튼을 누르거나 문자입력창에
작성가능 해야 한다. 접근성을 고려한 적절한 태그를 사용하면 이 기능들이 작동한다.
<h1>Links</h1>
<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
<p>
Another link, to the
<a href="https://developer.mozilla.org">Mozilla Developer Network</a>.
</p>
<h2>Buttons</h2>
<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!</button>
<button data-message="This is from the third button">And me!</button>
</p>
<h2>Form</h2>
<form>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name" />
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age" />
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</form>
키보드 접근성
간혹 버튼에 div태그를 사용해야하는 경우 role="button"을 사용하여 버튼의 기능을 넣어야 한다.
div에 속성( tabindex="0" 등)을 부여하여 tap이동을 포함한 기능들을 적용할 수 있다.
기본적으로 tabindex속성은 기본 소스 순서대로 탭을 이동하는 대신
사용자가 정의한 순서대로 탭을 이동시키고자 할 때 사용한다.
-tabindex="0" : 이 값을 사용하면 일반적으로 탭이 가지 않는 요소에 탭이 가도록 할 수 있다.
-tabindex="-1" : 이는 탭이 가지 않는 요소에 프로그래밍 방식으로(javascript나 링크)포커스를 받을 수 있도록 해준다
.
위의 기능을 활성화하려면 JAVASCRIPT를 추가해야한다.
document.onkeydown = (e) => {
// The Enter/Return key
if (e.key === "Enter") {
document.activeElement.click();
}
};키보드를 눌렀을 때를 감지하기 위해 객체에 리스너 추가.
이벤트 객체의 Key속성을 통해 어떤 버튼이 눌렸는지 확인한다.
누른 키가 Enter이면 Return버튼을 사용하여 onclick핸들러에 저장된 함수를 실행한다.
document.activerElement.click()activeElement 는
현재 페이지에 초점을 맞춘 요소를 제공한다.
의미있는 텍스트 라벨
UI요소의 텍스트 라벨은 모든 사용자에게 유용하지만,
올바르고 친절하게 표시하는 것은 장애가 있는 사용자에게 특히 중요하다.
버튼과 링크의 텍스트 라벨이 이해하기 쉽고 눈에 띄도록 해야한다.
"여기를 클릭하세요" 같은 버튼 라벨은 화면 리더기 사용자에게 최악이다.
좋은 예시
<p>
Whales are really awesome creatures.
<a href="whales.html">Find out more about whales</a>.
</p>안좋은 예시
<p>
Whales are really awesome creatures. To find out more about whales,
<a href="whales.html">click here</a>.
</p>양식 라벨은 각 양식에 입력해야하는 내용에 대한 단서를 제공하는 데에도 중요하다.
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name" />
</div>이와 같은 코드를 사용하면 라벨과 입력이 명확하게 연결된다.
Firefox접근성 검사기 : 라벨에 대한 중요성과 설명, 문제 조사하는 방법을 알려준다
대체텍스트
문자로된 콘텐츠는 누구나 접근이 가능하지만 멀티미디어 콘텐츠는 아니다. 이미지나 비디오 콘텐츠는 시각장애가 있는 사람이 볼 수 없고, 오디오 콘텐츠는 청각장애가 있는 사람이 들을 수 없다. 이미지나 비디오 등의 요소에 대한 접근성을 알아보자.
<img src="dinosaur.png" />
<img
src="dinosaur.png"
alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />
<img
src="dinosaur.png"
alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
title="The Mozilla red dinosaur" />
<img src="dinosaur.png" aria-labelledby="dino-label" />
<p id="dino-label">
The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like
a human, with small arms, and a large head with lots of sharp teeth.
</p>
스크린 리더로 볼 경우
첫번째 이미지는 사용자에가 별다른 도움을 제공하지 않는다.
스크린리더는 " dinosaur.png, img" 라고 읽어준다.
이미지 파일명이 아무렇게나 생성된 것이라면 더욱 쓸모없어진다.
두번째 이미지는 "빨간색 티라노사우르스 렉스: 작은 팔과 많은 날카로운 이빨을 가진 큰 머리를 가지고 인간처럼 똑바로 서있는 두다리 공룡" 이라는 alt태그 속 대체 텍스트의 내용을 읽어준다.
alt 속성의 내용은 이미지를 직접적이고 시각적으로 전달 가능한 내용을 제공해야한다.
간단하고 간결하면 중복되지않게 모든 정보를 포함해야한다.
세번째 이미지의 경우 추가적으로 상황별 정보를 제공할 수 있다는 것이다.
title태그를 추가하여 이 이미지가 제목을 설명하는 것 이라는 정보가 제공되었다.
네번째 방법은 alt를 사용하지 않았다.
대신 이미지에 대한 설명을 일반 문장에 작성하고
aria-labelledby 와 id태그를 사용하여 문장과 이미지를 연결시킨다.
하나의 설명을 여러 이미지가 사용할 때 유용하게 쓸 수 있다.
figure와 figurecaption
HTML의 figure태그는 figurecaption태그와 함께 쓰인다.
<figure>
<img
src="dinosaur.png"
alt="The Mozilla Tyrannosaurus"
aria-describedby="dinodescr" />
<figcaption id="dinodescr">
A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
human, with small arms, and a large head with lots of sharp teeth.
</figcaption>
</figure>
img태그와 figurecaption 태그를 aria-decribedby와 id 속성으로 연결시켜준다.
이 속성을 사용하면 CSS 적용에도 유용하며, 이미지 옆에 설명을 배치하는 기능을 제공한다.
Empty alt attributes
<h3>
<img src="article-icon.png" alt="" />
Tyrannosaurus Rex: the king of the dinosaurs
</h3>이미지가 설명이 필요없는 장식용이라면 빈 alt 속성을 작성해 주는 것이 좋다.
그렇지 않으면 스크린리더기는 의미없는 이미지의 url등을 읽어주기 때문이다.
alt=""를 작성하면 image라고 읽어 줄 것이다.
아니면 role="pesentation"을 작성해 주어도 스크린리더가 장식용임을 인식하게 해준다.
가능한 장식용 이미지만 표시하려면 CSS를 사용하는게 좋다.
링크에 대해 알아보기
링크(<a href="">)는 사용 방법에 따라 접근성에 도움이 될 수도 있고 해를 끼칠 수 도 있다. 기본적으로 링크는
있는 그대로 엑세스가 가능하다. 시용자가 문서의 다른 섹션으로 빠르게 이동할 수 있도록 지원하여 접근성을 향상 시킨다.그러나 접근 가능한 스타일이 제거되거나 JavaScript 로 인해 예상치 못한 해를 끼칠 수도 있다.
링크태그는 기본적으로 색상과 장식이 주어져있다. 파란색이고 밑줄이 그어져 있으며 방문하면 보라색이 된다.
링크를 연결하지 않은 콘텐츠와 링크를 구별하는 유일한 방법으로 색상을 사용하면 안된다.
onclick이벤트
anchor태그는 href를 설정하거나 페이지 새로고침을 방지하기 위해 남용된다.
이것은 복사를 위한 드래그를 하거나, 북마크를 하거나, 새탭에서 링크를 열때, 스크립트를 다운로드 중 일때 에러가 나거나 다운될 수 있다. 또한 , 이것은 효율적인 기술개발에 맞는 시멘틱 태그가 아니다. 이 경우, 대신 <button> 태그를 쓴다.
일반적으로 anchor 태그는 네비게이션의 URL에 사용하는 것이 적절하다.
외부링크와 HTML이 아닌 리소스에 대한 링크
새탭으로 통해 열리는 링크 target="_blank", href값이 파일 리소스를 가리키는 링크에는 클릭 했을 때 일어날 동작에 대한 표기를해야 한다.
시력이 낮은 사람, 화면 읽기어주는 기술이 필요한 사람, 인지장애가 있는 사람은 새탭, 창 등이 예상치 못하게 열리면 혼란스러울 수 도 있다.
<a target="_blank" href="https://www.wikipedia.org/"
>Wikipedia (opens in a new window)</a
>html이 아닌 리소스에 대한 링크
<a target="_blank" href="2017-annual-report.ppt">
2017 Annual Report (PowerPoint)
</a>
링크 건너뛰기
Skipnav라고도 알려진 건너뛰기 링크는 페이지의 기본 콘텐츠 시작부분으로 연결되는 a시작 요소에 최대한 가깝게 배치된 요소 이다. <body> 이 링크를 사용하면 웹사이트 헤더 및 기본 탐색과 같이 웹사이트의 여러 페이지에서 반복되는 콘텐츠를 우회할 수 있습니다.
건너뛰기 링크는 반복적인 링크를 통해 이동하는 작업이 힘든 작업이 될 수 있는 스위치제어, 음성명령 또는 마우스 스키/헤드 막대와 같은 보조기술의 도움으로 탐색하는 사람들에게 특히 유용합니다.
근접성
anchor을 포함하여 시각적으로 서로 가까운 곳에 배치된 대량의 대화형 콘텐츠에는 이를 구분할 수 있는 공간이 삽입되어야 합니다. 이간격은 미세한 모터제어 문제로 고통받고 탐색하는 동안 실수로 잘못된 대화형 콘텐츠를 활성화 할 수 있는 사람들에게 유용합니다.