Wiki: browse WAI / 접근성에 맞는 태그 구름 표현

접근성에 맞는 태그 구름 표현

[ WAI / Tag Cloud For-WAI / Leave Comment ]

많은 사람들은 태그들을 anchor 요소로 쭉 나열한다.
<a href="tag1">Tag 1</a> <a href="tag2">Tag 2</a>
Style이 적용된 문서에는 태그의 구별이 어느 정도 쉽겠지만, Style이 없는 문서에서는 구별이 어렵다.
접근성 지침에는 링크와 링크 사이에는 각각의 링크를 눈으로 구별할 수 있는 텍스트가 존재해야 한다고 권고한다. (중요도 3)
그렇다면, 각 태그마다 지저분하게 구별할 수 있는 텍스트를 넣어주기는 그렇고, 방법이 있다면 목록으로 꾸미는 것이다. (<ul>, <ol> 이용)

예제

html

<ul class="cosmos">
<li><a href="tag1" title="Tag 1 (1)" class="taglevel1">Tag 1</a></li>
<li><a href="tag2" title="Tag 2 (2)" class="taglevel2">Tag 2</a></li>
<li><a href="tag3" title="Tag 3 (3)" class="taglevel3">Tag 3</a></li>
<li><a href="tag4" title="Tag 4 (2)" class="taglevel2">Tag 4</a></li>
<li><a href="tag5" title="Tag 5 (1)" class="taglevel1">Tag 5</a></li>
</ul>

CSS

/* 태그 목록을 구름으로 만듦 */
ul.cosmos {
text-align:center;
list-style:none;
font-size:100%;
margin:2em 0;
padding:0;
}

ul.cosmos li {
display:inline;
line-height:200%;
margin:0;
padding:0;
}

ul.cosmos li a {
margin:4px;
}

/* 태그 수에 대한 크기들 */
a.taglevel3 {
font-size:2.4em;
font-weight:700;
}

a.taglevel2 {
font-size:2.8em;
font-weight:800;
}

a.taglevel1 {
font-size:3.2em;
font-weight:900;
}