5

Qual a função dessa tecnologia, como utilizá-la ou até, quando é necessário fazer uso dela ?

1

2 Respostas 2

5

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:

Atributos aria em html5

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.

4
  • 1
    Vlw 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...
    – MagicHat
    21/10/2016 às 7:58
  • @MagicHat Completei com um exemplo 21/10/2016 às 8:20
  • 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 :(...
    – MagicHat
    21/10/2016 às 10:58
  • @MagicHat Espero que esteja mais esclarecido agora. 21/10/2016 às 11:15
1

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:

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .