IT이야기

XHTML 역할 속성이란

cyworld 2021. 10. 1. 21:26
반응형

XHTML 역할 속성이란 무엇입니까? 무엇을 위해 사용합니까?


이에 대한 W3C의 페이지읽었 지만 여전히 모호합니다. 는 IS role코드를 명확히하는 속성의 목적은? 아니면 일부 브라우저나 스파이더에 의해 해석됩니까?

일부 JavaScript 라이브러리를 사용하여 DOM 선택기로 사용할 수 있습니까( id속성이 고유해야 하므로 페이지에서 여러 리소스를 식별하는 데 사용할 수 있다고 생각합니다)?


짧은 버전:

역할 속성은 미래의 브라우저에 장치 독립적인 방식으로 특정 XML 요소를 지능적으로 사용할 수 있는 방법을 제공할 수 있습니다. 예를 들어, "탐색"의 역할 속성으로 표시된 정렬되지 않은 목록은 데스크탑 및 휴대용 환경의 브라우저에서 지능적으로 해석되어 두 환경 모두에서 명확하게 표시될 수 있습니다.

긴 버전:

이 사양에 정의된 XHTML 역할 속성은 작성자가 요소의 목적에 대해 기계에서 추출할 수 있는 의미론적 정보로 XML 언어에 주석을 달 수 있도록 합니다. 사용 사례에는 접근성, 장치 적응, 서버 측 처리 및 복잡한 데이터 설명이 포함됩니다.

속성은 문서의 컨텍스트에서 현재 요소가 수행하는 역할을 설명합니다. 이것은 예를 들어 응용 프로그램 및 보조 기술에서 요소의 목적결정하는 데 사용할 수 있습니다 . 이를 통해 사용자는 요소에 대해 수행할 작업에 대해 정보에 입각한 결정을 내리고 장치 독립적인 방식으로 선택한 작업을 활성화할 수 있습니다 . 또한 도메인 특정 방식 (예: 법적 용어 분류) 으로 문서의 일부에 주석을 달기 위한 메커니즘으로 사용될 수 있습니다 .

예시:

<ul role="navigation sitemap">
    <li href="downloads">Downloads</li>
    <li href="docs">Documentation</li>
    <li href="news">News</li>
</ul>

XHTML2 작업 그룹이 올해 말에 더 이상 존재하지 않을 것이라는 점을 감안할 때 이 사양이 현재 형식과 유사한 릴리스 상태에 도달할 가능성은 없습니다. http://www.w3.org/News/2009#entry-6601


당신이 참조하는 문서는 현재 중단된 XHTML 2 작업 그룹의 작업의 일부입니다. 사실상 구식입니다.

HTML5/XHTML5에도 role속성이 있습니다. 정의는 비슷하지만 다소 제한적입니다. 그 목적은 화면 판독기와 같은 보조 기술이 사용자에게 UI 구성 요소(위젯)의 목적에 대해 더 잘 알리고 탐색할 수 있도록 ARIA(액세스 가능한 리치 인터넷 응용 프로그램) 역할을 나타내는 것입니다. 웹 페이지를 더 쉽게.

ARIA의 유효한 역할 목록은 http://www.w3.org/TR/wai-aria/#roles 에서 확인할 수 있습니다 .


접근성을 위해 역할을 사용할 수 있습니다. 내 이해는 의미 체계가 명확하게 하는 경우 역할 속성을 피해야 한다는 것입니다. 의미 요소가 이미 탐색을 의미 <nav role="navigation">...</nav>하기 때문에 예를 들어 사용 하는 것은 권장되지 않습니다 nav.

그러나 유용한 경우가 있습니다. 예를 들어 링크인 이미지는 role="link" tabindex="0"화면 판독기 및 기타 보조 기술이 링크 역할을 한다는 것을 이해하는 데 도움 되어야 할 수 있습니다 (Enter 키 및 클릭 이벤트에 대한 귀찮은 키다운 이벤트를 수신해야 함).

또는 이미지 role="button"에서 이미지가 버튼 역할을 하고 있음을 나타내야 할 수 있습니다 .

role 속성을 사용하면 웹 응용 프로그램이 브라우저에 의미가 있지만 지정하지 않고는 마크업에 전달되지 않을 수 있는 의미 체계를 웹 응용 프로그램에 추가할 수 있습니다.

종종 속성에 의존하지 않고 의미적으로 올바른 방법이 있지만 필요할 때 거기에 있습니다.

ReferenceURL : https://stackoverflow.com/questions/1678238/what-is-xhtml-role-attribute-what-do-you-use-it-for

반응형