알아야 할 내용
Applied Accessibility 소개
"Accessibility", 즉 접근성은 일반 사람보다는
장애가 있는 사람들이 얼마나 쉽게 콘텐츠에 접근할 수 있는지 의미한다.
웹사이트는 인간의 능력이나 자원에 구애 받지 않고
모든 사람들이 쉽게 접근할 수 있어야 한다.
장애가 있는 사람들과 같은 경우,
스크린 리더 (screen reader, 화면 읽기),
보이스 레코그니션 (voice recognition, 음성 인식) 등의 기술을 이용하여
콘텐츠에 접근한다.
어떤 사람과 같은 경우는,
키보드 밖에 사용하지 못 하는 경우도 있다.
개발을 할 때에는,
이러한 모든 사람들을 염두에 두고 시작해야 한다.
목록
- 시각 장애를 고려하여, 이미지에 추가 설명 넣기 - Add a Text Alternative to Images for Visually Impaired Accessibility
- Alt 자리를 빈 상태로 둬도 될 때는? - Know When Alt Text Should be Left Blank
- 제목글(머리글)로 콘텐츠의 구조 만들기 - Use Headings to Show Hierarchical Relationships of Content
- 메인 태그 기능 살펴보기 - Jump Straight to the Content Using the main Element
- 아티클 엘레먼트 살펴보기 - Wrap Content in the article Element
- 헤더 태그 살펴보기 - Make Screen Reader Navigation Easier with the header Landmark
- 내브 태그 살펴보기 - Make Screen Reader Navigation Easier with the nav Landmark
- 푸터 태그 살펴보기 - Make Screen Reader Navigation Easier with the footer Landmark
- 오디오 콘텐츠에 대한 접근성 높이기 - Improve Accessibility of Audio Content with the audio Element
- 시각 정보에 대한 접근성 높이기 - Improve Chart Accessibility with the figure Element
- 라벨 엘레먼트로 접근성 높이기 - Improve Form Field Accessibility with the label Element
- 필드세트로 라디오버튼 접근성 더 높이기 - Wrap Radio Buttons in a fieldset Element for Better Accessibility
- 쉬운 날짜 입력 필드 만들기 - Add an Accessible Date Picker
- 기준을 따르는 날짜 및 시간 추가로 입력하기 - Standardize Times with the HTML5 datetime Attribute
- CSS 로 스크린리더 기능 추가하기 - Make Elements Only Visible to a Screen Reader by Using Custom CSS
- 텍스트의 명암 조정하여 가독성 높이기 - Improve Readability with High Contrast Text
- 색맹을 위해 충분한 명암 적용하기 - Avoid Coloblindness Issues by Using Sufficient Contrast
- 색맹이 있는 사람을 위해 색상을 신중하게 선택하기 - Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
- 충분한 설명이 있는 텍스트에 링크 걸기 - Give Links Meaning by Using Descriptive Link Text
- 액세스키 설정하기 - Make Links Navigable with HTML Access Keys
- 키보드 포커스 이해하기 - Use tabindex to Add Keyboard Focus to an Element
- 키보드 포커스 순서 정하기 - Use tabindex to Specify the Order of Keyboard Focus for Several Elements
- Applied Accessibility 를 마치며...
Add a Text Alternative to Images for Visually Impaired Accessibility
시각 장애를 고려하여, 이미지에 추가 설명 넣기
설명
이미지 태그에는 alt 라는 애트리뷰트(attribute, 속성)가 있다.
alt 는 이미지가 뜨지 않거나, 보지 못 해도,
글을 읽고 어느 정도 이해할 수 있도록 텍스트를 입력하는 것이다.
<img src="importantLogo.jpeg" alt="Company logo">
시각 장애가 있는 사람과 같은 경우,
스크린 리더에 의존한다.
그래서 이들은 웹 콘텐츠를 오디오로 이해할 수 있어야 한다.
예를 들어
이미지만 삽입되어 있고,
아무런 텍스트 설명이 되어 있지 않은 웹 콘텐츠와 같은 경우,
시각 장애가 있는 사람은 이를 이해할 수 없을 것이다.
그래서 이미지에는 항상 alt 애트리뷰트를 넣어줘야 한다.
그리고 텍스트를 읽고 이미지를 대략 이해할 수 있을 정도의 정보를 넣어야 한다.
HTML5 버전부터는
alt 애트리뷰트에 정보를 포함하는 것이 의무적인 것으로 생각하면 된다.
문제
1. img 태그에 현재 alt 애트리뷰트가 존재하지 않는다.
2. alt 를 추가해보자.
3. 아무런 설명이나 추가해보자.
답변
<img src="doingKarateWow.jpeg" alt="나는 자유인이다.">Know When Alt Text Should be Left Blank
Alt 자리를 빈 상태로 둬도 될 때는?
설명
위에서 언급한 바와 같이,
이미지 태그에는 alt 애트리뷰트(attribute, 속성)를 넣어줘야 하는 것이 의무사항과 같이 되었다.
그런데
이미지에는 캡션으로 이미 설명을 추가해주는 부분이 있다.
이 경우에는 같은 일을 반복해야 하는 것처럼 보인다.
웹 콘텐츠에 이미지에 대한 설명을 했을 경우에는
alt 는 빈 상태로 두면 된다.
하지만 이미지 캡션에 설명을 넣었을 경우에는
alt 에 설명을 다시 해주는 것이 좋다.
사람들이 검색을 할 때,
이 alt 에 있는 설명이 서치엔진(search engine, 검색엔진)에서도 검색되기 때문이다.
백그라운드 이미지 (background-image, 바탕이미지)와 같은 경우는
스크린 리더로 읽히는 부분이 아니기 때문에,
일부러 설명을 넣거나 할 필요는 없다.
문제
1. <img> 태그에 alt 애트리뷰트를 추가해보자.
2. alt 에는 설명을 넣지 않고, 빈 상태로 두자.
답변
<img src="samuraiSwords.jpeg" alt="">Use Headings to Show Hierarchical Relationships of Content
제목글(머리글)로 콘텐츠의 구조 만들기
설명
<h1>부터 <h6>까지의 헤딩(heading, 머리글)은
웹 콘텐츠의 구조를 잡는데 많은 도움이 된다.
스크린 리더로 웹 콘텐츠를 읽을 때,
헤딩글만 읽어서 전체 글의 구조를 파악할 수도 있다.
그리고 이 말은
여러 헤딩글 간에 관계를
구조적으로도 명확하게 넣어야 한다는 의미이다.
그저 글씨 크기를 조정하는 정도의 태그로 생각하지 말라는 의미이다.
이를 헤딩 태그에 시맨틱(semantic, 의미있는)한 의미를 넣으라는 식으로 표현하기도 한다.
콘텐츠를 작성하고, 이에 맞는 구조를 갖추기 위해서는
시맨틱한 의미를 함께 포함하는 태그를 사용해야 한다.
우리가 레포트를 작성한다고 상상해보자.
서론, 본론, 결론으로 레포트의 구조를 나눴는데,
결론을 본론 한 중간에 넣을 수는 없지 않겠는가?
당연히 결론은 별도의 섹션으로 나뉘어야 할 것이다.
웹 콘텐츠도 마찬가지다.
헤딩 태그를 콘텐츠의 내용과 어울리는 체계적인 구조로 사용해야 한다.
<h2></h2> 태그를 사용한 헤딩글들은
모두 같은 레벨에 있는 제목이어야 할 것이다.
<h3></h3> 태그의 헤딩글은,
<h2> 태그 하위에 포함되어야 하는 내용이 되어야 할 것이다.
<h2> 헤딩 글 하단에 포함해야 할 내용을,
<h4>나 <h5>로 사용하는 방법은 어떨까?
위에서 이미 언급했듯이
헤딩 태그를 크기를 조정하는 글로 생각하면 안 된다.
헤딩 태그는 순서대로 사용하고,
글의 크기는 CSS로 조정하는 것이 올바른 방법이다.
마지막으로
웹 페이지에는 항상 언제나
단 하나의 <h1></h1> 태그만이 있어야 한다.
서치엔진은 <h1></h1> 태그를
웹 페이지 전체의 큰 제목으로 간주하기 때문이다.
전혀 몰랐던 내용이다.
내 블로그의 글 제목 크기를 모두 조정해야 할 판이다;;
여태 헤딩태그를 크기 조정 정도로만 생각했었는데;;;
문제
1. <h2></h2> 태그 하단에 현재 <h5></h5> 태그가 있다.
2. 우리가 배운 바와 같이 이는 잘못된 방법이다.
3. <h2></h2> 태그 하위 제목에는 <h3></h3>가 와야 한다.
답변
<h1>How to Become a Ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h3>How to Hide in Plain Sight</h3>
<h3>How to Climb a Wall</h3>
<h2>Learn the Art of Battle</h2>
<h3>How to Strengthen your Body</h3>
<h3>How to Fight like a Ninja</h3>
<h2>Learn the Art of Living with Honor</h2>
<h3>How to Breathe Properly</h3>
<h3>How to Simplify your Life</h3>
</main>Jump Straight to the Content Using the main Element
메인 태그 기능 살펴보기
설명
이전에도 살펴본 바와 같이
HTML5 엘레먼트는 웹페이지의 구조를 만드는 기능 외에도
접근성 기능도 내포하고 있다.
이러한 태그의 예로는
메인(main), 헤더(header), 푸터(footer), 내브(nav), 아티클(article), 섹션(section) 등이 있다.
장애가 없는 사람과 같은 경우,
디브(div) 엘레먼트로만 이루어진 웹페이지를 볼 때
아무 문제가 없을 것이다.
하지만 장애가 있는 사람의 경우,
적합한 엘레먼트 및 태그로 구성된 웹페이지를 볼 때
콘텐츠를 더 잘 살펴보거나 이해할 수 있다.
메인 엘레먼트는 메인 콘텐츠를 감싸는 용도로 사용한다.
웹페이지 1개당 1개의 메인만 존재할 수 있다.
웹페이지의 주제와 관련된 정보를 감싸는 용도로 사용된다고 보면 될 것 같다.
배너나 내비게이션 링크 등을 감싸는 용도로는
사용하지 않는다는 의미이다.
메인 태그의 주요 기능 중 하나로는
메인 콘텐츠로 바로 이동할 수 있다 보조기능이다.
웹페이지 상단에 "메인콘텐츠로 이동" 과 같은 링크를 본 적이 있는가?
메인 태그는 이러한 보조적인 기능을 제공하기도 한다.
문제
1. 헤더 태그와 푸터 태그 사이에 메인 태그를 추가해보자.
2. 메인 태그는 비어있는 상태로 두자.
답변
<header>
<h1>Weapons of the Ninja</h1>
</header>
<main></main>
<footer></footer>Wrap Content in the article Element
아티클 엘레먼트 살펴보기
설명
아티클(article) 태그도 메인 태그와 같이 의미있는 태그로 사용할 수 있다.
아티클 태그는 한 주제의 콘텐츠를 감싸는 용도로 사용한다고 생각하면 된다.
예로는 뉴스기사, 포럼 글, 블로그 글 등이 있다.
아티클을 레포트의 한 주제라고 생각한다면,
섹션(section)은 레포트 안에서 장(chapter)을 나누는 기능으로 보면 될 것 같다.
디브(div)는 아티클이나 섹션과 전혀 다른 성향의 텍스트에 사용하면 되겠다.
문제
1. 현재 메인 태그 안에 디브 태그 1개, 아티클 태그 1개가 있다.
2. 대강 살펴봐도, 디브 태그가 아니라 아티클 태그 3개로만 이루어져야 할 것 같다.
3. 디브 태그를 아티클 태그로 변경하자.
답변
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>Make Screen Reader Navigation Easier with the header Landmark
헤더 태그 살펴보기
설명
이번엔 헤더 태그를 살펴보자.
일단 헤드(head) 태그와는 다른 태그라는 점을 기억하자.
HTML5 장에서 이미 살펴본 내용이다.
기억이 나지 않는다면,
여기로 가서 슬쩍 살펴보기 바란다.
헤더와 같은 경우
보디(body) 태그 안에서 사용한다.
제목글이나 간단한 콘텐츠 소개글과 같은 곳에 사용하면 된다.
메인 태그와 같이
해당 콘텐츠를 바로 확인할 수 있는 기능을 내포하고 있다.
문제
1. 현재 가장 상단의 글이 <div></div> 태그에 감싸져있다.
2. 디브 태그 대신, 헤더 태그를 사용해보자.
답변
<header>
<h1>Training with Camper Cat</h1>
</header>Make Screen Reader Navigation Easier with the nav Landmark
내브 태그 살펴보기
설명
내브(nav, 내비게이션) 엘레먼트 또한 스크린 리더를 돕는 기능이 내포되어 있다.
이 태그는
메인 내비게이션 링크를 감싸는데 사용하면 된다.
만약에 웹페이지 하단에도
같은 링크가 나열되어 있다면
이 경우에는 푸터(footer) 태그를 사용하면 된다.
문제
1. 현재 내이게이션 링크는 디브(div) 태그로 감싸져 있는 상태다.
2. 이를 내브 태그로 변경해보자.
답변
<nav>
<ul>
<li><a href="#stealth">Stealth & Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>Make Screen Reader Navigation Easier with the footer Landmark
푸터 태그 살펴보기
설명
지금까지 살펴본 태그들과 마찬가지로
푸터(footer) 엘레먼트 또한 보조적인 기능을 내포하고 있다.
일반적으로 푸터가 사용되는 곳에는
저작권(copyright) 정보나 다른 링크 등이 있다.
그리고 푸터이다 보니,
일반적으로는 웹페이지 최하단에 위치한다.
문제
1. 현재 저작권 정보가 디브(div)로 감싸져 있는 상태이다.
2. 이를 푸터 태그로 변경해보자.
답변
<footer>© 2018 Camper Cat</footer>Improve Accessibility of Audio Content with the audio Element
오디오 콘텐츠에 대한 접근성 높이기
설명
HTML5 오디오(audio) 엘레먼트 또한 기능이 내포된 태그이다.
오디오 엘레먼트는 말 그대로 오디오 콘텐츠를 감싸는데 사용한다.
청각 장애가 있는 사람을 위해
오디오 콘텐츠에도 텍스트로 대체할 수 있는 수단이 필요하다.
이는 웹페이지 내의 텍스트나,
트랜스크립트(transcript, 대본)를 볼 수 있는 링크 등의 방법으로 만들 수 있다.
오디오 태그에는 콘트롤(controls) 이라는 속성(attribute)이 있는데,
콘트롤 애트리뷰트를 넣어주면,
아래 그림과 유사한 브라우저의 기본값으로 설정된 플레이어가 표시된다.
이 플레이어로 시작, 정지 등의 콘트롤을 할 수 있다.
콘트롤 애트리뷰트에는 별도의 값을 넣을 필요가 없다.
콘트롤 애트리뷰트를 넣으면 플레이어가 표시되고,
플레이어가 필요없다면 콘트롤 애트리뷰트를 사용하지 않으면 된다.
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
일반적으로 멀티미디어 콘텐츠에는
오디오 뿐만 아니라 영상과 같은 이미지도 있다.
이미지 및 음성과 동기화(synchronize) 된
캡션(caption, 자막)이나 트랜스크립트가 있어야 한다.
이는 일반적으로 웹개발자의 업무는 아니지만
이러한 부분이 포함되어야 한다는 것은 알고 있어야 한다.
문제
1. <p></p> 태그 아래에 <audio></audio> 태그를 추가해보자.
2. 오디오 태그에 콘트롤 애트리뷰트를 넣자.
3. 오디오 태그 안에 소스 태그를 포함시키자.
4. 소스 태그 안에서 src 는 "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" , type 에는 "audio/mpeg" 를 넣어보자.
답변
<audio controls>
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg">
</audio>Improve Chart Accessibility with the figure Element
시각 정보에 대한 접근성 높이기
설명
HTML5 에 새롭게 추가된 것 중에는
이미지나 차트 등과 같은 시각적인 정보를 보여주는 피규어(figure) 엘레먼트와
피규어 엘레먼트를 설명하는 캡션인 피그캡션(figcaption)이 있다.
이렇게 둘을 함께 사용하면,
이 둘을 한 그룹으로 묶어주는 효과가 있다.
차트 등과 같은 데이터 시각화 정보에는
시각 장애가 있는 사람을 위해
피그캡션 태그를 사용하여 추가 설명을 덧붙여 줄 수 있다.
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>문제
1. <div></div> 태그를 <figure></figure> 태그로 바꿔보자.
2. <p></p> 태그 대신 <figcaption></figcaption> 태그를 사용하자.
답변
<!-- Only change code below this line -->
<figure>
<!-- Stacked bar chart will go here -->
<br>
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
<!-- Only change code above this line -->Improve Form Field Accessibility with the label Element
라벨 엘레먼트로 접근성 높이기
설명
의미있고 HTML 구조를 만들기 위해서는
태그와 애트리뷰트(attribute, 속성) 를
모두 적합하게 사용해야 한다.
라벨(label) 태그는 말 그대로
폼 안에 이름이 있는 라벨을 만들기 위한 용도이다.
라벨 태그에는 "for" 라는 애트리뷰트를 사용할 수 있다.
이러한 태그와 애트리뷰트를 제대로 사용해야
폼을 만들 때도 접근성이 좋은 폼을 만들 수 있는 것이다.
라벨에 대해서 잘 기억이 나지 않는다면,
여기 내용을 다시 한 번 확인해보자.
HTML 장에서 이미 살펴봤던 바와 같이,
라디오 버튼을 넣을 때,
인푸트(input) 엘레먼트를 라벨 엘레먼트로 감싸줬던 것을 기억할 것이다.
이렇게 라벨 엘레먼트로 감싸줌으로 하여,
텍스트가 클릭이 가능하게 만들었었다.
이번에는 for 애트리뷰트를 사용해서,
같은 목적을 달성해보는 방법을 살펴보는 것이다.
여기서 중요한 점은
라벨 태그의 for 애트리뷰트의 값이
인푸트 태그의 아이디(id) 애트리뷰트의 값과 같아야 한다는 점이다.
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>문제
1. 현재 이메일 텍스트를 라벨 태그가 감싸고 있다.
2. 라벨 텍스트에 for 애트리뷰트를 추가하자.
3. 이 때, 인푸트 태그의 아이디와 값이 같아야 한다는 점을 잊지말자.
답변
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<input type="submit" name="submit" value="Submit">
</form>Wrap Radio Buttons in a fieldset Element for Better Accessibility
필드세트로 라디오버튼 접근성 더 높이기
설명
라디오 버튼을 사용할 때,
각 버튼에 대한 라벨 태그의 for 애트리뷰트가
인푸트 태그의 아이디와
값이 같아야 한다는 점을 위에서 살펴봤다.
그래서 실제로 웹페이지 상에 보이는 내용보다
코드로 작성해야 하는 내용이 훨씬 더 많다.
그래도 이렇게 만들어 놓으면
접근성이 높은 웹페이지를 만들 수 있다.
여기에 조금만 더 뭔가를 추가하면 말이다.
필드세트(fieldset) 태그는
위와 같은 라디오버튼 그룹 전체를 감싸주는데 사용할 수 있다.
필드세트 태그 안에는
보통 레전드(legend, 범례) 태그를 넣어
전체 라디오버튼 그룹에 대한 설명을 추가한다.
이렇게 하면,
스크린리더로 웹페이지 콘텐츠를 확인하는 사람들은
필드세트 엘레먼트에 있는
각 선택가능 항목에 대해 파악할 수 있게 된다.
필드세트 태그 안에서 사용하는 레전드 태그는 의무적인 사항은 아니다.
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>문제
1. 현재 라디오버튼이 디브(div) 태그로 감싸져 있는 상태이다.
2. 디브 태그를 필드세트 태그로 변경해보자.
3. <p></p> 태그는 레전드 태그로 바꿔보자.
답변
<fieldset>
<legend>What level ninja are you?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">Master</label>
</fieldset>Add an Accessible Date Picker
쉬운 날짜 입력 필드 만들기
설명
폼(form)에는 보통 인푸트(input) 필드가 있다.
인푸트 태그에 넣을 수 있는 타입(type) 애트리뷰트가 있는데,
어떤 종류의 정보를 넣을지 설정할 수 있다.
HTML5 에서는 데이트(date, 날짜) 필드가 추가되었다.
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
브라우저에 따라 다를 수도 있지만,
인푸트 타입을 데이트로 설정하면,
아래 그림과 같은 데이트 피커 (date picker) 가 생긴다.
최신 브라우저가 아니라면,
인푸트 타입 기본값이 텍스트로 되어 있을 확률이 높다.
텍스트로 되어 있는 경우에도,
유저가 올바른 날짜의 기준을 지킬 수 있게 도울 수 있다.
예를 들어,
2020/07/13 이라는 텍스트가 미리 입력이 되어 있다면,
'20. 7. 13 이라는 전혀 다른 방식으로 입력하지 않을 것이다.
문제
1. 현재 날짜를 넣는 라벨은 입력되어 있지만, 인푸트 태그는 없는 상태이다.
2. 인푸트 타입을 date 로 설정하자.
3. 아이디는 pickdate 로 설정하자.
4. 네임은 date 로 설정하자.
답변
<!-- Only change code below this line -->
<input type="date" id="pickdate" name="date">
<!-- Only change code above this line -->Standardize Times with the HTML5 datetime Attribute
기준을 따르는 날짜 및 시간 추가로 입력하기
설명
HTML5 에서는 위에서 언급한 데이트(date, 날짜) 기능 뿐만 아니라,
타임(time) 엘레먼트와
이와 함께 사용할 수 있는 데이트타임(datetime, 날짜 및 시간) 애트리뷰트가 추가되었다.
이는 인라인(inline) 엘레먼트로 사용할 수 있다.
텍스트 내에 바로 태그를 추가한다는 의미이다.
텍스트로 이미 날짜를 적었는데도 굳이 이렇게 불편하게 추가로 태그까지 넣는 이유는 뭘까?
이 값은 항상 정해진 기준을 따라야 하기 때문에,
장애가 있는 사람들을 위한 접근성에 더 적합하기 때문이다.
기준이 필요한 이유는 날짜를 표시하는 방법이 너무나도 많기 때문이다.
미국에서 사용하는 월 / 일 / 연도 로만 표시한다고 해도 마찬가지다.
- Apr. 14, 2014
- April. 14, 2014
- Apr 14th 2014
- April 14th 2014
그래서 접근성이 필요한 사람들에게는
일관적인 방법으로 정확한 정보를 전달할 수 있도록
기준에 따라서만 날짜를 추가로 입력하는 태그를 만든 것이다.
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>문제
1. 코멘트로 감싸진 <p></p> 태그가 보일 것이다. 여기에는 현재 타임 태그가 포함되어 있지 않은 상태이다.
2. Thursday, September 15<sup>th</sup> 를 타임 태그로 감싸보자.
3. datetime 애트리뷰트는 "2016-09-15" 로 설정하자.
답변
<!-- Only change code below this line -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
<!-- Only change code above this line -->Make Elements Only Visible to a Screen Reader by Using Custom CSS
CSS 로 스크린리더 기능 추가하기
설명
접근성 관련해서 지금까지 살펴본 내용에 CSS 가 없다는 것을 눈치챈 사람??
HTML 의 구조와 적합한 태그의 사용이 얼마나 중요한지 보여주는 대목이다.
하지만 CSS 로도 스크린 리더를 보조하는 기능을 추가할 수 있다.
예를 들어,
웹페이지에 차트를 보여준다고 하자.
스크린리더 기능을 사용하는 사람에게는 차트가 큰 의미가 없을 것이다.
이 사람들을 위해 테이블을 추가로 넣어
보여주려는 데이터를 설명할 수 있다.
하지만 스크린리더 기능을 사용하지 않는 사람에게는
그저 추가적인 내용이 되어 버린다.
이런 경우,
스크린리더 기능을 사용하는 사람에게만 테이블 내용을 적용하고,
스크린리더 기능을 사용하지 않는 사람에게서는 감출 수 있다.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
조심해야 할 것은,
아래의 CSS 로는 우리가 원하는 접근성을 실현할 수 없다는 점이다.
- 모든 사람에게서 내용을 감춘다.
- display: none;
- visibility: hidden;
- 스크린리더가 내용을 건너뛰게 된다.
- width: 0px;
- height: 0px;
문제
현재 웹페이지에는 이미 .sr-only 클래스가 적용된 테이블이 있다.
하지만 sr-only 클래스에 CSS 룰은 적용되어 있지 않은 상태이다.
3. 포지션을 absolute 로 설정하자.
4. 레프트를 -10000px 로 설정하자.
5. width 와 height 는 1px 로 설정해보자.
답변
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}Improve Readability with High Contrast Text
텍스트의 명암 조정하여 가독성 높이기
설명
컴퓨터 화면 상에서
텍스트의 색이 흐리고 바탕색이 진하다면,
텍스트를 읽기가 힘들 것이다.
그래서 텍스트색과 바탕색 간에는
명암의 구별이 충분해야 한다.
그런데 여기서 충분해야 한다는 것은 정확히 무슨 의미일까?
웹 콘텐츠 접근성 가이드라인 (Web Content Accessibility Guidelines, WCAG) 에서는
일반 텍스트에는 4.5 ~ 1 비율의 명암의 구별이 최소한 필요하다고 조언한다.
여기서 이 비율은
두 색의 휘도(밝기) 값을 비교하여 계산한다.
같은 색은 1대1 이다.
이 경우 명암 구분이 없는 것이다.
21대1 과 같은 경우,
흰색과 검은색과 같이 분명한 명암 구분이 있는 경우이다.
문제
현재 프리코드캠프 화면상에 보이는 글을 읽기 힘들 것이다.
이는 1.5:1 의 명암비율로 설정되어 있다.
1. 텍스트의 색을 #636363 으로 바꿔보자.
2. 이는 명암비율을 6:1 로 바꿔준다.
답변
<style>
body {
color: #636363;
background-color: #FFF;
}
</style>Avoid Colorblindness Issues by Using Sufficient Contrast
색맹을 위해 충분한 명암 적용하기
설명
색에 대한 내용은
시각디자인 분야에서 아주 큰 부분을 차지한다.
하지만 접근성을 필요로 하는 사람들을 고려할 경우,
두 가지 문제가 있다.
1. 색의 조정으로만 정보를 전달하려는 경우, 스크린리더 기능을 활용하는 사람들은 그 부분을 놓칠 수 있다.
2. 텍스트색과 바탕색의 명암비율을 제대로 설정하지 않을 경우, 색맹이 있는 사람은 이를 놓칠 수 있다.
우리가 지금까지 배웠던 내용을 모두 종합해 보면,
첫 번째, 두 번째 문제를 해결하기 위한 내용이었다.
WCAG(Web Content Accessibility Guidlines) 에서 권장하는 명암비율은
4.5대1 이다.
색맹이 있는 사람은 특정 색을 구분해내지 못 한다.
보통은 색조(hue) 에 대한 구분이 힘들지만,
명도(lightness) 에 대한 구분이 힘든 경우도 있다.
명암비율은 색 값의 밝기(luminance) 로 계산한다는 것을 기억할 것이다.
4.5:1 의 비율은
진한색에는 쉐이딩(shading, 검은색 더하기) 을 적용하고,
밝은색에는 틴팅(tinting, 흰색 더하기) 을 적용하여 만들어 낼 수 있다.
칼라휠(color wheel) 관점에서 보면,
쉐이딩에는 블루 관련 색 (blues), 바이올렛 관련 색 (violets), 마젠타 관련 색 (magentas), 레드 관련 색 (reds) 이 있다.
틴팅에는 오렌지 관련 색 (oranges), 옐로우 관련 색 (yellows), 그린 관련 색 (greens), 블루그린 관련 색 (blue-greens) 이 있다.
문제
현재 프리코드캠프 화면 상에는
초록색 비스무리 한 background-color 가
밤색 비스무리 한 텍스트 칼라가 적용되어 있다.
현 명암비율은 2.5:1 이다.
1. 백그라운드 칼라를 hsl(120, 25%, 55%) 로 바꿔보자.
2. 텍스트 칼라를 hsl(0, 55%, 15%) 로 바꿔보자.
답변
<style>
body {
color: hsl(0, 55%, 15%);
background-color: hsl(120, 25%, 55%);
}
</style>Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
색맹이 있는 사람을 위해 색상을 신중하게 선택하기
설명
색의 특정 파장(wavelength)에 대해 감도가 낮은 사람부터
여러가지 색을 아예 감지하지 못 하는 사람 등,
색맹의 종류에도 여러가지가 있다.
가장 흔한 경우가
초록색 계열의 색상에 대한 감도가 낮아진 경우이다.
예를 들어,
텍스트와 바탕색 모두 초록색 계열의 색상을 사용한다면
색맹이 있는 사람의 경우
이를 감지하지 못 할 수 있다.
이런 사람들에게 정보를 전달하기 위해서는,
칼라휠(color wheel)에서
서로 근처에 위치한 색상의 조합은
최대한 피하는 것이 좋을 것이다.
인터넷에서 잘 찾아보면,
색맹이 있는 사람들에게
여러가지 색상들이 시각적으로 어떻게 보이는지
시뮬레이션으로 보여주는 것들이 있다고 하니,
관심이 있다면 찾아봐도 좋을 것 같다.
문제
현재 프리코드캠프 화면에는 버튼이 하나 있다.
이 버튼의 바탕색은 노란색 계열이고,
버튼의 텍스트 색은 초록색 계열이다.
그리고 이 두 가지 색상은
칼라휠 상에서 서로 근처에 위치해 있다.
결국 색맹이 있는 사람은
버튼색과 텍스트 색을 구분하지 못할 것이다.
1. 텍스트의 색을 진한 파란색 계열인 #003366 으로 변경하자.
답변
<style>
button {
color: #003366;
background-color: #FFFF33;
font-size: 14px;
padding: 10px;
}
</style>Give Links Meaning by Using Descriptive Link Text
충분한 설명이 있는 텍스트에 링크 걸기
설명
스크린 리더 기능을 사용하는 사람들은
어떤 콘텐츠를 읽을지 정할 수 있다.
메인 콘텐츠로 건너뛴다거나,
헤딩만 읽어들여 전체 페이지의 줄거리를 파악한다던지,
스크린 리더 기능을 사용할 수 있는 엘레먼트만 읽어들인다던지 등으로 말이다.
스크린 리더 기능 중에는 웹페이지 상에 있는 링크만 읽어들이는 옵션도 있다.
이 기능은 링크의 텍스트를 읽어들이는 용도로 사용되는데,
앵커 태그로 감싸진 텍스트를 읽어 들인다고 생각하면 된다.
그래서 "여기" 나 "궁금하다면?" 등의
충분한 설명이 없는 링크는
스크린 리더 기능을 사용하는 사람들에게는
큰 도움이 되지 못 한다.
나도 지금까지
"여기"를 클릭하세요 등으로 링크를 사용했는데,
이제부터 그러면 안 되겠다;;;
문제
현재 프리코드캠프 웹페이지에는
앵커 태그가 충분한 설명을 하는 부분을 감싸고 있지 않은 상태이다.
Click here 이라는 부분만 감싸고 있는 상태이다.
1. 앵커 태그의 위치를 조정해보자.
2. information about batteries 라는 부분을 감싸보자.
답변
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>Make Links Navigable with HTML Access Keys
액세스키 설정하기
설명
HTML 에는 액세스키(accesskey) 라는 애트리뷰트(attribute, 속성) 가 있다.
액세스키는 키보드만 사용하는 유저에게 유용한 기능이다.
이 기능은 특정 엘레먼트를 활성화 시킨다거나
특정 콘텐츠로 바로 가는 단축키와 같은 역할을 한다.
HTML5 에서는 이 기능을 모든 엘레먼트에서 사용할 수 있게 됐다.
이 기능이 가장 유용한 엘레먼트는
클릭이 가능한 링크나 버튼,
뭔가 입력해야 하는 폼과 같은 부분이다.
<button accesskey="b">Important Button</button>
문제
현재 프리코드캠프 화면에 있는 코드 상에는 액세스키가 설정되어 있지 않은 상태이다.
1. 액세스키 애트리뷰트를 추가해보자.
2. 링크가 2개 있다.
3. 첫 번째 링크에는 "g" 라는 단축키를 설정하자.
4. 두 번째 링크에는 "c" 라는 단축키를 설정하자.
답변
<h2><a id="first" href="#" accesskey="g">The Garfield Files: Lasagna as Training Fuel?</a></h2>
<h2><a id="second" href="#" accesskey="c">Is Chuck Norris a Cat Person?</a></h2>Use tabindex to Add Keyboard Focus to an Element
키보드 포커스 이해하기
설명
마우스보다 키보드를 즐겨 사용하는 사람들이 있다.
단지 좋아해서가 아니라
두 손을 자유롭게 사용하지 못 하여,
키보드만 사용해야 하는 사람이 있을 수도 있다.
이러한 경우,
특정 페이지의 내용을 살펴볼 때
탭(tab) 키를 이용하여
한 아이템에서 다음 아이템으로 넘어갈 수 있다.
탭인덱스(tabindex) 는 HTML 태그에 넣을 수 있는 애트리뷰트(attribute, 속성) 이다.
탭인덱스를 특정 태그에 적용할 경우,
탭을 눌러 페이지 내용을 확인하는 사람들에게
이 특정 태그를 주의깊게 살펴보라는 의미를 전달할 수 있다.
이를 키보드 포커스 (keyboard focus) 기능이라고 한다.
우리가 한 번 직접 테스트 해보자.
먼저 프리코드캠프 사이트로 가서
오른쪽에 위치한 "Ninja Survey" 라는 헤더 쪽을 클릭해보자.
이제 탭을 한 번 씩 눌러서
탭이 어떤 역할을 하는지 한 번 살펴보자.
이런 기능이 가능한 이유는,
인푸트(input) 태그에는 이미 키보드 포커스 기능이 적용되어 있기 때문이다.
그렇다면,
일반 텍스트에 이런 키보드 포커스 기능이 가능하게 하기 위해서는
어떻게 해야 할까?
바로 이 때 탭인덱스 애트리뷰트를 사용할 수 있는 것이다.
<div></div> 태그부터 <span></span> 및 <p></p> 태그에까지 사용할 수 있다.
<div tabindex="0">I need keyboard focus!</div>
여기서 탭인덱스에 적용된 숫자에 대한 의미는 다루지 않겠다.
문제
1. <p></p> 태그에 Instruction 이 써져 있는 상태이다.
2. 이 Instruction 에 키보드 포커스를 적용해보자.
3. 탭인덱스 애트리뷰트를 적용하고, 값을 0으로 설정하자.
제대로 적용했을 경우,
테스트 해보면 아래 그림과 같은
키보드 포커스가 적용된 것을 확인할 수 있다.
답변
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>Use tabindex to Specify the Order of Keyboard Focus for Several Elements
키보드 포커스 순서 정하기
설명
이번에는 탭인덱스(tabindex) 에 설정하는 값에 대해서 알아보자.
위에서는 탭인덱스의 값을 "0"으로 설정했던 것을 기억할 것이다.
키보드 포커스는
탭인덱스의 값 1 로 가장 먼저 가고,
그 다음으로는 2, 3 등으로 움직인다.
그 다음으로
인푸트 태그와 같은 키보드 포커스 기능이 기본으로 적용된 태그나
탭인덱스 값이 0 으로 설정된 태그로 이동한다.
여기서 조심해야 할 것은
탭인덱스 값으로 순서를 설정하면,
기본적으로 설정된 순서가 무시되기 때문에
가장 위에서부터 아래로 차례대로 내용을 확인하고 싶어하는 사람들에게는
오히려 혼란을 초래할 수 있다.
<div tabindex="1">I get keyboard focus, and I get it first!</div>
<div tabindex="2">I get keyboard focus, and I get it second!</div>문제
서치 인푸트 (search input) 에 가장 먼저 키보드 포커스가 가게 하고,
그 다음으로 서브미트 인푸트 (submit input) 에 키보드 포커스가 가게 하려 한다.
1. search input 탭인덱스를 1 로 설정하자.
2. submit input 탭인덱스를 2 로 설정하자.
답변
<input type="search" name="search" id="search" tabindex="1">
<input type="submit" name="submit" value="Submit" id="submit" tabindex="2">Applied Accessibility 를 마치며...
사실 접근성에 대한 내용은
생각해본 적도 없었고,
그다지 관심을 가져본 적도 없었다.
프리코드캠프를 통해
그나마 최소한 기본적으로 갖춰야 하는 자세에 대해서 알게 된 것이 기쁘다.
이렇게 하루에 하나씩 새로운 것을 배워 나가는 것이 재밌다.
하루에 하나라도 더 알게 된다는 것은,
어제보다 오늘 더 많이 안다는 것이고,
내일은 오늘보다 더 많이 안다는 것이기 때문이다.
하루에 하나씩 하다보니,
진행과정은 굉장히 더디다.
하지만 부담은 거의 없다.
이런 식으로 2년 반 정도 더 하게 되면,
굉장히 많은 부분을 끝낼 수 있을 것 같다.
Responsive Web Design Principles 로 가기
'freeCodeCamp 프리코드캠프 > 1 반응형 웹 디자인' 카테고리의 다른 글
| 1-6 CSS 플렉스 박스 - CSS Flexbox (0) | 2020.08.17 |
|---|---|
| 1-5 반응형 웹 디자인 원칙 - Responsive Web Design Principles (0) | 2020.07.24 |
| 1-3 시각 디자인 - Applied Visual Design (0) | 2020.07.01 |
| 1-2 CSS (0) | 2020.05.09 |
| 1-1 HTML (0) | 2020.03.31 |
