[HTML5] 7장 추가된 글로벌 속성

HTML5에서 새로 추가된 속성들 중에 애플리케이션 제작에 편리한 몇가지 기능을 구현해 놓았습니다.

CONTENTEDITABLE

이 속성을 가지고 있는 요소들의 콘텐츠를 사용자가 편집할 수 있다. 또 선택하고 편집할 수 있는 콘텐츠 영역에 대해 수정한 내용을 반영할 수 있다.

<section contenteditable="true">
    <h1>박스 텍스트 수정</h1>
    <article>
        <h2>브라우저에서 수정해 보세요</h2>
    </article>
</section>

활용

이 속성을 지정하면 하위에 있는 모든 요소들에 영향을 미친다.

브라우저에서 수정해 보세요

DOM속성에서는 contentEditable이라고 표현하며 isContentEditable로 해당요소가 편집 가능한지 확인할 수 있다. 또 자바스크립트 사용해서 document.designMode='on' 이라고 지정을 해서 문서 전체가 편집 가능하게 만들수 있다. 마지막으로 사용자가 선택한(활성화한) 콘텐츠에 대해 document.execCommand('bold')같은 명령어를 사용할 수 있다. 편집한 이후에 사용자가 변경한 내용이 DOM에 적용돼 있으므로 편집한 영역의 innerHTML(designMode로 편집 가능하다면 전체문서)을 서버로 보내 저장하고 적용할 수 있다.

SPELLCHECK

텍스트 입력을 받는 폼에서 사용자가 틀린 텍스트를 입력하면 빨간색 밑줄로 알려주는 속성이다.

<textarea spellcheck="true"></textarea>

아쉽게도 영어단어나 영어문장만 해당한다.

DRAGGABLE

이 속성이 들어간 요소는 drag-and-drop API를 사용해 드래그 할 수 있다.

<div draggable="true">
    이 요소는 드래그가 가능하다
</div>

아래의 박스를 드래그 해보자

이 요소는 드래그가 가능하다

DATA-*

이 속성을 사용하면 마크업에서 스크립트로 정보를 전달할 수 있다. 어떤 요소든 임의의 속성을 넣을 수 있기 때문에 기존의 복잡한 단계를 거치지 않아도 된다.

<div id="cat_1" data-id="1" data-name="나비">
...
</div>

dataset 속성 접근법

dataset 속성의 값은 단순한 문자열 맵(연상배열)이지만 값을 읽고 쓸때는 'data-'라는 속성이름의 접두어를 생략할 수 있다.

DOM(getAttribute()메서드)을 이용
'data-'접두어를 포함하여 지정해야 한다.

var row = document.getElementById("cat_1");
row.dataset.age = "3";    //age 라는 커스텀 데이터 속성을 추가
alert(row.dataset.id);    //id 라는 커스텀 데이터 속성을 추가
alert(row.getAttribute("data-id"));    //getAttribute()일때는 접두어가 필요
delete row.dataset.age;    //data-age 속성 삭제

HIDDEN

css의 hidden과는 다르게 의미상으로도 절대 브라우저에 노출되지 않는 것을 원칙으로 한다.

<div id="main" hidden>
...
</div>

MICRODATA

마이크로데이터란 HTML의 요소에 삽입하여 사용하는 것으로, 그 요소가 데이터로서 어떤 의미를 가졌는지를 나타낼 수 있는 기능이다. 이는 웹페이지에 시맨틱을 추가하는 것으로, 이미 HTML을 정확하게 사용하고 있지만 HTML만으로 페이지가 포함되는 데이터의 시맨틱을 전부 나타낼 수 없는 경우에 사용하게 된다. 프로그램이 마이크로데이터를 읽어들임으로써 데이터의 의미를 이해할 수 있게 되면 지금보다 더 많은 갖가지 편리함을 사용자에게 제공할 수 있다.

속성	역할
itemscope	새로운 마이크로 아이템을 만듦
itemprop	아이템을 구성하는 속성을 만듦
itemref	다른 마이크로데이터를 ID값으로 불러서 참조함
itemtype	아이템 타입을 지정함
itemid	아이템이 책이라 하면 ISBN과 같은 아이템의 고유 식별자, ID를 가져옴

마이크로데이터와 관련된 속성은 모든 요소에 부여할 수 있으므로 어떠한 요소에서도 아래와 같은 속성에 접근가능하다.

• element.itemScope : itemscope 속성값에 대응(true/false)
• element.itemType : itemtype 속성값에 대응
• element.itemValue : itemvalue 속성값에 대응
• element.itemRef : ietmeref 속성값에 대응
• element.itemProp : itemprop 속성값에 대응
• element.itemId : itemid 속성값에 대응
• element.properties : 요소가 아이템을 나타내는 경우 모든 속성이 담겨 있는 객체를 반환한다.

반환 값인 객체는 속성의 개수를 나타내는 length, 속성 이름의 목록을 반환하는 names등의 속성을 가진다. 속성 이름을 인수로 전달(element.properties[name])하면 속성값(문자열리스트)을 얻을 수 있다. 또한 웹페이지 안에 있는 아이템을 한꺼번에 얻을 수 있도록 document 객체에 getItems()라는 메소드도 추가되었다.

document.getItems(types)

아이템 타입을 지정하여 그에 대응하는 요소의 목록을 얻는다. 인수를 생략했을 때는 문서 안의 모든 아이템을 반환한다. 공백 문자를 구분자로 하여 인수를 지정하면 한 번에 여러개의 인수를 전달할 수도 있다.

var s = "";
// 고양이의 데이터를 모두 얻음
var cats = document.getItems("http://example.org/cat");
for (var i=0; i<cats.length; i++) {
    var cat = cats[i];
    s += "ID="+cat.itemId+", properties={";
    var props = [];

    //모든 속성에 대해 루프처리
    for (var j=0, n=cat.properties.names.length; j<n; j++) {
        var propName = cat.properties.names[j];
        var prop = cat.properties[propName];
        //values 속성은 배열과 비슷한 요소이므로 slice를 이용하여 배열로 변환
        var values = Array.prototype.slice.call(prop[propName].values);
        props.push(propName+":"+values);
    }
s += props.join(" ,")+"}\n";
}
alert(s);

마이크로데이터에 대한 자세한 내용은 Microdata (마이크로데이터)를 참고하라.

WAI-ARIA

WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications suite)는 독립 스펙으로 웹 애플리케이션과 웹페이지의 접근성이 더 좋아질 수 있게 HTML 확장기능을 제공한다. 즉, 역할과 상태 정보, 사용자 정의 위젯의 속성을 기술하는 수단을 제공하며, 보조적인 기술을 사용하는 사용자들이 이를 인식하고 사용할 수 있게 해준다. http://www.w3.org/TR/wai-aria/roles#role_definitions

키보드를 통한 웹 접근성 향상

포커스(focus)를 갖고 있는 요소는 페이지 전체 요소 가운데 키보드등의 입력매체로부터 입력 이벤트를 수신할 수 있는 요소를 의미한다. 포커스를 받을 수 있는 요소는 a, area, button, input, select로 한정된다(사용자는 Tab키를 사용해서 포커스를 받을 수 있는 요소를 차례로 지정할 수 있다).

Tab 키로 포커스를 받는 요소의 순서는 HTML 문서의 요소작성 순서를 따르거나 tabindex 속성에서 임의로 순서를 정한다.

HTML 요소를 사용해서 개발자가 직접 정의하는 요소는 포커스를 받을 수 없으며 키보드만으로 이 요소에 접근하는 것은 불가능하다. 하지만 ARIA를 사용하면 페이지 안에 보여지는 모든 요소에 tabindex 속성을 부여할 수 있기 때문에 키보드만으로 모든 속성에 접근할 수 있게 된다.

role 속성 분류

ARIA는 특정 요소가 담당하는 역할을 기준으로 role 속성에 지정할 수 있는 몇가지 속성값을 정의한다. 이를 기술적 용어로 온톨로지(ontology)를 부여한다고 표현한다.

랜드마크 역할

페이지 탐색을 목적으로 페이지 내의 특정 지점을 묘사한다. <nav role="navigation">과 같이 사용하여 스크린리더가 이 영역을 쉽게 이동하도록 만들 수 있다.

• banner : 특정 문서가 아닌 전체 사이트 영역을 지정, 예를 들어 사이트의 헤더나 로고
• application : 웹 애플리케이션에 사용되는 영역을 지정
• complementary : 페이지의 메인 섹션을 보완하는 영역을 지정
• contentinfo : 메인 콘텐츠의 정보를 지정. 예를 들어 페이지 하단의 저작권 정보 표시
• form : 웹 폼을 지정. 검색 엔진일 경우에는 대신 search를 사용
• main : 페이지의 메인 콘텐츠를 지정
• navigation : 현재 문서나 관련된 문서의 내비게이션 링크를 지정
• search : 검색을 수행하는 영역을 정의

문서의 구조 형성 역할

문서에서 구조를 형성하는 역할을 담당하는 요소에 부여한다. section, navigation, note, heading 속성값을 포함한다.

애플리케이션 구조 형성 역할

문서에서 애플리케이션 구조를 형성하는 요소에 부여한다. alert, alertdialog, progressbar, status 속성값을 포함한다.

사용자 인터페이스 역할

treegrid, toolbar, menuitem 속성값을 포함한다.

사용자 입력 수신 역할

checkbox, slider, option 속성값을 갖는다.

role 속성 사용법

class 속성을 사용하는 것과 유사하다. 예를 들어 type image인 요소를 버튼처럼 사용하려면 다음처럼 해당 input 요소의 속성에 button 값을 저장하면 된다.

<input type="image" src="btn-submit.png" role="button">

이 방법의 장점은 개발자 스스로 input 이미지의 역할이 버튼이라는 것을 바로 알수 있다는 것이다. 더 깊이 생각해보면 브라우저나 기타 다른 기기, 장애인과 더불어 모든 사용자가 더 쉽게 이 요소에 접근할 수 있다는 장점도 있다.

aria- 접두어를 사용하여 요소의 상태를 정의

<input type="image" src="btn-submit.png" role="button" aria-pressed="false"> <!-- 마우스 클릭 여부 -->

해당 요소가 선택되거나 엔터 키가 입력되었을 때 자바스크립트를 사용해서 aria-pressed 상태 값을 변경할 수 있다.

속성 선택자

IE8을 포함한 모든 최신 브라우저가 속성 선택자를 사용해 ARIA 상태및 속성, role 정보에 기반해 스타일을 적용하는 방법을 허용하고 있다.

[aria-pressed=true] {
    background-color : #000;
} 

TAB-INDEX

사용자가 키보드로 페이지를 내비게이션 할때 어떤 순서로 이동할지를 지정할 수 있는 방법이다. 근래에는 테이블을 이용해 복잡한 구조를 만들지 않기 때문에 그다지 필요없는 내용이기는 하나 조금 다르게 활용해 유용한 기능을 만들수도 있다. 보통 키보드로 접근해 포커스가 되는 영역은 링크, 폼 요소, 이미지 맵 영역들인데 다른 요소에도 포커스가 될 수 있게 tabindex 속성을 주고 자바스크립트로 focus() 명령을 실행해 해당영역으로 포커스가 이동하게 만들수 있다. 물론 이런 기법을 사용하면 tabindex를 적용한 요소들도 키보드로 내비게이션할 때 노출이 되므로 작동방식이 문제가 될수 있다. 이런 문제를 해결하기 위해 값에 마이너스 값을 사용하면 (tabindex="-1") 프로그램적으로만 포커스를 줄 수 있고 순차적인 포커스 내비게이션으로는 접근할 수 없게 만들 수 있다.

* HTML4에서는 "-1"이라는 값을 속성에 적용하는 것이 유효하지 않았고 또 한, tabindex 속성도 폼 필드와 링크에만 줄 수 있었지만 최근 브라우저들은 이 기능을 모두 지원하고 HTML5 에서는 어떤 요소에나 적용할 수 있으므로 이제는 문제될게 없다.