Landmarks

Os landmarks são úteis para utilizadores dos leitores de ecrã, porque ajudam a navegar de forma fácil nas páginas web de uma aplicação devidamente estruturada, facilitando a orientação o utilizador.

Alguns elementos presentes na especificação HTML5, como o header, aside, navigation e main já transmitem de forma nativa algumas informações especiais aos leitores de ecrã e são uma referência nos browsers mais recentes. Os landmarks também podem ser definidos pelo uso atributos ARIA (cf. secção 5.1.4) para reescrever a semântica de um elemento nativo ou personalizado. Existem ainda alguns landmarks que só podem ser definidos com o uso de um atributo ARIA.

Como referido, os utilizadores de leitores de ecrã beneficiam do uso correto dos landmarks, no entanto as pessoas sem incapacidades visuais e que usam o teclado podem também beneficiar dos mesmos, através de algumas ferramentas externas para landmarks, que permitem a navegação mais fácil pelos elementos principais e suas secções, ao invés de depender apenas do uso da tecla tab e dos skip links (cf. secção 5.2.1) (quando existentes) para navegar sequencialmente no conteúdo das páginas.

Os landmarks referem-se a áreas que são facilmente reconhecidas nas páginas/aplicações e definem as expectativas dos utilizadores quanto à importância do conteúdo que cada um deve conter. Assim identificam-se alguns landmarks que devem ser usados ao longo das aplicações:

• banner - área que contém informações globais que se repetem em todas as páginas de uma aplicação, em vez de apresentar informações específicas ou ações.

67 Normalmente, o logotipo da aplicação e a navegação principal são esperados como conteúdos dentro de um banner. Como não existe um elemento HTML nativo para o

banner, os browsers modernos tratam a tagheader, como um banner e o ideal é que haja apenas um landmark para o banner por página. Para garantir o uso deste

landmark pode ainda ser usado a ARIArole=”banner”.

• complementary – área que contém informações secundárias e que devem estar relacionadas com a página devendo ser claras e objetivas. Para garantir o uso deste

landmark existe o elemento nativo HTML <aside> e pode ser usada, para complementar a informação, a role=”complementary”.

• contentinfo – área que possui informações sobre a aplicação. Nos browsers

modernos, exceto no Safari, eles inferem a role contentinfo na tag footer. Caso seja necessário, deve ser utilizado um aria-label (cf. secção 5.1.4) para que os elementos sejam facilmente distinguidos.

• form – os formulários são uma parte importante em todas as aplicações e por isso, devem possuir um landmark que ajude os utilizadores das tecnologias assistivas a encontrá-los com facilidade e a perceber o seu significado. Quando há vários

landmarks para formulários numa só página, cada um deve ter o seu próprio título visível. Este título fornece um nome acessível (cf. secção 5.1.13) ao formulário por meio do uso de aria-labelledby (cf. secção 5.1.4), fazendo com que seja possível navegar através dos menus de landmarks oferecidos nos leitores de ecrã. Se o caso de ter o título do formulário visível não for possível por questões de layout/design, a solução é acrescentar um aria-label (cf. secção 5.1.4) para dar o nome acessível. Por sua vez, este nome acessível basta ser algo simples e sucinto como “contacto, login ou

newsletter” para transmitir facilmente o propósito de um formulário.

• main – área que contém o conteúdo principal de uma página. Nos browsers

modernos, o landmark main é garantido através do uso da tag HTML <main>. Para garantir o suporte por parte de todos os browsers, ou se o elemento HTML <main> não puder ser utilizado, existe a alternativa do ARIA role=”main” para reforçar a interpretação de um elemento como landmark. O ideal é que exista apenas um

landmark do tipo main por página, uma vez que ter múltiplos landmarksmain seria contraditório e confuso no sentido em que os utilizadores o usam para encontrar o conteúdo principal de uma página de forma rápida. Finalmente, este landmark é um dos mais importantes, quando se usam em conjunto com os skip links (cf. secção 5.2.1), uma vez que estes permitem aos utilizadores que navegam por teclado contornar o conteúdo e avançar para as zonas das páginas que desejam, como avançar para o conteúdo principal neste caso.

• navigation – O elemento nativo HTML <nav> já tem associado um ARIA role (cf. secção 5.1.4) de navegação, que já é interpretado da forma correta na maioria dos

browsers. Estes landmarks devem ser usados conforme seja necessário ao longo de uma página, e caso sejam múltiplos, devem ter nomes acessíveis (cf. secção 5.1.13) para facilitar a sua distinção. Por exemplo, no projeto existe uma navegação primária que possibilita a navegação entre páginas de produtos e a página inicial e possui outras navegações específicas por página que estão devidamente identificadas para serem úteis e fáceis de aceder, como é o caso da paginação na lista de produtos.

68

• region – O ideal é que todo o conteúdo das páginas deva estar presente nos

landmarks apresentados anteriormente. No entanto, pode existir situações em que tal não seja possível, ou que seja necessário que determinada área seja destacada do restante conteúdo, de forma a que seja também encontrada de forma rápida pelos utilizadores de tecnologias assistivas. Para essa finalidade existe o landmark region

que é um landmark genérico e que deve ser devidamente identificado através de um

aria-labelledby ou aria-label (cf. secção 5.1.4) para permitir o rápido acesso e identificação. O uso deste landmark deve também ser limitado, uma vez que vários

region numa página podem diluir a utilidade dos mesmos e pode dificultar a navegação entre os pontos realmente importantes das páginas. Se de facto existirem muitas regions por página, estas devem ser revistas e deve ser feita uma reflexão com a finalidade de perceber se estes conteúdos não ficariam também facilmente identificados com tags como <section> ou <article> com a associação de uma hierarquia de títulos (cf. secção 5.1.9) apropriada. Finalmente, não existe nenhum elemento HMTL nativo que identifique este landmark, por isso deve ser usada a role="region” com o auxílio de nomes acessíveis para garantir o efeito desejado.

• search – O landmark search é um tipo específico de region pertencente aos formulários e possui um papel exclusivo que permite uma descoberta mais fácil entre todos os formulários que podem pertencer a uma página. Como não existe um elemento search nativo (é importante não confundir com input type = "search"), deve ser adicionado um ARIA role="search" no formulário para transmitir apropriadamente este landmark.

Como foi anteriormente mencionado, quanto mais landmarks existirem numa página web, especialmente landmarks do mesmo tipo, menos significado eles possuem na sua capacidade de descrever regiões exclusivas das páginas web. A forma padrão de um landmark ser exposto é através do seu role, como: navigation, banner e main que por sua vez, se forem únicos na página, já ajudam os utilizadores a identificar as áreas. No entanto, se forem múltiplos esta identificação é mais difícil e por isso uma descrição exclusiva pode ajudar a distinguir vários

landmarks e fornece contexto ao utilizador.

Como exemplo, na figura seguinte é possível verificar o uso de um aria-label para acrescentar significado a um elemento de navegação na página de lista de produtos.

69 A utilização do landmark acima vai anunciar “Pagination navigation” quando um utilizador navegar no website através do leitor de ecrã ou quando abrir a lista de landmarks disponíveis do leitor de ecrã na página.

Em suma, utilizar landmarks com recurso a elementos nativos HTML é uma boa prática, no entanto com o objetivo de oferecer suporte a todo o tipo de browsers deve ser adicionada a

aria role mais apropriada para o caso e, no caso de existir múltiplos landmarks do mesmo tipo por página, é sugerido que se use um aria-label para possibilitar a identificação e diferenciação.

Na tabela abaixo é possível verificar o landmark associado a cada elemento nativo HTML5: Tabela 7 - Lista de elementos nativos HTML5 e respetivos landmarks

Elemento nativo HTML5 Landmark associado

<aside>

complementary <footer>

contentinfo – o elemento footer não corresponde ao landmarkcontentinfo quando é descendente de um dos seguintes elementos: article, aside, main, nav e section

<form> form – quando tem um nome acessível e usa

atributos como aria-labelledby, aria-label ou título associados

<header>

banner – o elemento header não corresponde ao landmark banner quando é descendente de um dos seguintes elementos: article, aside, main, nav e section

<main>

main <nav>

navigation

<section> region - quando tem um nome acessível e usa

atributos como aria-labelledby, aria-label ou título associados