html - role attribute

I keep seeing role attributes in some people's work. I use it too, but I'm not sure about its effect.

f.e.:

<header id="header" role="banner">
    header stuff in here
</header>

or:

<section id="facebook" role="contentinfo">
    facebook stuff in here
</section>

or:

<section id="main" role="main">
     main content stuff in here
</section>

Is this role attribute necessary?

Is this attribute better for semantics?

Does it improve SEO?

A list of roles can be found here, but I see some people make up their own. Is that allowed or a correct use of the role attribute?

Any thoughts on this?

Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML5. Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles.

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

There are two primary reasons to use roles in addition to your native semantic element.

Reason #1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

In this example, a link was used, even though the resulting functionality is more button-like than a navigation link.

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

Screen readers will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.

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

Reason #2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.

For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for <main>.

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

This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary.

You also wrote:

I see some people make up their own. Is that allowed or a correct use of the role attribute?

That's not an invalid use of the attribute unless a real role is not included. Browsers will apply the first recognized role in the token list.

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

Out of the list, only link and note are valid roles, and so the link role will be applied because it comes first. If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.)

answered Sep 6 '13 at 18:12

James Craig
83643

2	This link may be helpful, too. Using ARIA in HTML. rawgithub.com/w3c/aria-in-html/master/index.html – James Craig Sep 6 '13 at 18:48
1	Why did you put universal selector in front of [role="button"]? –  Eugene Xa Oct 30 '13 at 17:47
	@EugeneXa my guess is to pinpoint any element with the [role="button"] will save having to do a[role="button"], span[role="button"] –  Donald Dec 31 '13 at 15:42
1	Fantastic answer. Very well written. –  Steve Jansen Jan 22 at 14:48
	"In a few years, this technique will likely become unnecessary". Idk anything about accessibility, but with things like angular and web components creating custom tags, I can imagine this becoming more of a necessity. –  xdhmoore Jan 29 at 21:29

source - http://stackoverflow.com/questions/10403138/role-attribute-in-html

---

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 속성값을 갖는다.

class 속성을 사용하는 것과 유사하다. 

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

HTML

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

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

출처 - http://webdir.tistory.com/89