일부 사람들의 작업에서 역할 속성을 계속 봅니다. 저도 사용하고 있는데 효과는 잘 모르겠습니다.
예를 들어:
<header id="header" role="banner"> Header stuff in here </header>
또는:
<section id="facebook" role="contentinfo"> Facebook stuff in here </section>
또는:
<section id="main" role="main"> Main content stuff in here </section>
이 역할 속성이 필요합니까?
이 속성이 의미론에 더 적합합니까?
SEO를 개선합니까?
역할 목록은 여기 에서 찾을 수 있지만 일부 사람들은 자신의 역할을 구성하는 것을 봅니다. 그것이 허용되거나 역할 속성의 올바른 사용입니까?
이에 대한 생각이 있습니까?
당신이 보는 대부분의 역할은 ARIA 1.0의 일부로 정의된 다음 나중에 HTML-AAM과 같은 지원 사양을 통해 HTML에 통합되었습니다. 일부 새로운 HTML5 요소(대화 상자, 기본 등)는 원래 ARIA 역할을 기반으로 합니다.
http://www.w3.org/TR/wai-aria/
기본 의미 요소 외에 역할을 사용하는 몇 가지 주요 이유가 있습니다.
이유 #1. 호스트 언어 요소가 적절하지 않거나 여러 가지 이유로 의미상 적절하지 않은 요소가 사용된 역할을 재정의합니다.
이 예에서는 결과 기능이 탐색 링크보다 버튼과 비슷하지만 링크가 사용되었습니다.
<a href="#" role="button" aria-label="Delete item 1">Delete</a> <!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->
스크린 리더 사용자는 이것을 버튼(링크와 반대)으로 듣게 되며 CSS 속성 선택기를 사용하여 class-itis 및 div-itis를 방지할 수 있습니다.
[role="button"] { /* style these as buttons w/o relying on a .button class */ }
[7년 후 업데이트: 2020년에는 속성 선택기에서 범용 선택기를 필요로 했던 기존 브라우저 단점이 필요하지 않기 때문에 일부 댓글 작성자를 만족시키기 위해 * 선택기를 제거했습니다.]
이유 #2. ARIA 역할을 구현했지만 아직 네이티브 요소의 역할을 구현하지 않은 브라우저를 지원하기 위해 네이티브 요소의 역할을 백업합니다.
예를 들어, "main" 역할은 수년 동안 브라우저에서 지원되었지만 HTML5에 비교적 최근에 추가되었기 때문에 많은 브라우저가 아직 <main>
대한 의미 체계를 지원하지 않습니다.
<main role="main">…</main>
이것은 기술적으로 중복되지만 일부 사용자에게는 도움이 되고 아무에게도 해를 끼치지 않습니다. 몇 년 안에 이 기술은 메인에 필요하지 않게 될 것입니다.
이유 #3. 7년 후 업데이트(2020): 적어도 한 명의 댓글 작성자가 지적했듯이 이것은 이제 사용자 지정 요소에 매우 유용하며 웹 구성 요소의 기본 접근성 역할을 정의하기 위한 일부 사양 작업이 진행 중입니다. 해당 API가 표준화된 경우에도 구성 요소의 기본 역할을 재정의해야 할 수 있습니다.
메모/답장
당신은 또한 썼습니다:
일부 사람들이 스스로 구성하는 것을 봅니다. 그것이 허용되거나 역할 속성의 올바른 사용입니까?
실제 역할이 포함되지 않은 경우 속성을 사용할 수 있습니다. 브라우저는 토큰 목록에서 처음으로 인식된 역할을 적용합니다.
<span role="foo link note bar">...</a>
목록 중 link
와 note
만 유효한 역할이므로 플랫폼 접근성 API에서 링크 역할이 가장 먼저 적용되기 때문입니다. 사용자 지정 역할을 사용하는 경우 ARIA 또는 사용 중인 호스트 언어(HTML, SVG, MathML 등)에 정의된 역할과 충돌하지 않는지 확인하십시오.
내가 이해하는 것처럼 역할은 처음에 XHTML에 의해 정의되었지만 더 이상 사용되지 않습니다. 그러나 이제 HTML 5에 의해 정의됩니다. https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header를 참조하십시오.
역할 속성의 목적은 웹 응용 프로그램의 일부로 요소(및 그 자식)의 정확한 기능을 구문 분석 소프트웨어에 식별하는 것입니다. 이것은 주로 스크린 리더의 접근성 문제이지만 임베디드 브라우저 및 스크린 스크레이퍼에도 유용하다고 볼 수 있습니다. 특이한 HTML 클라이언트에 유용하려면 속성을 내가 링크한 사양의 역할 중 하나로 설정해야 합니다. 직접 구성하면 이 '미래' 기능이 작동하지 않습니다. 댓글이 더 나을 것입니다.
실용성: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/
나는 이것이 오래된 질문이라는 것을 알고 있지만 정확한 요구 사항에 따라 가능한 또 다른 고려 사항은 https://validator.w3.org/에서 유효성을 검사하면 다음과 같이 경고가 생성된다는 것입니다.
경고: 요소 양식에는 양식 역할이 필요하지 않습니다.
역할 속성은 주로 스크린 리더를 사용하는 사람들의 접근성을 향상시킵니다. 접근성, 장치 적응, 서버 측 처리 및 복잡한 데이터 설명과 같은 여러 경우에 사용합니다. 더 알아보기: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute .
출처 : http:www.stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html