development

HTML에서 "role"속성의 목적은 무엇입니까?

big-blog 2020. 9. 27. 12:58
반응형

HTML에서 "role"속성의 목적은 무엇입니까?


나는 일부 사람들의 작업에서 역할 속성을 계속 봅니다. 나도 사용하지만 그 효과에 대해 잘 모르겠습니다.

예를 들면 :

<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의 일부로 정의되었으며 나중에 HTML5에 통합되었습니다. 새로운 HTML5 요소 (대화 상자, 기본 등) 중 일부는 원래 ARIA 역할을 기반으로합니다.

http://www.w3.org/TR/wai-aria/

네이티브 시맨틱 요소 외에 역할을 사용하는 두 가지 주요 이유가 있습니다.

이유 # 1. 호스트 언어 요소가 적절하지 않거나 다양한 이유로 의미 상 적절하지 않은 요소가 사용 된 역할을 재정의합니다.

이 예에서는 결과 기능이 탐색 링크보다 버튼과 비슷하더라도 링크가 사용되었습니다.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

스크린 리더는 이것을 링크가 아닌 버튼으로 듣게되며 CSS 속성 선택기를 사용하여 class-itis 및 div-itis를 피할 수 있습니다.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

이유 # 2. ARIA 역할을 구현했지만 아직 기본 요소의 역할을 구현하지 않은 브라우저를 지원하기 위해 기본 요소의 역할을 백업합니다.

예를 들어, "main"역할은 수년 동안 브라우저에서 지원되었지만 비교적 최근에 HTML5에 추가되었으므로 많은 브라우저가 아직 <main>.

<main role="main">…</main>

이것은 기술적으로 중복되지만 일부 사용자에게 도움이되며 아무런 해를 끼치 지 않습니다. 몇 년 후에는이 기술이 불필요해질 것입니다.

또한 다음과 같이 썼습니다.

나는 어떤 사람들이 자신을 구성하는 것을 봅니다. 이것이 허용됩니까, 아니면 역할 속성의 올바른 사용입니까?

실제 역할이 포함되지 않는 한 속성의 유효한 사용입니다. 브라우저는 토큰 목록에서 첫 번째로 인식 된 역할을 적용합니다.

<span role="foo link note bar">...</a>

목록에서 linknote만 유효한 역할이므로 링크 역할이 먼저 적용되기 때문에 적용됩니다. 사용자 지정 역할을 사용하는 경우 ARIA에 정의 된 역할 또는 사용중인 호스트 언어 (HTML, SVG, MathML 등)와 충돌하지 않는지 확인하십시오.


내가 이해했듯이 역할은 처음에 XHTML에 의해 정의되었지만 더 이상 사용되지 않았습니다. 그러나 이제 HTML 5로 정의됩니다. 여기를 참조하십시오. https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

role 속성의 목적은 웹 애플리케이션의 일부인 요소 (및 하위 요소)의 정확한 기능을 소프트웨어 구문 분석에 식별하는 것입니다. 이것은 대부분 화면 판독기의 접근성 문제이지만 임베디드 브라우저 및 화면 스크레이퍼에도 유용하다고 볼 수 있습니다. 비정상적인 HTML 클라이언트에 유용하려면 속성을 내가 링크 한 사양의 역할 중 하나로 설정해야합니다. 직접 구성하면이 '미래'기능이 작동하지 않습니다. 댓글이 더 좋을 것입니다.

여기에서 실용성 : http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/


이 역할 속성이 필요합니까?

답변 : .

  • role 속성은 언어가 자체 역할 속성을 정의하지 않는 경우 XML 기반 언어로 역할을 정의 하기 위해 액세스 가능한 리치 인터넷 애플리케이션 ( WAI-ARIA ) 을 지원하는 데 필요 합니다.
  • 이것이 역할 속성이 Protocols and Formats Working Group에 의해 게시 된 이유이지만 속성에는 더 일반적인 사용 사례도 있습니다.

다음을 제공합니다.

  • 접근성
  • 장치 적응
  • 서버 측 처리
  • 복잡한 데이터 설명 등.

이것이 오래된 질문이라는 것을 알고 있지만 정확한 요구 사항에 따라 가능한 또 다른 고려 사항은 https://validator.w3.org/에서 유효성을 검사 하면 다음과 같은 경고가 생성 된다는 것입니다.

Warning: The form role is unnecessary for element form.


Role attribute mainly improve accessibility for people using screen readers. For several cases we use it such as accessibility, device adaptation,server-side processing, and complex data description. Know more click: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute.

참고URL : https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html

반응형