이 문서는 W3C의 "WCAG 2.0을 위한 CSS 기법(WCAG 2.0 기법의 일부, W3C 워킹 그룹 노트)"을 한글로 번역한 문서입이다. 이 문서는 번역 과정에서 발생하는 오류를 포함할 수 있습니다. 번역한 문서는 규범력을 갖지 않으며 오직 영어 버전만이 규범력을 갖습니다.
This documented is a translated copy of the W3C's "CSS Techniques for WCAG 2.0 (Part of Techniques for WCAG 2.0, W3C Working Group Note)". This document may contain translation errors. The English version of this specification is the only normative version.
이 웹 페이지는 WCAG 2.0 기법: 웹 콘텐츠 접근성 지침 2.0을 위한 기법과 실패 사례에서 CSS 기법만을 모은 페이지이다. 전체 기법에 대한 정보는 WCAG 2.0 기법 소개 페이지를 참고하고, 다른 기술이 적용되는 기법 목록은 전체 목차를 확인하라.
CSS를 지원하는 모든 기술
이 기법과 관련된 항목:
이 기법은 스타일 시트를 적용하지 않더라도 의미 있는 표현을 유지하면서 스타일 시트로 시각적인 외관을 향상시키는 방법을 보여주기 위함이다. CSS2의 포지셔닝 속성을 사용하면 콘텐츠를 사용자의 뷰포트 위에 자유롭게 배치할 수 있다. 구조적인 요소를 사용하면 스타일을 적용하지 않을 때에도 콘텐츠의 의미를 구분할 수 있게 된다.
콘텐츠를 구조적인 요소(정의 목록)로 마크업하고, 이렇게 마크업한 콘텐츠를 CSS를 사용해서 컬럼 형식으로 표현한 예이다. 각각의 클래스에 절대 포지셔닝을 지정해서 콘텐츠를 컬럼 형식으로 배치하고, HTML 정의 목록을 표현하는 사용자 에이전트의 기본 서식(dd 요소 들여쓰기)을 재지정하기 위해서 마진 값을 0으로 지정했다.
표현할 콘텐츠는 아래와 같다:
예제 코드:
<div class="box">
<dl>
<dt class="menu1">상품</dt>
<dd class="item1">전화기</dd>
<dd class="item2">컴퓨터</dd>
<dd class="item3">휴대용 MP3 플레이어</dd>
<dt class="menu2">지역</dt>
<dd class="item4">아이다호</dd>
<dd class="item5">위스콘신</dd>
</dt>
</dl>
</div>
아래 CSS가 이 요소들의 배치와 스타일에 사용된다:
예제 코드:
.item1 {
left: 0;
margin: 0;
position: absolute;
top: 7em;
}
.item2 {
left: 0;
margin: 0;
position: absolute;
top: 8em;
}
.item3 {
left: 0;
margin: 0;
position: absolute;
top: 9em;
}
.item4 {
left: 14em;
margin: 0;
position: absolute;
top: 7em;
}
.item5 {
left: 14em;
margin: 0;
position: absolute;
top: 8em;
}
.menu1 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 0;
margin: 0;
position: absolute;
top: 3em;
}
.menu2 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 10em;
margin: 0;
position: absolute;
top: 3em;
}
#box {
left: 5em;
position: absolute;
top: 5em;
}
스타일 시트를 적용하면 콘텐츠가 "상품"과 "지역" 두 개의 컬럼으로 표현된다. 스타일 시트를 적용하지 않으면 콘텐츠가 정의 목록으로 표현되고, 이 정의 목록에는 구조와 읽는 순서가 그대로 담겨 있다.
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
CSS를 사용해서 배치한 콘텐츠에서
문서에서 스타일 정보를 제거하거나 사용자 에이전트에서 스타일 시트 사용을 해제한다.
콘텐츠의 구조적인 관계와 의미를 보존하고 있는지 확인한다.
#2의 확인 결과가 참.
CSS를 지원하는 모든 기술
이 기법과 관련된 항목:
이 기법은 링크 고유의 기능을 설명하는 부가 텍스트를 추가해서 링크 텍스트의 의미를 보강하면서 CSS를 지원하는 사용자 에이전트에서는 부가 텍스트가 화면상에 렌더링되지 않도록 스타일을 적용하기 위함이다. 시각적인 링크 텍스트를 이해하는데 링크 외부의 문맥 정보가 필요한 경우에 이 기법을 사용하면 전체 텍스트를 표현하지 않고도 링크의 입력 기능에 대한 완전한 설명을 제공할 수 있다.
이 기법을 사용하려면 숨기려는 텍스트에 적용할 CSS 선택자를 작성해야 한다. 이 선택자에는 텍스트를 overflow 속성이 hidden인 1픽셀 크기의 박스 안에 숨기고, 텍스트가 뷰포트 밖에 배치되도록 규칙을 지정한다. 그러면 화면에서는 텍스트가 표현되지 않지만 스크린 리더나 점자 표시 장치 같은 보조 기기에서는 텍스트에 여전히 접근할 수 있게 된다. 이 기법에서 visibility:hidden이나 display:none 속성을 사용하지 않은 것에 주의하라. 이런 속성은 스크린뿐만 아니라 보조 기술까지 텍스트를 숨기는 의도하지 않은 결과를 가져올 수 있기 때문이다.
주 1: 링크 텍스트를 숨기는 이 기법은 일부 스크린 리더 사용자와 상업적인 웹 사이트를 만드는 제작자들의 지지를 받고 있으며, 일부 웹사이트에서 효과가 입증되었다. 하지만 너무 많은 내용을 읽어주는 결과를 가져올 수 있고 스크린 리더에 익숙한 사용자가 그 결과를 제어할 수 없다는 이유로 또 다른 일부 스크린 리더 사용자와 접근성 전문가는 이 기법을 일반적인 기법으로 받아들이는 것을 권장하지 않는다. 우리(WCAG 워킹 그룹)는 숨겨진 텍스트 영역에 반복되는 콘텐츠가 없는 웹 페이지에서 이 기법이 유용하다고 믿는다.
주 2: 지침을 만족하지 못하는 콘텐츠의 지침에 부합하는 대체 버전 페이지를 제공하기 위해서 이 기법과 스타일 전환 기법을 조합해서 사용할 수 있다. 자세한 정보는 C29: 스타일 전환 방식(스위처)을 사용해서 지침에 부합하는 대체 버전 제공과 지침에 부합하는 대체 버전을 참고하라.
아래 예제는 다음과 같은 CSS 선택자와 규칙을 사용한다:
a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }
짤막한 기사 개요에 이어서 "전체 기사" 링크가 제공되는 뉴스 사이트의 예이다. 숨겨진 링크 텍스트가 링크의 목적을 설명한다.
예제 코드:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>숨겨진 링크 텍스트</title>
</head>
<body>
<p>워싱턴주가 경기 부양 정책을 발표하다.
<a href="#"> <span>워싱턴주의 경기 부양 </span>
전체 기사</a></p>
</body>
</html>
서로 다른 형식의 전자책(e-book)을 제공하는 예이다. 각각의 책 제목 뒤에 "HTML"과 "PDF" 링크가 있고, 숨겨진 텍스트가 링크 각각의 목적을 설명하고 있다.
예제 코드:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>숨겨진 링크 텍스트</title>
</head>
<body>
<dl>
<dt>곰돌이 푸 </dt>
<dd><a href="winnie_the_pooh.html">
<span>곰돌이 푸 </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>곰돌이 푸 </span>PDF</a></dd>
<dt>전쟁과 평화</dt>
<dd><a href="war_and_peace.html">
<span>전쟁과 평화 </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>전쟁과 평화 </span>PDF</a></dd>
</dl>
</body>
</html>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
이 기법을 사용하는 각각의 anchor 요소에서:
표현 영역이 1픽셀로 제한되고 overflow가 hidden이며 텍스트가 화면 밖에 배치되도록 정의한 요소가 있는지 확인한다.
이렇게 정의한 요소가 anchor 요소의 콘텐츠에 포함되어 있는지 확인한다.
anchor 요소의 전체 콘텐츠가 링크의 목적을 설명하고 있는지 확인한다.
위의 모든 확인 결과가 참.
CSS를 지원하는 모든 기술
이 기법과 관련된 항목:
이 기법은 텍스트의 순서가 갖는 의미를 유지하면서 스타일 시트로 텍스트 내부의 시각적인 간격 표현을 어떻게 향상시킬 수 있는지 보여주기 위함이다. CSS의 letter-spacing 속성을 사용하면 글자 사이의 간격을 제어할 수 있다. 간격을 제어하려고 공백 문자를 추가하면 단어의 의미와 발음이 달라질 수도 있으므로 공백 문자를 추가하는 대신 이 기법을 사용할 것을 권장한다.
아래 CSS는 h2 제목 요소의 각각의 글자 사이에 스페이스 하나에 대응되는 간격을 추가한다.
예제 코드:
h2
{
letter-spacing: 1em;
}
마크업은 다음과 같다:
예제 코드:
<h2>박물관</h2>
결과는 아래처럼 렌더링된다:
예제 코드:
박 물 관
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
글자 사이의 간격이 기본 간격과 다르다고 판단되는 모든 단어에 대해서:
CSS의 letter-spacing 속성으로 간격을 제어했는지 확인한다.
#1의 확인 결과가 참.
CSS를 사용해서 이미지를 추가하는 모든 기술.
이 기법과 관련된 항목:
이 기법은 순전히 장식적인 이미지나 시각적인 서식을 위해 사용되는 이미지를 추가적인 마크업 없이 웹 콘텐츠에 넣는 방법을 제공하기 위함이다. 이 기법을 사용하면 보조 기기가 텍스트가 아닌 콘텐츠를 무시할 수 있게 된다. 일부 사용자 에이전트는 사용자 설정에 따라서 CSS를 무시하거나 동작하지 않게 할 수 있다. 이런 경우에 CSS를 사용해서 넣은 배경 이미지는 간단하게 "사라지고" 폰트 확대나 고 대비 모드 같은 디스플레이 설정에 아무런 영향을 주지 않는다.
배경 이미지는 아래 CSS 속성으로 추가할 수 있다:
background,
background-image,
:before, :after 수도(pseudo) 요소와 함께 사용되는 content 속성,
list-style-image.
주: 이 기법은 정보를 전달하거나 기능을 제공하는 이미지, 또는 특별한 지각적인 경험 창출을 목적으로 하는 모든 이미지에는 적합하지 않다.
페이지에 적용되는 배경 이미지를 지정하는 스타일 시트의 예이다.
예제 코드:
...
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
...
CSS의 background 속성을 사용해서 사용자가 마우스 포인터를 링크 위로 가져갈 때 장식적인 롤오버 효과를 만드는 스타일 시트의 예이다.
예제 코드:
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
}
CSS의 background 속성을 사용해서 요소의 모서리를 둥글게 처리하는 스타일 시트의 예이다.
예제 코드:
...
<style type="text/css">
div#theComments { width:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
margin:0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
margin:0; padding:8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
<div class="aComment">
<blockquote>
<p>안녕 존, 이 기법이 너무 마음에 들어서 내 웹사이트에 적용할거야!</p>
</blockquote>
<div class="submitter">
<p class="cite">Elbonia에서 <a href="http://example.com/">익명의 누군가가</a></p>
</div>
</div>
<div class="aComment">
...
</div>
</div>
...
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 4.01 명세서에서 body 요소의 background 속성 사용을 금지함 (deprecated)
장식적인 이미지가 존재하는지 확인한다.
CSS를 사용해서 해당 이미지를 추가했는지 확인한다.
#1의 확인 결과가 참이면 #2의 확인 결과도 참.
CSS
이 기법과 관련된 항목:
포인트나 픽셀 같은 절대 단위로 폰트 크기를 지정하면 Internet Explorer 7 이하에서는 메뉴의 폰트 크기 설정으로 텍스트 크기를 변경할 수 없다.
윈도우 제어판의 "내게 필요한 옵션"에서 고 대비 모드를 설정하면 IE6는 CSS로 최외곽 창에 퍼센트 값을 설정한 것처럼 페이지의 텍스트 크기를 키운다. 표준 CSS 레이아웃 방식에서는 상대적인 확대/축소가 곱으로 적용되기 때문에 요소 안의 텍스트 크기가 달라진다. Firefox와 IE7은 CSS 레이아웃에 영향을 미칠 수 있는 시스템 설정을 기반으로 콘텐츠를 확대/축소하지 않으므로 이런 효과가 발생하지 않는다.
이 기법은 텍스트의 폰트 크기를 비율로 지정해서 사용자 에이전트가 콘텐츠를 효과적으로 확대하거나 축소할 수 있도록 하기 위함이다. 만약 body 요소에 font-size를 지정하면 더 구체적인(more specific) 선택자로 값을 재지정하지 않는 한 다른 모든 요소에 그 값이 상속된다.
사용되는 문맥에 상관없이 strong 요소의 텍스트가 주변 텍스트보다 항상 더 커지도록 strong 요소에 폰트 크기를 지정한 예이다. 제목(h1)과 문단(p)의 폰트 크기를 서로 다르게 지정하더라도 예제에 사용된 강조 텍스트는 항상 주변 텍스트보다 크게 표현된다.
예제 코드:
strong {font-size: 120%}
...
<h1><strong>사용자가</strong> 텍스트 크기를 조절할 수 있게 하자</h1>
<p>자신에게 적합한 텍스트 크기를 아는 것은 오직 사용자뿐이므로
직접 텍스트 크기를 설정할 수 있도록 하는 것이 <strong>무엇보다</strong> 중요하다.
...
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
각각의 CSS 규칙에서 폰트 크기를 지정한 모든 속성을 검사한다.
그 값이 퍼센트 값인지 확인한다.
#2의 확인 결과가 참.
CSS
이 기법과 관련된 항목:
포인트나 픽셀 같은 절대 단위로 폰트 크기를 지정하면 Internet Explorer 7 이하에서는 메뉴의 폰트 크기 설정으로 텍스트 크기를 변경할 수 없다.
이 기법은 적용하려는 상대 폰트 크기를 나타내는 명명된 폰트 크기를 지정하기 위함이다. 사용자 에이전트는 이 값이 주는 정보를 통해서 상속되는 font-size 값에 비례하는 폰트 크기를 선택하게 된다.
사용되는 문맥에 상관없이 strong 요소의 텍스트가 주변 텍스트보다 항상 더 커지도록 strong 요소의 폰트 크기를 larger로 지정한 예이다. 제목(h1)과 문단(p)의 폰트 크기를 서로 다르게 지정하더라도 예제에 사용된 강조 텍스트는 항상 주변 텍스트보다 크게 표현된다.
예제 코드:
strong {font-size: larger}
...
<h1><strong>사용자가</strong> 텍스트 크기를 조절할 수 있게 하자</h1>
<p>자신에게 적합한 텍스트 크기를 아는 것은 오직 사용자뿐이므로
직접 텍스트 크기를 설정할 수 있도록 하는 것이 <strong>무엇보다</strong> 중요하다.
...
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
각각의 CSS 규칙에서 폰트 크기를 지정한 모든 CSS 속성을 검사한다.
그 값이 xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, larger 중의 하나인지 확인한다.
#2의 확인 결과가 참.
CSS
이 기법과 관련된 항목:
Internet Explorer 6에서 폰트 크기를 em 단위로 지정하면 실제 지정한 % 값이나 명명된 폰트 크기보다 텍스트가 더 크게 확대/축소된다. 그래서 텍스트 크기를 최대(largest)로 지정하면 텍스트가 두 배(200%) 이상 커져서 텍스트 일부가 잘려서 표현되는 문제를 발생시킬 수 있다.
포인트나 픽셀 같은 절대 단위로 폰트 크기를 지정하면 Internet Explorer 7 이하에서는 메뉴의 폰트 크기 설정으로 텍스트 크기를 변경할 수 없다.
Internet Explorer 7은 요소 타입이나 클래스에 적용되는 페이지 범위의(page-wide) CSS 규칙으로 텍스트에 스타일을 지정할 때에만 텍스트 크기를 변경한다. 요소의 style 속성에서 인라인 스타일을 지정하는 경우에는 텍스트 크기 변경을 지원하지 않는다.
이 기법은 텍스트의 폰트 크기를 em 단위로 지정해서 사용자 에이전트가 콘텐츠를 효과적으로 확대하거나 축소할 수 있도록 하기 위함이다. em은 폰트 자체의 특성이기 때문에 폰트 크기에 따라 비례적으로 크기가 변경된다. 만약 body 요소에 font-size를 지정하면 더 구체적인(more specific) 선택자로 값을 재지정하지 않는 한 다른 모든 요소에 그 값이 상속된다.
사용되는 문맥에 상관없이 strong 요소의 텍스트가 주변 텍스트보다 항상 더 커지도록 strong 요소에 폰트 크기를 지정한 예이다. 제목(h1)과 문단(p)의 폰트 크기를 서로 다르게 지정하더라도 예제에 사용된 강조 텍스트는 항상 주변 텍스트보다 크게 표현된다.
예제 코드:
strong {font-size: 1.6em}
...
<h1><strong>사용자가</strong> 텍스트 크기를 조절할 수 있게 하자</h1>
<p>자신에게 적합한 텍스트 크기를 아는 것은 오직 사용자뿐이므로
직접 텍스트 크기를 설정할 수 있도록 하는 것이 <strong>무엇보다</strong> 중요하다.
...
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
각각의 CSS 규칙에서 폰트 크기를 지정한 모든 속성을 검사한다.
그 값이 em 단위인지 확인한다.
#2의 확인 결과가 참.
CSS, HTML, XHTML
이 기법과 관련된 항목:
윈도우용 Internet Explorer 6.0 이하 버전은 하이퍼링크 요소(a 요소)를 제외한 다른 모든 요소에서 동적인 수도 클래스를 지원하지 않는다. Internet Explorer 7은 하이퍼링크를 제외한 다른 모든 요소에서 :focus 스타일을 지원하지 않는다. Internet Explorer에서 (X)HTML 링크(a 요소)에 :fucus와 동일한 효과를 주려면 :active 수도 클래스를 넣어야 한다.
윈도우용 Firefox 1.5, Firefox 2.0, SeaMonkey 1.1은 텍스트 입력 필드, 텍스트 영역(textarea), 라디오 버튼, 체크 박스, select 요소, submit/reset 버튼, button 요소의 동적인 수도 클래스를 지원한다. 하지만 포커스를 받은 라디오 버튼이나 체크 박스의 텍스트 색상이나 보더 색상을 변경하는 것은 지원하지 않는다.
윈도우용 Opera 9.02는 텍스트 입력 필드, 텍스트 영역(textarea), 라디오 버튼, 체크 박스, select 요소, submit/reset 버튼의 동적인 수도 클래스를 지원하지만 button 요소에서는 지원하지 않는다.
윈도우용 Firefox 2.0, Opera 9.02, SeaMonkey 1.1은 폼 레이블(label)을 인접 형제 선택자로 선택하는 것 또한 지원한다. 윈도우용 Firefox 1.5와 Internet Explorer 6.0 이하 버전은 폼 레이블(label)을 인접 형제 선택자로 선택하는 것을 지원하지 않는다.
이 기법은 상호 작용하는 요소가 포커스를 갖거나 사용자가 포인팅 장치를 사용해서 해당 요소 위에 머물 때(hover) 스타일 시트로 시각적인 피드백을 제공하는 방식으로 시각적인 외관을 향상시키는 방법을 보여주기 위함이다. 포커스를 갖거나 hover 상태인 요소를 강조하면 해당 요소가 상호 작용할 수 있다는 사실이나 상호 작용이 이루어지는 범위 같은 정보를 제공할 수 있다.
시각적인 피드백은 하나 이상의 방식을 통해서도 제공할 수 있다. 대부분의 경우에 시각적인 피드백은 마우스를 사용해서 해당 요소 위에 머물거나 키보드 탭을 사용해서 요소로 이동할 때 얻게 된다.
마우스와 키보드 포커스를 시각적으로 표현하도록 링크 요소를 처리한 예이다. 링크 요소가 포커스를 받으면 배경색이 달라지도록 CSS를 적용했다.
표현할 콘텐츠는 아래와 같다:
예제 코드:
<ul id="mainnav">
<li class="page_item">Home</li>
<li class="page_item"><a href="/services">서비스</a></li>
<li class="page_item"><a href="/projects">프로젝트</a></li>
<li class="page_item"><a href="/demos">데모</a></li>
<li class="page_item"><a href="/about-us">안내</a></li>
<li class="page_item"><a href="/contact-us">연락하기</a></li>
<li class="page_item"><a href="/links">링크</a></li>
</ul>
위 요소들이 마우스나 키보드 포커스를 받을 때 배경색을 변경해주는 CSS는 다음과 같다:
예제 코드:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}
:focus 수도 클래스를 사용해서 입력 필드가 포커스를 받으면 스타일(배경 색상)을 변경하는 예이다.
예제 코드:
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00;
color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6;
color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">이름: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">남성</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">여성</label>
<p>
</form>
</body>
</html>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
포커스를 받을 수 있는 모든 요소에 대해서:
마우스를 사용해서 포인터를 요소 위로 옮긴다.
배경이나 보더 색상이 변하는지 확인한다.
키보드 포커스를 주기 전에 마우스를 해당 요소에서 벗어나도록 한다.
키보드를 사용해서 탭으로 요소까지 이동한다.
배경이나 보더 색상이 변하는지 확인한다.
요소가 포커스를 잃으면 변경된 배경이나 보더 색상이 다시 원래대로 돌아오는지 확인한다.
#2, #5, #6의 확인 결과가 참.
(X)HTML, CSS
이 기법과 관련된 항목:
이 기법은 사용자 에이전트가 텍스트 크기를 변경할 때 텍스트 기반 폼 컨트롤이 리사이즈 되는 것을 보장하기 위함이다. 그러면 사용자가 원하는 크기로 텍스트를 표현하기 때문에 텍스트를 입력하고 자신이 (입력 박스에) 입력한 텍스트를 읽을 수 있게 된다.
텍스트 기반의 폼 컨트롤에는 버튼과 함께 입력 박스(text, textarea)도 포함된다.
간단한 안내 문구와 사용자가 자신의 이름, 전화번호, 이메일 주소를 입력할 수 있도록 폼 컨트롤을 제공하는 연락처 양식의 예이다. 텍스트와 폼 컨트롤은 모두 가변적으로 크기를 변경할 수 있도록 구현했다. Internet Explorer에서는 폰트 크기가 폼 컨트롤로 상속되지 않기 때문에 이 예는 폼 컨트롤 자체의 폰트 크기를 지정하는 코드도 포함한다.
XHTML 부분:
예제 코드:
<h1>연락하기</h1>
<p>귀하의 정보를 알려주시면 최대한 빨리 연락드리겠습니다. 아래 입력 양식을 전부 채워주셔야 합니다.</p>
<label for="fname">이름</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">성</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">전화번호</label><input type="text" name="phone" id="phone" /><br />
<label for="email">이메일</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="전송" id="Submit" />
CSS 부분:
예제 코드:
h1 { font-size: 2em; }
p, label, input { font-size: 1em; }
실제 동작하는 코드 예제: CSS로 input 리사이즈하기 .
이 예제는 IE에서 텍스트 크기 조절 기능을 사용하면 동작한다. 하지만 Firefox 2.0에서는 크기가 변경되지 않는다.
XHTML 부분:
예제 코드:
<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />
CSS 부분:
예제 코드:
input.geomsize {
width: 1.2em;
height: 1.2em;}
실제 동작하는 코드 예제: CSS로 라디오 버튼과 체크 박스 리사이즈하기
사용자가 텍스트를 입력할 수 있는 텍스트 기반 폼 컨트롤에 적당한 텍스트를 입력한다.
콘텐츠의 텍스트 크기를 두 배(200%)로 키운다.
텍스트 기반 폼 컨트롤의 텍스트가 두 배로 커졌는지 확인한다.
#3의 확인 결과가 참.
CSS를 지원하는 모든 기술
이 기법과 관련된 항목:
윈도우용 Internet Explorer 5, 5.5, 6.0, 7의 "쿽스(quirks) 모드"에서는 W3C의 CSS 명세서에 어긋나는 박스 모델을 사용한다. 이런 브라우저에서는 좌, 우측 패딩과 보더가 요소의 전체 너비에 영향을 주지 않기 때문에 해당 요소의 콘텐츠 영역은 더 좁아진다. (이런 현상은 "박스 모델 버그"로 알려져 있다.) 맥 OS용 Internet Explorer 5.5와 윈도우용 Internet Explorer 6, 7의 "표준 준수(standards compliant) 모드"에서는 W3C의 CSS 명세서에 정의된 박스 모델을 사용한다.
웹 디자이너는 레이아웃을 더 잘 제어하기 위해 때때로 스페이서 이미지 (보통 1x1 픽셀의 투명 GIF)를 사용한다. 예를 들어서 테이블 내부의 간격을 조절하거나 문단을 들여쓰기 위해서 이런 이미지를 사용한다. 하지만 캐스케이딩 스타일 시트(CSS)를 사용하면 스페이서 이미지를 사용하지 않고도 레이아웃을 충분히 제어할 수 있다. CSS 속성인 마진과 패딩을 개별적으로 사용하거나 이 둘을 조합해서 레이아웃을 제어할 수 있다. 마진 속성('margin-top', 'margin-right', 'margin-bottom', 'margin-left', 단축 속성인 'margin')은 block으로 표현되는 모든 요소에 사용할 수 있으며 요소 외부에 여백을 추가한다. 패딩 속성('padding-top', 'padding-right', 'padding-bottom', 'padding-left', 단축 속성인 'padding')은 모든 요소에 사용할 수 있으며 요소 내부에 여백을 추가한다.
아래 예는 두 부분으로 나누어진다. CSS 코드는 테이블 사방의 마진과 테이블 셀의 패딩을 지정하며, HTML 코드는 스페이서 이미지를 포함하지 않고 다른 테이블 안에 중첩되지 않은 테이블을 구성한다.
예제 코드:
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
...
<table summary="웹 개발 카테고리에 속하는 책의 제목, 작가, 발행일">
<caption>'웹 개발' 카테고리에 속하는 책</caption>
<thead>
<tr>
<th>제목</th>
<th>작가</th>
<th>발행일</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>2007년 4월 1일</td>
</tr>
</tbody>
</table>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
이 기법의 시험 방법은 제공하지 않음.
CSS를 지원하는 모든 기술
이 기법과 관련된 항목:
이 기법은 CSS의 text-align 속성을 사용해서 텍스트 블록을 좌측이나 우측으로 정렬하는 방법을 설명한다.
텍스트를 좌측으로 정렬하는 예이다. 스타일 시트에서 아래 클래스를 정의한다:
예제 코드:
p.left {text-align: left}
위에서 정의한 클래스를 콘텐츠에 적용한다.
예제 코드:
<p class="left"> Lorem ipsum dolor sit ...</p>
텍스트를 우측으로 정렬하는 예이다.
예제 코드:
p.right {text-align: right}
위에서 정의한 클래스를 콘텐츠에 적용한다.
예제 코드:
<p class="right"> Lorem ipsum dolor sit ...</p>
텍스트를 좌측, 또는 우측으로 정렬했는지 확인한다.
#1의 확인 결과가 참.
CSS
이 기법과 관련된 항목:
이 기법은 사용자가 콘텐츠를 80자 이내의 행 길이로 볼 수 있도록 CSS를 적용하는 것을 보장하기 위함이다. 이렇게 하면 긴 텍스트 행을 주시해서 읽는데 어려움을 겪는 읽기 장애나 시력 장애 사용자가 콘텐츠를 더 효과적으로 보고 또 상호 작용할 수 있게 된다. 또한 이 기법은 폰트 크기에 맞춰서 컬럼 너비를 늘려주기 때문에 텍스트 크기가 커질 때 일부 텍스트가 잘려 보이게 될 가능성도 줄여준다.
이 기법은 제작자가 CSS로 기본 화면(default view)의 텍스트 행 길이를 80자 이내로 제한하는 것을 강요하지 않는다는 점에 주의하라. 그보다 상대 길이 단위로 CSS 레이아웃을 처리하라는 권고를 따르면 사용자가 80자 이내의 행 길이로 콘텐츠를 보는 것이 불가능하도록 제작자가 컬럼 너비를 지정하는 것을 방지할 수 있다.
스타일 시트에서 div 너비를 em 단위로 지정한 예이다.
주: Internet Explorer 6 이하 버전은 CSS의 max-width 속성을 지원하지 않는다.
예제 코드:
#main_content {max-width: 70em}
이 콘텐츠 div 안에 텍스트 블록이 들어간다.
예제 코드:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>
스타일 시트에서 div 너비를 퍼센트 단위로 지정한 예이다.
예제 코드:
#main_content {width: 90%}
이 콘텐츠 div 안에 텍스트 블록이 들어간다.
예제 코드:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
각각의 컬럼을 상대 길이 단위로 정의했는지 확인한다.
브라우저 창 크기를 조절해서 행 길이를 80자 이내로 설정할 수 있는지 확인한다.
#1과 #2의 확인 결과가 참.
CSS를 지원하는 모든 기술
이 기법과 관련된 항목:
인지 장애가 있는 많은 사람들이 행간(line spacing)이 좁은 텍스트 블록에서 텍스트 행을 따라가는데 어려움을 겪는다. 행간을 1.5에서 2 사이로 지정하면 이런 사용자들이 한 행을 읽고 나서 다음 행을 보다 쉽게 찾아갈 수 있다.
스타일 시트에서 p 요소의 행간을 1.5로 지정한 예이다.
예제 코드:
p { line-height: 150%; }
문서 전체에서 콘텐츠의 p 요소 행간이 1.5가 되었다.
예제 코드:
<p> Lorem ipsum dolor sit ... </p>
스타일 시트에서 클래스를 정의하고 행간을 1.5로 지정했다.
예제 코드:
p.tall {line-height:150%}
위에 정의한 클래스를 콘텐츠에 적용한다.
예제 코드:
<p class="tall"> Lorem ipsum dolor sit ... </p>
스타일 시트에서 클래스를 정의하고 행간을 2로 지정했다.
예제 코드:
p.tall {line-height:200%}
위에서 정의한 클래스를 콘텐츠에 적용한다.
예제 코드:
<p class="tall"> Lorem ipsum dolor sit ... </p>
브라우저에서 콘텐츠를 연다.
텍스트 블록에서 행 사이 간격이 1.5에서 2 사이인지 확인한다.
#2의 확인 결과가 참.
CSS를 지원하는 모든 기술
이 기법과 관련된 항목:
이 기법은 텍스트의 시각적인 표현을 CSS로 어떻게 제어할 수 있는지 보여주기 위함이다. 이 기법을 사용하면 사용자가 사용자 에이전트를 통해서 자신의 요구에 맞게 텍스트의 시각적인 특성을 변경할 수 있다. 텍스트 특성은 크기나 색상, 폰트 패밀리, 상대적인 위치 같은 것들을 포함한다.
CSS가 접근성에 도움을 주는 주된 이유는 문서 구조에서 표현을 분리하기 때문이다. 스타일 시트는 마크업 외부에서 글자 사이의 간격, 텍스트 정렬, 페이지 내부의 객체 배치, 소리와 음성 출력, 폰트 특성 등을 세밀하게 제어할 수 있게 만들어졌다. 제작자는 마크업에서 스타일을 분리함으로써 콘텐츠의 마크업을 간결하게 할 수 있고, 동시에 접근성도 향상시킬 수 있다.
이미지 내부의 텍스트(이미지 텍스트)는 아래 사항이 불가능한 것을 포함해서 접근성 측면에서 몇 가지 문제를 안고 있다.
브라우저 설정에 따른 확대/축소
브라우저 설정이나 사용자 정의 스타일 시트 규칙에서 지정한 색상으로 표현
고 대비 모드 같은 운영체제 설정을 이행
이런 요소에는 텍스트 부분에 실제 텍스트를 사용하고, 의미 있는 마크업과 스타일 시트를 사용해서 적절한 시각적인 화면을 제공하는 것이 더 나은 방법이다. 이 방법을 효과적으로 사용하려면 사용자의 시스템에서 이용할 수 있을만한 폰트를 선택하고, 지정한 첫 번째 폰트를 갖고 있지 않은 사용자들을 위해서 대체 폰트를 지정해야 한다. 대부분의 새로운 장치와 사용자 에이전트는 모든 텍스트를 부드럽게 또는 안티-앨리어스 처리해서 표현하므로 이런 시스템에서는 이미지 텍스트를 사용하지 않고도 제목과 버튼을 멋지게 표현할 수 있을 것이다.
아래는 텍스트에 스타일을 부여하고 이미지 텍스트 사용을 피하는데 유용한 CSS 속성이다.
font-family 속성은 코드를 monospace 폰트 패밀리로 표현하는데 사용할 수 있다.
text-align 속성은 텍스트를 뷰포트의 우측 방향으로 표현하는데 사용할 수 있다.
font-size 속성은 텍스트를 더 큰 폰트 크기로 표현하는데 사용할 수 있다.
font-style 속성은 텍스트를 이탤릭체로 표현하는데 사용할 수 있다.
font-weight 속성은 텍스트의 글자를 두껍게 또는 가늘게 조절하는데 사용할 수 있다.
color 속성은 텍스트나 텍스트 컨테이너의 색상을 표현하는데 사용할 수 있다.
line-height 속성은 텍스트 블록의 행간을 표현하는데 사용할 수 있다.
text-transform 속성은 텍스트의 대소문자를 제어하는데 사용할 수 있다.
letter-spacing 속성은 텍스트의 글자 사이 간격을 제어하는데 사용할 수 있다.
background-image 속성은 텍스트가 아닌 배경에 텍스트를 표현하는데 사용할 수 있다.
:first-line 수도 요소는 텍스트 블록에서 첫 번째 행의 표현을 바꾸는데 사용할 수 있다.
:first-letter 수도 요소는 텍스트 블록에서 첫 번째 글자의 표현을 바꾸는데 사용할 수 있다.
:before와 :after 수도 요소는 텍스트 블록 앞뒤에 텍스트가 아닌 장식적인 콘텐츠를 추가하는데 사용할 수 있다.
XHTML 부분:
예제 코드:
<p>문자열을 대문자로 변환하는 자바스크립트 메서드는 <code>toUpperCase()</code>.</p>
CSS 부분:
예제 코드:
code { font-family:"Courier New", Courier, monospace }
XHTML 부분:
예제 코드:
<p class="right">이 텍스트는 뷰포트 오른쪽으로 배치된다.</p>
CSS 부분:
예제 코드:
.right { text-align: right; }
XHTML 부분:
예제 코드:
<p>2008년 <strong class="largersize">3월</strong> 9일</p>
CSS 부분:
예제 코드:
strong.largersize { font-size: 1.5em; }
주: 이 예제에 사용한 스타일은 정보나 구조, 관계를 전달하려는 목적이 아니다.
XHTML 부분:
예제 코드:
<p>2008년 <em class="highlight">3월</em> 9일</p>
CSS 부분:
예제 코드:
.highlight{ color: red; }
주: 이 예제에 사용한 스타일은 정보나 구조, 관계를 전달하려는 목적이 아니다.
XHTML 부분:
예제 코드:
<p>해당 문서는 <a href="http://www.example.com" class="featuredsite">내분비학
블로그</a>에서 확인할 수 있습니다.</p>
CSS 부분:
예제 코드:
.featuredsite{ font-style:italic; }
주: 이 예제에 사용한 스타일은 정보나 구조, 관계를 전달하려는 목적이 아니다.
XHTML 부분:
예제 코드:
<p>그 거래를 <span class="highlight">지금 당장</span> 하실 수 있습니다.</p>
CSS 부분:
예제 코드:
.highlight { font-weight:bold; color:#990000; }
주: 이 예제에 사용한 스타일은 정보나 구조, 관계를 전달하려는 목적이 아니다.
XHTML 부분:
예제 코드:
<p>2008년 <span class="caps">3월</span> 9일</p>
CSS 부분:
예제 코드:
.caps { text-transform:uppercase; }
CSS의 line-height 속성을 사용해서 문단의 행간을 폰트 크기의 두 배로 표현했다.
XHTML 부분:
예제 코드:
<p>인류와 인류의 운명에 관심을 갖다 보면<br />
필연적으로 모든 기술적인 시도에 흥미를 느끼게 된다. <br />
도표와 방정식 속에 빠져서 이런 흥미를 잃어서는 안 된다.</p>
CSS 부분:
예제 코드:
p { line-height:2em; }
CSS의 line-height 속성을 사용해서 텍스트의 행간을 폰트 크기보다 작게 표현했다. 텍스트의 두 번째 행은 첫 번째 행 뒤에 위치하고 시각적으로는 첫 번째 행의 일부가 약간 아래로 처진 것처럼 보인다.
XHTML 부분:
예제 코드:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
CSS 부분:
예제 코드:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }
CSS의 letter-spacing 속성을 사용해서 텍스트의 두 번째 행에 있는 글자 사이 간격을 좁게 표현했다.
XHTML 부분:
예제 코드:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
CSS 부분:
예제 코드:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }
CSS의 letter-spacing 속성을 사용해서 제목의 글자 사이 간격을 늘려서 표현했다.
XHTML 부분:
예제 코드:
<h1 class="upper2">News</h1>
CSS 부분:
예제 코드:
.upper2 { text-transform:uppercase; letter-spacing:1em; }
CSS의 font-style 속성을 사용해서 배너의 텍스트 부분을 표현했고, background-image 속성을 사용해서 텍스트 뒤쪽으로 이미지를 표현했다.
XHTML 부분:
예제 코드:
<div id="banner"><span id="bannerstyle1">Welcome</span>
<span id="bannerstyle2">to your local city council</span></div>
CSS 부분:
예제 코드:
#banner {
color:white;
background-image:url(banner-bg.gif);
background-repeat:no-repeat;
background-color:#003399;
width:29em;
}
#bannerstyle1 {
text-transform:uppercase;
font-weight:bold;
font-size:2.5em;
}
#bannerstyle2 {
font-style:italic;
font-weight:bold;
letter-spacing:-0.1em;
font-size:1.5em;
}
CSS의 :first-line 수도 요소를 사용해서 텍스트 첫 행의 폰트 크기를 키우고 빨간색으로 표현했다.
XHTML 부분:
예제 코드:
<p class="startline">옛날 옛적에...<br />
...멀고도 먼 나라에서... </p>
CSS 부분:
예제 코드:
.startline:first-line { font-size:2em; color:#990000; }
CSS의 :first-letter 수도 요소를 사용해서 텍스트의 첫 번째 글자를 큰 폰트 크기와 빨간색, 세로 중앙 정렬로 표현했다.
XHTML 부분:
예제 코드:
<p class="startletter">옛날 옛적에...</p>
CSS 부분:
예제 코드:
.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
CSS 속성을 사용해서 텍스트의 시각적인 표현을 제어했는지 확인한다.
#1의 확인 결과가 참.
CSS를 사용하는 페이지
이 기법과 관련된 항목:
대부분의 브라우저에서 웹 페이지의 CSS와 HTML 색상 조합을 사용자가 재정의할 수 있다. 이런 기능은 Internet Explorer, Firefox, Mozilla, Netscape, 그리고 Opera 6 이후 버전에서 지원된다.
Firefox와 Netscape에서 웹 페이지에 지정한 색상을 사용자가 재정의하면 대부분의 자바스크립트 팝업과 드롭 다운 메뉴를 제대로 사용할 수 없게 된다. 팝업 박스는 배경이 투명해지기 때문에 페이지 텍스트 위에 팝업 박스의 텍스트가 겹쳐지게 되고, 드롭 다운 메뉴에는 투명이나 어두운 회색 배경이 적용된다.
역주) Firefox 3.5.11 버전에서는 위 문제가 발생하지 않는다. 구 버전을 언급하는 내용일 가능성이 크다고 생각한다.
Internet Explorer 6는 재정의하려는 배경색과 동일한 색상을 시스템 설정에서 지정했을 때에만 배경색을 재정의할 수 있다.
일부 웹 페이지는 색상을 사용해서 서로 다른 영역을 구분한다. 이 기법은 웹 페이지의 영역과 구조에 관한 시각적인 정보를 그대로 유지하면서 주 콘텐츠의 텍스트와 배경색 조합을 사용자가 선택할 수 있도록 하기 위함이다. 페이지의 모든 텍스트에서 전경과 배경색을 사용자가 재정의하면 웹 페이지의 영역과 구조에 관한 시각적인 정보를 잃을 수 있고, 그러면 웹 페이지를 이해하고 사용하는데 더 큰 어려움을 줄 수 있다.
주 콘텐츠의 텍스트와 배경색을 제작자가 지정하지 않으면 사용자 스타일 시트로 색상을 재정의하지 않고도 브라우저에서 주 콘텐츠 영역의 색상을 변경할 수 있다. 부가 콘텐츠의 텍스트와 배경색을 지정한다는 것은 지정한 색상을 브라우저가 재정의하지 않는다는 것을 뜻한다.
이 기법에서 제작자는 주 영역의 텍스트와 배경색으로 기본 색상을 사용한다. 그러면 주 영역의 색상은 사용자 에이전트가 사용자의 색상 설정에 따라 결정하게 된다. 사용자는 자신에게 맞는 최적의 색상 조합을 선택할 수 있고, 텍스트를 효과적으로 읽을 수 있게 된다.
CSS를 사용해서 HTML 웹 페이지의 내비게이션 모음, 메뉴 모음, 목차 같은 모든 부가 콘텐츠의 텍스트와 배경 색상을 지정했다. 주 콘텐츠의 텍스트와 배경 색상은 지정하지 않았다. 사용자가 브라우저에서 자신만의 색상을 지정하면 자신에게 맞는 색상과 대비로 주 콘텐츠를 볼 수 있게 된다. 페이지의 각각의 영역은 여전히 시각적으로 명확하게 구별된다.
흰색 배경에 파란색 텍스트를 사용하는 음악 잡지의 기사가 있다. 이 사이트는 별도의 스타일 시트를 페이지에 연결해주는 링크를 페이지 맨 앞부분에서 제공한다. 새로운 스타일 시트에는 텍스트와 배경에 어떠한 색상도 지정하지 않았다.
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
브라우저 설정에서 텍스트, 링크, 배경색을 기본 색상이나 부가 콘텐츠에 지정한 색상이 아닌 다른 색상으로 변경한다.
주: 브라우저가 페이지에 지정한 색상을 무시하도록 하는 옵션은 선택하지 않아야 한다.
새로운 텍스트, 링크, 배경 색상으로 주 콘텐츠를 확인한다.
부가 콘텐츠의 텍스트, 링크, 배경 색상이 변하지 않는지 확인한다.
#2와 #3의 확인 결과가 참.
CSS를 사용하는 페이지
이 기법과 관련된 항목:
이 기법은 폰트 크기를 키워서 텍스트를 읽어야 하는 사용자가 가로 스크롤을 하지 않고도 텍스트 한 행을 읽을 수 있게 하기 위함이다. 이 기법을 사용하려면 제작자가 텍스트 컨테이너의 너비를 퍼센트 값으로 지정해야 한다.
브라우저 창 중앙에 콘텐츠가 있는 신문이 있다. 콘텐츠를 담고 있는 컨테이너의 너비를 페이지의 퍼센트 값으로 지정했다. 시력이 나쁜 사용자가 폰트 크기를 키우면 브라우저 창 안에서 텍스트가 새로운 크기로 다시 렌더링되기 때문에 가로 스크롤을 할 필요가 없어진다.
컨테이너 너비를 모두 퍼센트 값으로 지정했는지 확인한다.
텍스트 크기를 두 배(200%)로 키운다.
가로 스크롤을 하지 않고도 모든 텍스트 행을 읽을 수 있는지 확인한다.
페이지의 모든 텍스트가 여전히 보이는지 확인한다.
#1, #3, #4의 확인 결과가 참.
CSS를 사용하는 페이지
이 기법과 관련된 항목:
이 기법은 CSS로 보더와 레이아웃을 지정하고 텍스트와 배경색은 사용자의 브라우저나 운영 체제 설정에 따라 렌더링할 수 있도록 지정하지 않기 위함이다. 이 기법을 사용하면 사용자가 자신이 원하는 색상으로 텍스트를 볼 수 있으면서 동시에 텍스트와 배경색을 제외한 레이아웃과 페이지 디자인 특성(텍스트 컬럼이나 섹션을 둘러싸는 보더, 메뉴와 주 콘텐츠 영역 사이의 구분 선 등)은 그대로 유지하게 된다. 또한 일부 브라우저에서 자바스크립트 팝업 박스나 드롭 다운 메뉴를 포함하는 페이지의 색상을 재지정할 때 발생하는 문제를 예방하는 효과도 있다.
텍스트와 배경색의 유연성처럼 보더와 시각적인 레이아웃 표시(layout indicators) 역시 인지 장애를 겪는 많은 사용자에게 도움이 된다. 하지만 때로는 이런 두 가지 요구가 충돌하기도 한다. 제작자가 지정한 텍스트와 배경색을 사용자가 브라우저에서 재지정해야 하고, 브라우저는 제작자가 의도한 레이아웃과 보더까지 제거하는 경우이다. 그러면 콘텐츠 블록이 세로로 이어지는 단일 컬럼으로 페이지를 표현하기 때문에 불필요한 여백이 많아지고 텍스트 행이 길어질 수 있다. 또한 팝업 박스는 배경이 투명해지기 때문에 페이지 텍스트 위에 팝업 박스의 텍스트가 겹쳐지게 되고, 드롭 다운 메뉴에는 투명이나 어두운 회색 배경이 적용될 수 있다. 웹 제작자가 보더 색상과 레이아웃을 지정하면서 텍스트와 배경색은 지정하지 않으면 주요 브라우저에서 제작자가 지정한 다른 CSS 선언에 영향을 주지 않고도 텍스트와 배경색을 변경할 수 있다.
HTML로 구조화한 웹 페이지가 있다. CSS를 사용해서 페이지의 분리된 영역에 보더를 지정하고 주 콘텐츠 왼쪽에 메뉴가 배치되도록 레이아웃을 구성했다. 텍스트와 배경 색상은 둘 다 지정하지 않았다. 사용자가 브라우저에서 자신만의 색상을 설정하면 레이아웃에 영향을 주지 않고도 자신에게 맞는 색상과 대비로 페이지를 볼 수 있게 된다.
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
HTML 콘텐츠의 색상 변경을 지원하는 브라우저에서 웹 페이지를 연다.
브라우저 설정에서 텍스트, 링크, 배경색을 현재 적용된 색상이 아닌 다른 색상으로 변경한다.
주: 브라우저가 페이지에 지정한 색상을 무시하도록 하는 옵션은 선택하지 않아야 한다.
브라우저가 새로 지정한 텍스트, 링크, 배경색으로 페이지를 표현하는지 확인한다.
모든 보더를 여전히 표현하고 페이지의 레이아웃을 유지하는지 확인한다.
#3과 #4의 확인 결과가 참.
CSS를 사용하는 페이지
이 기법과 관련된 항목:
가로 스크롤이 반드시 필요한 레이아웃을 제작자가 사용해야 하는 경우도 있다. 이러한 경우에는 가로 스크롤을 하지 않고도 사용자가 텍스트 한 행을 읽을 수 있는 레이아웃으로 전환하는 옵션을 콘텐츠 안에서 제공하면 된다. 일반적인(standard) 스타일 전환 기술을 사용하면 이런 방식을 적용할 수 있다.
콘텐츠 접근에 가로 스크롤이 필요한 방식으로 콘텐츠를 배치하더라도 텍스트 한 행을 가로 스크롤 없이 읽을 수 있으면 이 또한 무방하다는 점에 유의할 필요가 있다.
예를 들어서 가로 스크롤이 필요한 스프레드시트에서 가로 스크롤 없이도 각각의 컬럼을 개별적으로 볼 수 있다면 문제가 없다. (즉 다른 컬럼을 볼 때에만 스크롤이 필요하고, 개별적인 컬럼의 왼쪽이나 오른쪽 끝은 스크롤 없이 볼 수 있는 경우이다. 하지만 이런 경우를 완전하고 명확한 방식으로 설명하기는 어렵다.)
주: 지침을 만족하지 못하는 콘텐츠의 지침에 부합하는 대체 버전 페이지를 제공하기 위해서 이 기법과 스타일 전환 기법을 조합해서 사용할 수 있다.자세한 정보는 C29: 스타일 전환 방식(스위처)을 사용해서 지침에 부합하는 대체 버전 제공과 지침에 부합하는 대체 버전 이해하기를 참고하라.
부동산 회사가 제공하는 온라인 연간 보고서는 인쇄 버전과 동일한 레이아웃을 갖고 있어서 텍스트 한 행을 읽으려면 가로 스크롤을 해야 한다. 하지만 페이지 안에 스타일 시트를 전환해서 가로 스크롤이 필요 없는 레이아웃을 제공하는 컨트롤이 있다.
금융 스프레드시트를 온라인으로 제공하는 사이트가 있다. 이 스프레드시트는 1월의 주택 시장 변화를 설명하고 있다. 스크린 영역 오른쪽 밖에는 9월의 시장 변화를 설명하는 컬럼이 있다. 사용자는 9월 영역으로 가로 스크롤할 수 있고, 윈도우 창이 최대 크기일 때 더 이상 스크롤을 하지 않고도 각각의 텍스트 행을 읽을 수 있다.
전체 화면 창에서 가로로 스크롤을 해야 하는 콘텐츠를 연다.
사용자가 가로 스크롤을 하지 않고도 텍스트 한 행을 읽을 수 있는 레이아웃으로 전환하는 옵션이 콘텐츠 안에 있는지 확인한다.
옵션을 활성화한다.
가로 스크롤을 하지 않고도 모든 텍스트 행을 읽을 수 있는지 확인한다.
#2와 #4의 확인 결과가 참.
HTML이나 XHTML과 함께 사용되는 CSS
이 기법과 관련된 항목:
이 기법은 소스 코드의 콘텐츠 순서와 시각적으로 표현되는 콘텐츠 순서가 같도록 보장하기 위함이다. 제작자는 CSS로 소스 코드의 콘텐츠 순서를 다양한 시각적인 표현으로 바꿀 수 있다. 이런 각각의 (시각적인) 콘텐츠 순서에는 그 자체의 의미가 있을 수 있지만 보조 기술을 이용하는 사용자에게는 혼란을 줄 수 있다. 이런 혼란은 제작자가 지정한 스타일을 사용자가 제거하거나 소스 코드에서 콘텐츠에 직접 접근할 경우(스크린 리더 등으로), 또는 키보드로 콘텐츠와 상호 작용할 때 발생할 수 있다. 소스 순서대로 접근하는 스크린 리더를 사용해서 페이지를 읽는 시각 장애 사용자가 시각적인 순서대로 페이지를 읽는 비시각 장애 사용자와 함께 일할 때 정보의 순서가 서로 다르면 혼란을 줄 수 있다. 화면 확대기와 스크린 리더를 함께 사용하는 저시력 사용자는 읽어주는 순서가 화면에서 건너뛰면 혼란할 수 있다. 소스상의 순서와 시각적인 순서가 일치하지 않으면 키보드 사용자는 포커스가 다음에 어디로 이동할 지 예상하는데 어려움을 겪을 수 있다.
또한 시각적인 표현 순서가 페이지를 전체적으로 이해하는데 필수적인 상황도 있을 수 있다. 그래서 소스상의 순서를 시각적으로 다르게 표현하면 이해하기가 훨씬 어려워질 수 있다.
소스상의 순서와 시각적인 순서가 일치하면 모든 사용자가 동일하고 정확한 순서로 콘텐츠를 읽고 상호 작용할 수 있다.
주: HTML에서 tabindex 속성은 두 가지 기능을 한다. 첫 번째는 요소가 포커스를 가질 수 있게 하는 것이고, 두 번째는 포커스 순서에서 하나의 위치를 요소에 할당하는 것이다. tabindex 0 값은 요소가 포커스를 가질 수 있게 하지만 포커스 순서는 소스 요소의 순서를 따르게 된다. 포커스 순서는 tabindex의 양수 값이 작은 요소부터 큰 요소로 이동한다. 문서 객체 모델(DOM)의 요소 순서와 일치하지 않는 순서로 tabindex 값을 설정한다는 것은 설정한 순서가 보조 기기 사용자들에게는 정확하지 않다는 의미일 수 있다. 이렇게 되는 주된 요인은 CSS가 아닌 HTML이나 XHTML에서 tabindex 속성을 지정하기 때문이다. 이 부분은 향후의 명세서에서 달라질 수도 있다. 설정한 순서는 시각적인 표현 순서와도 다를 수 있다.
온라인 신문의 내비게이션 바를 머리글자를 딴 로고 바로 아래로 페이지 왼쪽 끝에 보이도록 배치했다. 소스 코드에서 내비게이션 요소는 로고를 표현하는 요소 다음에 위치한다.
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
마이크로소프트 Internet Explorer 개발자 툴바. 마이크로소프트 Internet Explorer에서 스크립트상으로 생성한 DOM을 확인할 수 있도록 해준다.
파이어버그. Firefox에서 스크립트상으로 생성한 DOM을 확인할 수 있도록 해준다.
최종 사용자가 보는 것처럼 웹 페이지의 콘텐츠 순서를 시각적으로 검사한다.
DOM을 확인할 수 있는 도구를 사용해서 DOM 상의 요소를 검사한다.
소스 코드 섹션의 콘텐츠 순서와 웹 페이지의 시각적인 콘텐츠 순서가 일치하는지 확인한다. (영어로 된 페이지를 예로 들면 위에서 아래로, 왼쪽에서 오른쪽 순서이다.)
#3의 확인 결과가 참.
CSS
이 기법과 관련된 항목:
Internet Explorer 6는 윈도우의 고 대비 모드에서 중첩된 테이블 안에 있는 퍼센트 기반 폰트를 훨씬 크게 리사이즈한다. Firefox와 이후 버전의 Internet Explorer는 고 대비 모드에서 폰트를 리사이즈하지 않으므로 이런 문제가 발생하지 않는다.
이 기법은 텍스트를 포함하거나 텍스트 입력을 받을 수 있는 컨테이너의 너비나 높이(또는 둘 다)를 em 단위로 지정하기 위함이다. 이렇게 하면 텍스트 크기 조절을 지원하는 사용자 에이전트가 텍스트 크기 설정에 맞춰서 텍스트 컨테이너의 크기까지 리사이즈할 수 있게 된다.
다른 단위로 텍스트 컨테이너의 크기를 설정하면 텍스트 크기를 키울 때 텍스트가 컨테이너 영역 밖으로 떨어져서 텍스트가 잘릴 위험이 있다.
컨테이너는 보통 웹 페이지 안에서의 텍스트 배치를 제어하고, 레이아웃 요소나 구조 요소, 폼 컨트롤도 포함할 수 있다.
예제에서 "nav_menu" id 값을 갖는 div 요소를 사용해서 웹 페이지 주 콘텐츠 왼쪽에 내비게이션 메뉴를 배치했다. 내비게이션 메뉴는 텍스트 링크 목록으로 구성했고, 목록에는 "nav_list" id를 지정했다. 내비게이션 링크의 텍스트 크기와 (내비게이션 링크를 포함하는) 컨테이너의 너비를 em 단위로 지정했다.
예제 코드:
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }
예제에서 텍스트를 포함하거나 사용자의 텍스트 입력을 받는 input 요소에 "form1" 이라는 클래스명을 지정했다. CSS 규칙을 사용해서 폰트 크기는 퍼센트 단위로, 요소의 너비는 em 단위로 지정했다. 이렇게 하면 텍스트 크기 설정에 맞춰서 텍스트가 잘리는 현상 없이 폼 컨트롤 내의 텍스트가 리사이즈된다. (폰트 크기에 따라 폼 컨트롤 자체의 너비가 늘어나고 줄어들기 때문이다.)
예제 코드:
input.form1 { font-size: 100%; width: 15em; }
예제에서 select 요소에는 "pick"이라는 클래스명이 지정되어 있다. CSS 규칙을 사용해서 폰트 크기는 퍼센트 단위로, 요소의 너비는 em 단위로 지정했다. 이렇게 하면 텍스트 크기 설정에 맞춰서 텍스트가 잘리는 현상 없이 폼 컨트롤 내의 텍스트가 리사이즈된다.
예제 코드:
input.pick { font-size: 100%; width: 10em; }
예제에서 선택 박스와 라디오 버튼을 정의하는 input 요소에 "choose"라는 클래스명을 지정했다. CSS 규칙을 사용해서 해당 요소의 너비와 높이를 em 단위로 지정했다. 이렇게 하면 텍스트 크기 설정에 맞춰서 폼 컨트롤이 리사이즈된다.
예제 코드:
input.choose { width: 1.2em; height: 1.2em; }
텍스트를 포함하거나 텍스트 입력을 받는 컨테이너를 찾는다.
컨테이너의 너비나 높이(또는 둘 다)를 em 단위로 지정했는지 확인한다.
#2의 확인 결과가 참.
클라이언트측 또는 서버측 스크립트와 함께 사용하는 CSS
이 기법과 관련된 항목:
기본으로 보이는 웹 페이지가 일부 측면에서 달성 기준을 만족하지 못할 때 부합성(conformance) 요구 사항(부합성 요구 사항 1)에 명시된 "대체 버전"을 사용해서 해당하는 요구 사항을 만족할 수 있다. 페이지의 모든 측면이 주장하는(claimed) 수준을 만족하도록 시각적인 표현을 조절할 수 있는 스타일 스위처를 웹 페이지의 링크나 컨트롤을 통해 적용하면 몇 가지 요구 사항 때문에 제작자가 동일한 정보를 여러 버전으로 제공하는 것을 피할 수 있다.
이 기법은 지침에 부합하는 대체 버전 웹 페이지를 제공하는데 스크립트와 조합한 CSS를 어떻게 사용할 수 있는지 보여주기 위함이다. 이 기법에서 제작자는 콘텐츠의 시각적인 표현을 제어하는 CSS를 조절하는 컨트롤을 제공하는 방식으로 콘텐츠의 대체 화면(view)을 제공한다. 사용자는 웹 페이지 내에 제공되는 컨트롤을 사용해서 (제작자가) 주장하는 수준의 달성 기준을 만족하도록 화면을 선택하거나 변경할 수 있게 된다. 이렇게 하면 다음과 같은 상황에서 사용자가 서로 다른 시각적인 화면을 선택할 수 있도록 해준다.
사용자가 브라우저나 운영 체제 설정을 변경하는데 익숙하지 않거나 변경할 권한이 없는 경우
텍스트가 브라우저나 운영 체제 설정에 반응하지 않는 방식으로 제공되는 경우 (이미지로 처리한 텍스트 같은)
기본적으로 제공하는 화면의 대비가 일부 사용자에게 충분하지 않은 경우
이 기법을 성공적으로 사용하려면 아래 세 가지 사항을 반드시 만족해야 한다.
원래 페이지의 링크나 컨트롤은 그 자체가 반드시 대체 화면을 통해서 만족하려는 달성 기준을 만족해야 한다. 예를 들어서 크기가 큰 폰트를 제공하기 위해 사용하는 스타일 스위처에서 컨트롤을 작은 폰트로 표시한다면 사용자가 컨트롤을 활성화해서 대체 화면을 보는데 어려움을 겪을 수도 있다.
새로운 페이지는 반드시 원래 페이지와 동일한 정보를 포함하고 동일한 기능을 제공해야 한다.
새로운 페이지는 원하는 부합성 수준의 모든 달성 기준을 반드시 준수해야 한다. 예를 들어서 하나의 요구 조건을 만족하려고 사용한 대체 스타일 시트로 인해서 다른 요구 조건을 만족하지 못하게 되는 경우에는 사용할 수 없다.
스타일 스위처를 사용할 때는 다음과 같은 문제와 한계를 고려하는 것이 중요하다.
사용자가 변경할 수 있는 개수와 형식은 웹 페이지 제작자가 제공하는 컨트롤의 범위에 국한된다. 가능한 가장 넓은 범위의 사용자 요구를 만족하려면 다양한 화면과 설정을 제공해야 한다. 하지만 설정간의 상호 작용과 사용자에게 다수의 옵션을 제공할 때 발생할 수 있는 사용자의 복잡성을 고려하는 것 또한 중요하다.
사용자의 컴퓨터나 장치에 쿠키를 보관하거나(자세한 정보는 참고 자료 확인) 쿼리 스트링 매개 변수를 전달해서 사용자 설정을 웹 서버에 저장하는 프로파일에 포함하는 방법, 또는 그 외의 방법을 사용하면 페이지가 변경되더라도 사용자의 설정을 유지할 수 있다.
스타일 스위처를 구현하는데 사용하는 기술적인 방법은 사용자의 장치가 하나 이상의 다른 기술을 지원하는지 여부에 종속될 수 있다. (예를 들어서 클라이언트측에서 사용하는 대부분의 방법은 자바스크립트와 CSS를 둘 다 지원해야 한다.) 부합성 만족이 이러한 기술 지원에 의존적이지 않고, 클라이언트측이 이런 기술을 지원하는지 확신할 수 없다면 제작자는 서버측 기술 사용을 고려하는 것이 좋다. 다른 방법으로, 사용한 한 가지 이상의 기술을 지원하지 않더라도 콘텐츠의 적절한(gracefully) 변환을 보장하는 기술을 사용하면 부합성 만족이 기술 지원에 의존적이지 않은 상황에서 페이지의 접근성을 향상하는 효과적인 방법이 될 수 있다.
자바스크립트를 사용해서 페이지의 텍스트와 배경색을 변경하는 링크를 제공하는 페이지의 예이다. 기능을 수행하는 링크는 사용자 시스템이 자바스크립트를 지원하고 또 사용 가능할 때에만 삽입해야 한다. 그렇지 않으면 링크를 선택하더라도 원하는 변화가 생기지 않을 것이다. 스크립트를 사용해서 링크 자체를 삽입하면 원하는 결과를 얻을 수 있다. (스크립트를 지원하고 또 사용 가능할 때에만 링크가 존재한다는 의미이다.)
아래 코드는 자바스크립트에 의존적인 색상 변경 링크와 웹 페이지의 일부 콘텐츠, 연결되는 스타일 시트 규칙과 색상 변경 링크를 선택할 때 사용하는 자바스크립트 코드(스타일 시트를 변경)이다.
이 예제는 현재 보고 있는 페이지에만 적용된다. 실제로 사용자에게 서비스하는 환경에서는 이런 설정을 쿠키나 서버측 사용자 프로파일에 저장해서 사용자가 한 번만 선택하면 사이트 전체에 적용되도록 하는 방법을 권장한다.
XHTML 부분:
예제 코드:
In <head> section:
<link href="main.css" rel="stylesheet" type="text/css" />
<link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />
In <body> section:
<div id="colorswitch">
<p>색상 변경:</p>
<ul class="inline">
<li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;"
id="altColors1">어두운 파란색 배경에 흰색</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;"
id="altColors2">검은색 배경에 노란색</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;"
id="altColors3">노란색 배경에 검은색</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;"
id="altColors4">흰색 배경에 검은색</a></li>
<li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;"
id="default">기본 색상으로 돌리기</a></li>
</ul>
</div>
<div id="mainbody">
<h1>회의 보고서</h1>
<p>지난 주 회의에서 인상적인 발표자 명단을 공개했습니다...</p>
</div>
CSS 부분:
예제 코드:
In main.css:
body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
#mainbody {
padding: 1em;
}
#colorswitch {
float: right;
width: 12em;
border: 1px #000066 solid;
padding:0 1em 1em 1em; margin:0;
}
#colorswitch p {
padding-top:.5em;
font-weight:bold;
}
In defaultColors.css:
body, p {
color:#000000;
background-color:#FFFFFF;
}
h1, h2, h3 {
color:#990000;
background-color:#FFFFFF;
}
In altColors1.css:
body, h1, h2, h3, p, a {
color:#000066;
background-color:#FFFFFF;
}
In altColors2.css:
body, h1, h2, h3, p, a {
color:#FFFF33;
background-color:#000000;
}
In altColors3.css:
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFF99;
}
In altColors4.css:
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFFFF;
}
자바스크립트 부분:
예제 코드:
function changeColors (newCSS)
{
document.getElementById('currentCSS').href = newCSS;
}
이 코드가 실제로 동작하는 예제는 자바스크립트 컨트롤을 사용해서 서로 다른 외부 CSS 파일 적용하기 페이지에서 확인할 수 있다.
콘텐츠 섹션에 간단한 변화를 주는 예로, 복잡한 사이트나 페이지에서는 실용성이 떨어질 수 있다. 이 예제에서는 클라이언트측 자바스크립트로 클래스명을 변경하는 방법으로 사용자가 선택한 색상(정의된 옵션 중에서)을 특정한 콘텐츠 강조를 위한 배경색으로서 표현한다.
주: 아래 코드에서는 기법 이해를 돕기 위해서 XHTML 코드에서 자바스크립트를 호출한다. 하지만 제작자가 현 시점에서의 최선책(best practice)을 사용해서 자바스크립트를 포함하는 것을 권장한다. (참고 자료에서 겸손한(unobtrusive) 자바스크립트와 점진적인 향상에 관한 추가 정보를 얻을 수 있다.)
XHTML 부분:
예제 코드:
<h1>상품 비교</h1>
<p>귀하가 비교하려는 상품을 아래 나열했습니다.
Any differences between the products are highlighted and italicized.</p>
<p class="inlinePara">강조색 변경: </p>
<ul class="inline">
<li><a href="#" onClick="changeColor('hghltLightYellow');return false;"
class="hghltLightYellow">연한 노란색</a></li>
<li><a href="#" onClick="changeColor('hghltBrightYellow');return false;"
class="hghltBrightYellow">밝은 노란색</a></li>
<li><a href="#" onClick="changeColor('hghltLightBlue');return false;"
class="hghltLightBlue">연한 파란색</a></li>
<li><a href="#" onClick="changeColor('hghltBrightBlue');return false;"
class="hghltBrightBlue">밝은 파란색</a></li>
<li><a href="#" onClick="changeColor('hghltLightRed');return false;"
class="hghltLightRed">연한 빨간색</a></li>
<li><a href="#" onClick="changeColor('hghltDrkRed');return false;"
class="hghltDrkRed">어두운 빨간색</a></li>
</ul>
<table width="400" border="1">
<tr>
<td> </td>
<th scope="col">상품 1</th>
<th scope="col">상품 2</th>
</tr>
<tr>
<th scope="row">조건 1</th>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">조건 2</th>
<td class="hghltLightYellow">Yes</td>
<td class="hghltLightYellow">No</td>
</tr>
<tr>
<th scope="row">조건 3</th>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>
CSS 부분:
예제 코드:
body { color:#000000; background-color:#FFFFFF; }
.hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
.hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
.hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
.hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
.hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
.hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }
.inlinePara {display:inline; }
.inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
.inline li { display:inline; }
.inline li a {padding: 0.5em 1em; border: 2px solid #000000; }
자바스크립트 부분:
예제 코드:
function changeColor(hghltColor)
{
// 표의 데이터 셀을 배열에 담는다
var els = document.getElementsByTagName('td');
// 각각의 배열 항목에서 "hghlt"로 시작되는 클래스명을 찾는다
// 찾으면 클래스명을 현재 선택한 값으로 바꾼다
// 주: 이 스크립트는 'td'의 클래스 속성을 강조 표현에만 사용한다고 가정한다
for (var i=0; i<els.length; i++)
{
if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
}
}
이 코드가 실제로 동작하는 예제는 클라이언트측 자바스크립트를 사용해서 CSS 속성 변경하기 페이지에서 확인할 수 있다.
PHP의 $_GET을 사용해서 이용할 수 있는 두 개의 외부 스타일 시트 중 하나를 지정하는 간단한 예이다. PHP가 제공하는 다양한 기능을 사용해서 비슷한 기능을 구현할 수도 있다. 이 예제는 현재 보고 있는 페이지에만 적용된다. 실제로 사용자에게 서비스하는 환경에서는 이런 설정을 쿠키나 서버측 사용자 프로파일에 저장해서 사용자가 한 번만 선택하면 사이트 전체에 적용되도록 하는 방법을 권장한다.
아래는 PHP 코드지만 다양한 서버측 기술에서 유사한 접근 방식을 적용할 수 있다.
PHP와 XHTML 부분:
예제 코드:
PHP 페이지의 맨 윗부분:
<?php
$thestyle = $_GET['set'];
if ($thestyle == "style1")
{
$thestyle = "style2";
}
else
{
$thestyle = "style1";
}
?>
<head> 영역:
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >
In <body> section:
<?php
if ($thestyle == "style1") {
echo "<a href=\"index.php?set=style1\">두 번째 스타일 시트로 전환</a>";
}
else {
echo "<a href=\"index.php?set=style2\">첫 번째 스타일 시트로 전환</a>";
}
?>
<div id="mainbody">
<h1>회의 보고서</h1>
<p>지난 주 회의에서 인상적인 발표자 명단을 공개했습니다...</p>
</div>
CSS 부분:
예제 코드:
In style1.css:
body, p { color:#000000; background-color:#FFFFFF; }
h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
In style2.css:
body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }
이 코드가 실제로 동작하는 예제는 PHP의 $_GET 변수를 사용해서 서로 다른 외부 CSS 파일 적용하기 페이지에서 확인할 수 있다.
아래 예제는 두 개의 파일을 사용한다.
폼과 폼 처리 코드를 포함하는 자바 서버 페이지(JSP)
위 자바 서버 페이지와 동일한 스타일을 적용하는 다른 페이지에서 사용하는 함수 파일 (include 되는 파일)
서버측 코드는 사용자가 선택한 스타일 시트를 연결하는 보통의 링크 요소와 새로운 스타일을 연결하는 "alternate stylesheet"로 지정한 링크 요소를 출력한다. 따라서 이 코드를 클라이언트측 코드를 사용하는 두 번째 예제의 대비책(fallback)으로 사용할 수 있다.
폼을 포함하는 JSP 페이지:
예제 코드:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
%><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>스타일 선택</title>
<%
String fStyle = "";
String styleName = "style";
String defaultStyle = "default";
Cookie[] cookies = request.getCookies();
// post 요청 변수에서 스타일을 얻는다
if (request.getMethod().equals("POST") && request.getParameter("styleSelect") != null) {
fStyle = request.getParameter("styleSelect");
// 보안을 위한 입력 검증 코드는 생략함
if (fStyle.equals("nostyle")) { // 사용자가 제작자 스타일 사용을 원하지 않는 경우
} else { // 사용자가 제작자 스타일을 원하는 경우
out.println(createStyleLinks(fStyle).toString());
}
storeStylePreferenceCookie(request, response, fStyle);
} else if (request.getMethod().equals("GET")) {
// GET 요청; 쿠키에서 스타일을 얻는다; 얻지 못하면 기본 스타일 링크 출력
// 쿠키에서 스타일 얻기
if (cookies != null) {
// 쿠키에서 스타일 얻기
fStyle = getStyleFromCookies(cookies);
if ( !fStyle.equals("NULL_STYLE") ) { // 사용자가 제작자 스타일을 원하는 경우
out.println(createStyleLinks(fStyle).toString());
} else { // 스타일을 위한 쿠키 없음; 선호하는 스타일에 맞춰서 요청 처리
// 기본 스타일 링크
out.println(createStyleLinks(defaultStyle).toString());
}
} else { // 쿠키가 없는 GET 요청: 기본 스타일 링크
out.println(createStyleLinks(defaultStyle).toString());
}//쿠키 없을 때 처리 끝
}
%>
</head>
<body id="home">
<form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
<p><label for="styleSelect">스타일 선택: </label>
<select id="styleSelect" name="styleSelect">
<option value="default">기본 (연한 녹색)</option>
<option value="wonb">검은색 배경에 흰색</option>
<option value="bonw">흰색 배경에 검은색</option>
</select>
<input type="submit" value="스타일 변경" />
</p>
</form>
</body>
</html>
위 파일에서 불러오는 styleswitcher.jsp 파일:
예제 코드:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
/**
* 쿠키를 기반으로 CSS 파일 링크(link 요소) 가져오기
*/
private String getStyleLinks(HttpServletRequest request) {
String styleLinks = "";
Cookie[] cookies = request.getCookies();
String defaultStyle = "default";
String tempStyle = "";
// GET 요청; 쿠키에서 스타일을 얻는다; 얻지 못하면 기본 스타일 링크 출력
// 쿠키에서 스타일 얻기
if (cookies != null) {
// 쿠키에서 스타일 얻기
tempStyle = getStyleFromCookies(cookies);
if ( tempStyle.equals("NULL_STYLE") ) {
// 스타일을 위한 쿠키 없음; 선호하는 스타일에 맞춰서 요청 처리
// 기본 스타일 링크
styleLinks = createStyleLinks(defaultStyle).toString();
} else { // 사용자가 제작자 스타일을 원하는 경우
styleLinks = createStyleLinks(tempStyle).toString();
}
} else { // 쿠키가 없는 GET 요청: 기본 스타일 링크
styleLinks = createStyleLinks(defaultStyle).toString();
}//쿠키 없을 때 처리 끝
return styleLinks;
}
/**
* 요청에서 스타일 쿠키 가져오기
*/
private String getStyleFromCookies( Cookie[] cookies ) {
String fStyle = "NULL_STYLE";
for (int i = 0; i < cookies.length; i++) {
Cookie cookie = cookies[i];
String name = cookie.getName();
if ( name.equals("style") ) {
fStyle = cookie.getValue();
// 보안을 위한 쿠키 값 검증 코드는 생략함
}
}
return fStyle;
}
/**
* 스타일 설정을 1년간 유지되는 쿠키에 담기
*/
private void storeStylePreferenceCookie(HttpServletRequest request,
HttpServletResponse response, String theStyle) {
final int ONE_YEAR = 60 * 60 * 24 * 365;
Cookie styleCookie = new Cookie("style", theStyle);
styleCookie.setMaxAge(ONE_YEAR);
response.addCookie(styleCookie);
}
/**
* 스타일 시트를 연결하는 link 요소 만들기
*/
private StringBuffer createStyleLinks(String prefStyle) {
StringBuffer theStyleLinks = new StringBuffer();
// 식별자와 (.css를 추가하면 CSS 파일명이 됨)
// link 요소의 title 속성으로 사용할 문자열이 있는 2차원 배열
// 식별자는 스타일 스위처 폼의 "option" 요소의 "value" 속성 값과
// 반드시 일치해야 함
String [] [] styles = {
{ "default", "Default style"},
{ "wonb", "White on black"},
{ "bonw", "Black on white"}
};
// 2차원 배열 순회: 만약 styles[i][1]과 prefStyle이 일치하면,
// 기본 스타일 시트 출력, 그렇지 않으면 대체 스타일 시트 출력
for (int i = 0; i < styles.length; i++) {
if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
.append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
} else { // output other stylesheets as alternate stylesheets
theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
.append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
.append("\" type=\"text/css\" />").append("\n");
}
} // for 루프 끝
return theStyleLinks;
}
%>
다른 JSP 페이지에서는 아래 include와 scriptlet 코드를 써서 이 코드를 사용할 수 있다.
역주) scriptlet 코드란 스크립트 언어에 유효하도록 자바 코드를 삽입하는 방식을 뜻한다.
예제 코드:
<%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %>
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
쿠키를 이용해서 사용자 컴퓨터에 정보를 보관하는 방식을 사용하면 페이지 전체에서 또는 다음 방문 시까지 사용자가 선택한 사항을 유지할 수 있다. 이 기능은 사용자의 컴퓨터가 쿠키를 지원하고 또 사용할 수 있어야 한다. 쿠키는 자바스크립트 같은 클라이언트측 스크립트나 CGI 같은 서버측 스크립트를 사용해서 만들고, 읽고, 변경하고, 삭제할 수 있다. 클라이언트측 기술에 의존한다는 것은 쿠키를 지원하고 허용하는 것뿐만 아니라 사용자 컴퓨터가 해당 기술을 지원하고 또 사용 가능해야 함을 요구한다.
쿠키를 만들고 사용하는 것에 관한 정보는 웹에서 찾을 수 있다. 참고할만한 페이지를 몇 개 추천한다.
제작자는 쿠키 지원을 확인해서 만약 쿠키를 지원하지 않으면 컨트롤을 추가로 제공하는 것이 좋다. 이 추가 컨트롤은 "선택을 모든 페이지에 적용"처럼 선택을 지속시키는 것에 관한 정보를 포함해야 한다. 추가 컨트롤을 선택했을 때 사용자가 보게 될 문구나 페이지는 쿠키를 사용하기 위한 요구 사항이나 이를 해결하기 위해 사용자가 선택할 수 있는 방법에 관한 정보를 제공한다. 사용자가 쿠키 지원을 활성화할 수 없을 때에는 사용자가 사이트를 계속 이용하려고 할 때 쿠키 지원이 어떤 의미를 갖는지 설명하고, 사용자 에이전트 설정으로 비슷한 결과를 얻을 수 있는 방법에 관한 정보를 제공하라.
예를 들어서 "사용하시는 브라우저는 쿠키를 허용하도록 설정되어 있지 않습니다. 이 사이트는 귀하가 설정한 변경 사항을 사이트의 모든 페이지에 적용하기 위해서 쿠키를 필요로 합니다. 귀하의 컴퓨터에서 쿠키를 어떻게 활성화시킬 수 있는지 알아보려면 쿠키를 활성화시키는 방법 페이지를 방문하십시오. 쿠키를 활성화시키려면 귀하가 사용하는 컴퓨터의 관리자 권한이 필요할 수도 있음에 유의하십시오. 쿠키를 지원하지 않으면 귀하의 설정이 사이트의 다른 페이지에서는 유지되지 않습니다. 우리는 귀하의 컴퓨터가 제공하는 기능에 의존하지 않고 이 기능을 제공하기 위해서 최선을 다하고 있습니다. 그 동안에는 귀하가 방문하는 각각의 페이지에서 설정을 바꾸실 수 있습니다."
현재 시점에서 HTML이나 XHTML 페이지에서 자바스크립트를 구현하는 최선의 방법은 콘텐츠의 구조와 표현에서 콘텐츠의 동작을 분리하는 방식을 사용하는 것이다. 페이지의 기능을 강화하거나 향상하면서 자바스크립트를 지원하지 않을 때에도 콘텐츠가 계속 동작할 수 있도록 적절하게 변환해주는 스크립트를 설명할 때 '점진적인 향상'과 '겸손한 자바스크립트"라는 용어를 종종 사용한다.
추가 정보에 대한 시발점이 될 만한 페이지를 몇 개 추천한다:
사용자가 대체 화면을 선택할 수 있게 해주는 컨트롤을 웹 페이지가 포함하고 있는지 확인한다.
해당 컨트롤이 화면이 변경하는지 확인한다.
변경한 페이지가 원래 페이지의 "지침을 만족하는 대체 버전"인지 확인한다.
모든 확인 결과가 참.
CSS를 지원하는 모든 기술
이 기법과 관련된 항목:
이 기법은 사용자가 자신의 선호대로 콘텐츠를 볼 수 있도록 CSS를 사용해서 구조화된 HTML 텍스트를 이미지 텍스트로 대체하는 방법을 보여주기 위함이다. 이 기법을 사용하려면 제작자는 먼저 페이지의 구조를 의미 있는 요소로 마크업한 HTML 페이지를 작성해야 한다. 그 다음으로 해당 페이지를 위한 두 개 이상의 스타일 시트를 작성한다. 첫 번째 스타일 시트는 HTML 텍스트를 텍스트 그대로 표현하고, 두 번째 스타일 시트는 CSS를 사용해서 HTML 텍스트 일부를 이미지 텍스트로 대체해서 표현한다. 마지막으로 사용자가 두 가지 이용 가능한 화면 사이를 전환할 수 있게 해주는 컨트롤을 서버측이나 클라이언트측 스크립트를 사용해서 제공한다.
이 기법은 이미지 텍스트가 없는 화면을 제공하고 사용자가 대체 화면으로 전환할 수 있도록 해주는 사용자 인터페이스 컨트롤이 관련된 기준을 만족하기만 하면 달성 기준 1.4.5나 1.4.9 만족을 위해 사용할 수 있다. 제작자는 가능한 한 이미지 텍스트를 포함하지 않는 화면을 기본 화면으로 제공해야 한다. 또한, 전환에 사용되는 컨트롤은 페이지 앞부분에 위치해야 한다.
다양한 사용자 에이전트와 보조 기술 설정과 호환성에 따른 문제를 해결하기 위해 여러 가지 "이미지 대체(IR: Image Replacement) 기법이 지속적으로 개발되고 있다 (자세한 정보는 참고 자료를 확인). 제작자가 텍스트를 대체하는데 사용할 수 있는 다양한 접근 방식이 있지만 보조 기술과의 호환성을 생각하고 스크립트, CSS, 이미지(또는 이 세 가지의 조합)를 이용할 수 없을 때에도 이런 기법이 제대로 동작하는지 고려하는 것이 중요하다. 모든 상황에 맞는 한 가지 방법을 찾기가 어렵기 때문에 이 기법은 사용자가 이미지 대체 기법을 적용하지 않은 화면으로 전환할 수 있게 해주는 컨트롤을 사용할 것을 권장한다.
주: 지침을 만족하지 못하는 콘텐츠의 지침에 부합하는 대체 버전 페이지를 제공하기 위해서 이 기법과 스타일 전환 기법을 조합해서 사용할 수 있다.자세한 정보는 C29: 스타일 전환 방식(스위처)을 사용해서 지침에 부합하는 대체 버전 제공과 지침에 부합하는 대체 버전 이해하기를 참고하라.
사용자가 두 가지 화면으로 홈 페이지를 볼 수 있도록 스타일 스위처를 사용한 디자인 스튜디오가 있다. 기본 버전은 제목 텍스트를 이미지 텍스트로 대체해서 표현한다. 사용자는 페이지에 있는 컨트롤을 사용해서 제목을 텍스트로 표현하는 버전으로 전환할 수 있다.
CSS 부분:
예제 코드:
...
<div id="Header">
<h1><span>Pufferfish 디자인 스튜디오</span></h1>
<h2><span>놀라운 아이덴티티와 디자인 솔루션</span></h2>
</div>
...
다음은 이미지 텍스트를 포함하는 화면의 CSS 코드이다. 스크린 리더 사용자가 텍스트를 이용할 수 있도록 CSS 포지셔닝을 사용해서 제목 요소의 콘텐츠를 화면 밖으로 배치한 것에 주목하기 바란다.
예제 코드:
...
#Header h1 {
background-image: url(pufferfish-logo.png);
height: 195px;
width: 290px;
background-repeat: no-repeat;
margin-top: 0;
position: absolute;
}
#Header h1 span {
position: absolute;
left: -999em;
}
#Header h2 {
background-image: url(beauty.png);
background-repeat: no-repeat;
height: 234px;
width: 33px;
margin-left: 8px;
position: absolute;
margin-top: 250px;
}
#Header h2 span {
position: absolute;
left: -999em;
}
아래는 이미지 텍스트를 포함하지 않는 화면의 CSS 코드이다.
예제 코드:
...
#Header h1 {
font: normal 200%/100% Garamond, "Times New Roman", serif;
margin-bottom: 0;
color: #000099;
background: #ffffff;
}
#Header h2 {
font: normal 160%/100% Garamond, "Times New Roman", serif;
margin-bottom: 0;
color: #336600;
background: #ffffff;
}
참고 자료는 정보 제공을 위한 목적이며 어떠한 가치 평가도 내포하지 않는다.
사용자가 대체 화면을 선택할 수 있게 해주는 컨트롤을 웹 페이지가 포함하고 있는지 확인한다.
컨트롤을 활성화했을 때 보이는 화면에서 이미지 텍스트를 사용한 모든 곳이 텍스트(프로그램 방식으로 결정할 수 있는 텍스트)를 포함하고 있는지 확인한다.
모든 확인 결과가 참.