What is the Role attribute for?

Asked

Viewed 18,486 times

17

I’ve seen a code that had that tag on it Role in a form, but I didn’t understand its use.

Something like:

<form role="search">
</form>

What’s the tag for role in HTML5 ?

html html5

  • http://www.w3.org/TR/role-attribute/

2 answers

24


This attribute serves to give more semantics to the elements of marking-based documents, the from 2013 onwards to W3 began to recommend its use. In Portuguese Roll means Paper, in the sense of office/office of that person.

With this semantics browsers can provide more accessibility to some elements, since they come to know the role of elements in the document.

Example of use

To use the attribute Role must declare the namespace of XHTML, be the document an HTML 4.01, HTML 5, XHTML or XML. This is simple and already well known to those who used XHTML.

See the example of how to include namespace in an HTML 5 document:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">
...

In the above example, a namespace nameless. But since it can be declared in XML documents, you can give a namespace with a specific name, as in the example below:

<?xml version="1.0" encoding="UTF-8"?>
<exemplo
    xmlns="http://algum.lugar.com/a/especificacao/de/exemplo"
    xmlns:xhtml="http://www.w3.org/1999/xhtml">
...

After including the namespace, just use the attribute Role in the elements (tags) who wants to add some extra semantics.

The value of the attribute is a string containing one or more space-separated elements. Each element is a reference to a vocabulary term, which is defined in RDF.

There are three ways to specify this reference: a standard vocabulary term, a CURIE or an absolute IRI.

The standard vocabulary terms are the terms defined in namespace standard (the namespace declared unnamed), which is normally the RDF of own XHTML, which we quote above.

Only to include the namespace from XHTML, you can use the terms defined in your vocabulary, which can be found in the XHTML Vocabulary. This vocabulary includes, for example, the term alert, used in items representing important messages and normally issued due to an event in the application.

In this case, we can apply this term to a <div> (or any other element), as in the example below:

<div role="alert">Usuário cadastrado com sucesso.</div>

But in addition to the terms defined in the standard vocabulary, we can use defined terms in vocabularies loaded by another namespace, as in this example, which uses the CURIE feature (compact URI):

<!DOCTYPE html>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:educ="http://www.exemplo.org/roles/educacao#">
<head>
    ...
</head>
<body>
    <h1>Disciplina de Álgebra</h1>
    <div>
        Professor(a):
        <span role="educ:professor">João da Silva</span>
    </div>
    ...

A last way to specify the value of a Role is by its absolute IRI, as in the example below:

<div role="http://www.w3.org/1999/xhtml/vocab/#alert">
    Usuário cadastrado com sucesso
</div>

Vocabulary of the XHTML

XHTML Terms Vocabulary is divided into three parts:

  • Vocabulary of Meta-information
  • XHTML Document Vocabulary
  • Vocabulary of ARIA

The meta-information vocabulary is normally used in the elements of HEAD of the HTML document. It has several roles that represent links for other documents (Resources) with their own meanings, such as link to the first page of a series of pages, link to last page, link to main page, link for help page, link to glossary page, etc. In addition has the paper copyright to indicate that the item contains the right-to-copy notes.

The XHTML Paper vocabulary has some general purpose roles for hypertext documents such as: banner, complementary content (complementary), meta-information block of page content (contentinfo), the definition of a term (Definition), specification of main page content (main), navigation content (navigation), extra note (note) or element reserved for searches (search).

Some of these papers already have elements of HTML 5 and HTML 5.1 itself that may be more suitable for use, such as the tag <nav> for navigation, the tag <main> (HTML 5.1) for main content, or tag <aside> for complementary content.

These terms are in the vocabulary because they can be used by any XML, not necessarily an HTML. In the case of XML, it may not be possible to use tags HTML based on its build protocol.

Already the aria vocabulary is used to point out the role of elements of rich accessibility applications such as menus, mailboxes, buttons, comboboxes, checkboxes, radioboxes, header texts, tabs, logs and many other roles.

References:

11

It is used more for accessibility - ARIA (Accessible Rich Internet Applications) - it provides context to the element. But it can also be used to create more complex situations, facilitate some analysis by the server or give information that allows a better adaptation of the page to the device where it is being shown.

It is a way to give more semantics to the page that is fundamental for those who have personal difficulty or on the device you are using, and to better inform tools to interpret the structure of the page. Note that it is different from giving semantics to the content itself.

In your example you are probably indicating that this form is used to do a search. This can help the user who is blind, for example, to know that this is what it should be used for. An analysis tool is always "blind", if it can take advantage of a search form somehow it needs to know where this form is and the developer can report with this attribute.

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.