Qual a função dessa tecnologia, como utilizá-la ou até, quando é necessário fazer uso dela ?
2 Respostas
O/A ARIA é um conjunto de atributos no HTML que prevê dar maior acessibilidade a pessoas com deficiências (motoras, ceguez ou surdez).
Pode ver uma lista de atributos no W3
Pode ver o suporte dos browsers aqui
Um exemplo bastante simples dum form com suporte a ARIA:
[role="tooltip"] {
display: none
}
input:focus + [role="tooltip"] {
display: block;
top: 100%;
}
<form action="">
<fieldset>
<legend>Login</legend>
<div>
<label for="username">Username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">O seu username é o seu email</div>
</div>
<div>
<label for="password">Password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Escolha uma password que se vai lembrar</div>
</div>
</fieldset>
</form>
Como pode ver o ARIA nao funciona por magia(mágica) é necessário fazer alterações ao estilo da página para realmente fazer algo que possa ajudar este tipo de utilizadores.
Veja também:
Novo EDIT - como é que afinal o ARIA aumenta acessibilidade?
Mais uma vez repito: o ARIA não funciona por magia(mágica) é necessário fazer alterações ao estilo da página para realmente fazer algo que possa ajudar este tipo de utilizadores.
As vezes tudo o que basta é dar um foco maior, ou acrescentar uma explicação. Também é comum estas explicações serem numa letra mais percetível (fonte maior e mais legível).
Outras vezes estes utilizadores usam tecnologia assistiva tais como leitores de ecra.
Ai quando você usa o atributo aria-label
o conteúdo da label
é lido para o utilizador. Há software especializado para reproduzir estes sons.
-
1Vlw a atenção, Bruno... Essa parte mais conceitual eu cheguei a dar uma olhada... Gostaria de saber onde e como ela é utilizada, qual a necessidade real ela soluciona...Tipo ela no código fazendo algo...– MagicHat21/10/2016 às 7:58
-
-
Bruno desculpe eu ainda ter duvidas, mas realmente não estou conseguindo captar o uso... Olho, olho, mas não vejo... Se ele ser para auxiliar deficientes, de que forma seu exemplo contribuí nesse sentido... O quero dizer é por exemplo, eu clico no
input
e ele mostra uma mensagem, onde está a acessibilidade na história ? Cara desculpe se estou sendo mal compreendido, mas ainda não consegui juntar os pontos :(...– MagicHat21/10/2016 às 10:58 -
O que é?
Aplicações Ricas para tornar a Internete Acessível - Accessible Rich Internet Applications (ARIA) definem as formas de tornar o conteúdo e as aplicações web mais acessíveis às pessoas com deficiência. Ela permite a destacar conteúdos importantes na página para facilitar a navegação. Por ser um conjunto de atributos especiais para acessibilidade, pode ser adicionada a qualquer linguagem de marcação, mas é mais adequado para HTML.
Quando é necessário e como utilizá-la?
A ARIA auxilia na acessibilidade, como alguns leitores de tela não reconhecem as novas tags do HTML5, é necessário uma informação sobre o papel de cada tag. Para isso, ele possui o atributo role
, que possui um conjunto definido de valores para representar cada tipo de informação. A ARIA define roles abstratas (apenas para definição de conceitos gerais, não devem ser utilizadas), de widget (elementos de formulário, em sua maioria), de estrutura de documento e de landmark (áreas onde o usuário pode encontrar acesso rápido, como navegação, busca, etc.)
O exemplo abaixo mostra o fragmento de uma página em HTML5 utilizando uma estrutura trivial de um blog. Com este código, se a página fosse acessada por um leitor de tela, o conteúdo não seria interpretado.
<header>
<div>Nome do Site</div>
<nav>
<ul>...</ul>
</nav>
</header>
<section>
<h1>Título 1</h1>
<div><p>Neste espaço pode ser inserido um formulário.</p></div>
<article>
<h2>Um post do blog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</article>
<article>
<h2>Outro post do blog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</article>
</section>
<aside>
<h2>Sidebar</h2>
<ul>...</ul>
</aside>
<footer>Informações do footer.</footer>
Com a aplicação das roles nos seguintes elementos:
- header:
role="banner"
. Define uma região que possui, principalmente, conteúdo de orientação do site e não conteúdo específico da página. - nav:
role="navigation"
. Define uma coleção de elementos de navegação (geralmente links) para navegar no documento ou em documentos relacionados. - section:
role="main"
. Define o conteúdo principal do documento. - div:
role="application"
. Declara uma região para uma aplicação web, geralmente contendo formulários, em oposição a um simples documento. - article:
role="article"
. Define uma seção de uma página que consiste em uma composição que forma uma parte independente do documento. - aside:
role="complementary"
. Define uma seção de suporte do documento para complementar o conteúdo principal. - footer:
role="contentinfo"
. Define uma região que contém informações sobre o documento.
Com estas marcações, os leitores de tela poderão informar o conteúdo que o usuário irá encontrar em cada seção do código. Esta é apenas uma das aplicações do ARIA, que possui outras propriedades para permitir que elementos interativos sejam acessíveis e interoperáveis.
Exemplos
Os exemplos foram retirados desse site.
O elemento <header>
Em HTML5 o elemento <header>
pode ser usado mais de uma vez em uma página. Ele poderá marcar o topo (ou cabeçalho) da página como um todo, ou o topo de subseções da página, tais como aquelas marcadas pelos elementos <section>
, <article>
ou <aside>
.
Se o elemento <header>
marca o topo da página como um todo devemos usar o valor banner para o atributo role. Somente o elemento <header>
que marca o topo da página deve receber o valor banner no atributo role:
<header role="banner">
Conteúdos do topo do site
</header>
Havendo elementos <header>
destinados a marcar cabeçalhos de elementos <article>
, <section>
ou <aside>
o valor do atributo role, nesses casos, deve ser heading:
<article>
<header role="heading">
Cabeçalho do artigo
</header>
Conteúdos do artigo
</article>
O valor heading pode também ser usado em tabelas.
O elemento <footer>
Em HTML5 o elemento <footer>
pode ser usado mais de uma vez em uma página. Ele poderá marcar o rodapé da página como um todo, ou o rodapé de subseções da página, tais como aquelas marcadas pelos elementos <section>
, <article>
ou <aside>
.
Se o elemento <footer>
marca o rodapé da página como um todo devemos usar o valor contentinfo
para o atributo role. Somente o elemento <footer>
que marca o rodapé da página deve receber o valor contentinfo
no atributo role:
<footer role="contentinfo">
Conteúdo do rodapé da página
</footer>
Dependendo da natureza da informação inserida no rodapé de artigos ou outras pequenas seções da página devemos usar o valor complementary
para o atributo role inserido no elemento footer:
<footer role="complementary">
Conteúdo informativo de um artigo
</footer>
O elemento <aside>
O elemento <aside>
destina-se a marcar conteúdos complementares ao conteúdo principal da página, ou seja conteúdos não cruciais, mas suplementares. Assim o valor complementary
para o atributo role é perfeito para esses casos:
<aside role="complementary">
Conteúdo suplementar
</aside>
Referências: