figure, time / ARIA(accessible rich internet application)

Minllagher·2021년 3월 17일

CSS html 웹 접근성

HTML / CSS

목록 보기

8/10

2020-07-22,23

1. `<figure>` 요소

:figure요소는 독립적인 콘텐츠를 표현한다. figcaption요소를 사용해서 콘텐츠에 대한 설명을 덧붙힐 수 있다. 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용.

2.`<time>`요소

:시간의 특정 지점 또는 구간을 나타낸다. datetime특성의 값을 지정해서 적절한 검색결과, 알림같은 특정기능을 구현할 때 사용할 수 있다.

<p>
    the concert starts at <time datetime="20:00">20:00</time>.
</p>
<p>
    today is <time datetime="2018-07-07">July 7th</time>.
</p>

datetime: 요소의 시간 또는 날짜를 설명하는 형식.

연,월,일은 연-월-일로 구분하여 사용한다. ex>2011-12-12
유효한 시간 문자열 ex> hour:minute:second 14:52:23
유효한 현지 날짜 및 시간

:2011-11-12T14:33:24

3.ARIA(accessible rich internet application)

: 장애를 가진 사용자 또는 장애 환경에 놓인 사용자가 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말한다. ARIA는 HTML을 보충해서, 보조기술이 알 수 없는 상호작용 및 흔히 쓰이는 앱, 위젯에 필요한 정보를 제공한다. HTML5에서는 많은 위젯이 통합되었다. 구현하려는 기능을 가진 요소가 존재하면 되도록 ARIA보다 의미를 가진 HTML을 선호해야한다. (네이티브 요소는 키보드 접근성, 역할, 상태를 내장한다.)

HTML요소에서 키보드지원(select), 초점지원(a, input) -> 특정콘텐츠 작업에 무리가 있음.(ex. 팝업, 탭메뉴) -> 이런컨텐츠는 표준화된 요소가 없다. 단순히 div로 팝업만들던가 ul li로 탭메뉴를 만들었을뿐. -> aria를 사용하면 이러한 요소를 더 자세히 설명할 수 있다.

ARIA의 3가지 정의 (출처:https://www.youtube.com/watch?v=MQHNTzdqet0 유투브 리베하얀)

1) Role(역할) :UI에 특정 컴포넌트의 역할을 정의

<a href="" role="button">팝업</a>

버튼의 기능을 a요소로 마크업할때, role속성을 활용하여 버튼의 역할로 읽어준다.

2) property(속성) : 해당 컴포넌트에 aria-xx라는 접두사를 속성명으로 사용

<label for="id">아이디</label>
<input type="text" id="id" aria-required="true">

필수 입력폼 이라는 것을 읽어주고, 사용자에게 전달하기 위해서 사용한 aria-required

3) state(상태) : 컴포넌트의 상태정보를 제공.

<button aria-expanded="ture">열기</button>
<div hidden>
    열기내용
</div>

열림/닫힘의 기능을 가진버튼. 이를 클릭하기 전에 이 버튼이 열려있는지 닫혀있는지 상태를 미리 알려주는 것.

->ARIA를 사용하기 전에는 먼저 올바르고 의미있는 HTML요소를 사용해야 한다.

ARIA적용 전후의 예

적용전

<button>
    경고창
</button>
<div>
    경고 내용입니다.
</div>

<button>
    경고창
</button>
<div role="alert">
    경고 내용입니다.
</div>

적용후 div에 role로 역할 부여.

적용전

<section>
<h2>
    인사말
    </h2>
    <p>
        안녕하세요.인사말입니다.
    </p>
</section>

적용후

<section aria-labelledby="intro_header">
<h2>
    인사말
    </h2 id="intro_header">
    <p>
        안녕하세요.인사말입니다.
    </p>
</section>

ARIA는 마크업에서 특별한 속성을 추가하여 개발자들이 위젯의 디테일한 정보를 제공할 때 사용한다.

콘텐츠의 가시성을 바꿀 때, aria-hidden속성의 값을 변경하는 것이 좋다.
ARIA-role속성으로 랜드마크를 정의해 줄 수 있다. ->접근성보완의 수단이므로 html문법을 무시하면서 만들면 안된다.

랜드마크요소:html에서 구역을 나타내는 요소들(main,nav,header,footer)