3

Reparei que alguns elementos como select, input e button tem o atributo disable, porém o elemento de link <a> parece não reconhecer esse atributo e não fica desabilitado.

Existe alguma forma de fazer um disable em um link de forma semântica?
Digo, existe alguma forma de sinalizar para os screen readers (leitores de tela) que esse link está desabilitado?

<button disabled>button disable</button>
<input type="submit" value="submit disable" disabled>
<select name="" id="" disabled>
    <option value="123">123</option>
    <option value="456">456</option>
</select>
<a href="#" disabled>link disable não funciona</a>

OBS: A intenção não é remover o link da tela, é apenas sinalizar que no momento ele está desabilitado.

8
  • 4
    Posso estar munto enganado... não vejo uma solução semântica para desabilitar um link... o papel dele no hipertexto é direcionar o leitor a um ponto... se ele não existe ou está indisponível, não lhe cabe essa competência. Sua apresentação e comportamento podem ser alterados para indicar isso ao usuário e melhorar sua experiência, mas assim me parece uma solução estética e não semântica. Commented 19/02/2019 às 12:40
  • 1
    @LeandroAngelo o <select> é outro elemento, que mais que o button ou input, visualmente e intrinsecamente sugere que o usuário faça uma interação com ele prntscr.com/mn63i5, porém assim como os outros também tem o atributo disable. O papel do selecté fazer a seleção de alguma opção, porém pode ser desabilitado... A intenção é justamente mostrar visualmente e tb para os leitores de tela que o link está desativado. Assim como os outros elementos. Acredito que a W3C / WCAG ofereça alguma solução para tratar isso...
    – hugocsl
    Commented 19/02/2019 às 13:01
  • 1
    Estava preparando uma resposta utilizando pointer-events do CSS, mas já tem uma pergunta parecida com a sua e respostas muito boas aqui: pt.stackoverflow.com/questions/2352/… e aqui pt.stackoverflow.com/questions/251381/…
    – LeAndrade
    Commented 19/02/2019 às 13:26
  • 1
    Sim, eu digo utilizar pointer-events para dar o aspecto visual, para desabilitar o a teria que utilizar Javascript.
    – LeAndrade
    Commented 19/02/2019 às 13:42
  • 1
    @LeAndrade sim sim, mas não é só o desabilitar/habilitar, o ponto mesmo é como tratar isso de forma semântica com os atributos de acessibilidade que podemos usar no elemento. Mas agradeço pela intenção em ajudar :) e valeu pelos links 💪
    – hugocsl
    Commented 19/02/2019 às 13:45

3 Respostas 3

5

Existe na W3C que especifica um conjunto de atributos para resolver exatamente os problemas de acessibilidade, chamado de WAI_ARIA.

Basicamente você adiciona um atributo chamado de roles e implementa um valor:

<a href="#" role="button" aria-disabled="true">Section name</a>

Aqui estão os comando suportados em um link.

1
  • 1
    Do ponto de vista da semântica é isso mesmo. Obrigado pela resposta
    – hugocsl
    Commented 19/02/2019 às 13:42
2

O tópico de desativar links apareceu no meu trabalho no outro dia. De alguma forma, um estilo de âncora "desativado" foi adicionado aos nossos estilos de tipografia no ano passado quando eu não estava olhando. Há um problema: não há uma maneira real de desativar um link <a> (com um atributo href válido) em HTML. Para não mencionar, por que você iria querer? Links são a base da web.

A certa altura, parecia que meus colegas de trabalho não aceitariam esse fato, então comecei a pensar em como isso poderia ser realizado. Sabendo que isso exigiria muito, eu queria provar que não valia a pena o esforço e o código para apoiar uma interação não convencional, mas temi que, ao mostrar que poderia ser feito, eles ignorariam todos os meus avisos e usariam apenas meu exemplo. prova de que estava tudo bem. Isso ainda não foi muito agitado para mim, mas imaginei que poderíamos passar pela minha pesquisa.

Primeira coisa:

Não faça isso.

Um link desativado não é um link, é apenas texto. Você precisa repensar seu design se ele solicitar a desativação de um link.

Bootstrap tem exemplos de aplicação da classe .disabled para ancorar tags, e eu os odeio por isso. Pelo menos eles mencionam que a classe só fornece um estilo desabilitado, mas isso é enganoso. Você precisa fazer mais do que apenas fazer um link parecer desabilitado se realmente quiser desabilitá-lo.

Maneira do #Surefire (iniciante): remova o href

Se você decidiu que vai ignorar meu aviso e continuar com a desativação de um link, a remoção do atributo href é a melhor maneira de saber como.

Diretamente da especificação oficial de Hyperlink:

O atributo href nos elementos a e area não é obrigatório; quando esses elementos não têm atributos href, eles não criam hiperlinks.

Uma definição mais fácil de entender do MDN:

Este atributo pode ser omitido (como no HTML5) para criar um link de espaço reservado. Um link de espaço reservado se assemelha a um hiperlink tradicional, mas não leva a lugar nenhum.

Aqui está o código JavaScript básico para definir e remover o atributo href:

/* 
 * Use seu método preferido de segmentar um link
 *
 * document.getElementById('MyLink');
 * document.querySelector('.link-class');
 * document.querySelector('[href="https://url.net"]');
 */
// "Desabilitar" link removendo a propriedade href
link.href = '';
// Enable link by setting the href property
link.href = 'https://url.net';

Estilizar isso via CSS também é bastante simples:

a {
  /* Estilo de links desabilitados */
}
a:link, a:visited { /* or a[href] */
  /* Estilo de links habilitados */
}

Isso é tudo que você precisa fazer!

Isso não é suficiente, quero algo mais complexo para que eu possa parecer mais inteligente!

Se você simplesmente precisa fazer engenharia excessiva em algumas soluções extremas, aqui estão algumas coisas a serem consideradas. Espero que você fique atento e reconheça que o que estou prestes a mostrar não vale o esforço.

Primeiro, precisamos estilizar nosso link para que pareça desativado.

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

<a class="isDisabled" href="https://url.net">Link desabilitado</a>

Definir a cor como currentColor deve redefinir a cor da fonte de volta à sua cor de texto normal, sem link. Eu também estou definindo o cursor do mouse para not-allowed para exibir um bom indicador em foco que a ação normal não é permitida. Já deixamos de fora os usuários que não são de mouse e que não podem passar o mouse, principalmente o toque e o teclado, para que não recebam essa indicação. Em seguida, a opacidade é cortada pela metade. De acordo com as WCAG, os elementos desativados não precisam atender às diretrizes de contraste de cores. Eu acho que isso é muito arriscado já que é basicamente texto simples neste momento, e diminuir a opacidade pela metade dificultaria muito a leitura para usuários com baixa visão, outra razão pela qual eu odeio isso. Por fim, o sublinhado da decoração do texto é removido, pois esse é geralmente o melhor indicador de que algo é um link. Agora isso parece um link desativado!

.isDisabled {
  ...
  pointer-events: none;
}

Ok, estamos prontos! Link desativado concluído! Exceto, só é realmente desativado para usuários de mouse clicando e tocando em usuários tocando. E quanto aos navegadores que não suportam point-events? De acordo com caniuse, isso não é suportado para o Opera Mini e IE <11. O IE11 e o Edge, na verdade, não suportam eventos de ponteiro, a menos que a exibição esteja definida como block ou inline-block. Além disso, configurar pointer-events para none sobrescreve nosso agradável cursor não permitido, de modo que agora os usuários de mouse não receberão essa indicação visual adicional de que o link está desabilitado. Isso já está começando a desmoronar. Agora temos que mudar nossa marcação e CSS ...

.isDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.isDisabled > a {
  color: currentColor;
  display: inline-block;  /* IE11/ MS Edge bug */
  pointer-events: none;
  text-decoration: none;
}

<span class="isDisabled"><a href="https://url.net">Link desabilitado</a></span>

Envolver o link em um <span> e adicionar a classe isDisabled nos dá metade do nosso estilo visual desabilitado. Um bom efeito colateral aqui é que a classe desativada agora é genérica e pode ser usada em outros elementos, como botões e elementos de formulário. A marca de âncora real agora tem os point-events e a text-decoration definida como none.

E os usuários de teclado? Os usuários do teclado usarão a tecla ENTER para ativar os links. Os points-events são apenas para ponteiros, não há eventos de teclado. Também precisamos impedir a ativação de navegadores mais antigos que não suportam points-events. Agora temos que introduzir algum JavaScript.

Para o JavaScript.

// Depois de usar o método preferido para direcionar o link link.addEventListener('click', function (event) { if (this.parentElement.classList.contains('isDisabled')) { event.preventDefault(); } });

Agora nosso link parece desativado e não responde à ativação por meio de cliques, toques e tecla ENTER. Mas ainda não terminamos! Os usuários de leitores de tela não têm como saber que esse link está desativado. Precisamos descrever esse link como sendo desativado. O atributo disabled não é válido em links, mas podemos usar aria-disabled = "true".

<span class="isDisabled"><a href="https://url.net" aria-disabled="true">Link desabilitado</a></span>

Agora vou aproveitar esta oportunidade para estilizar o link com base no atributo aria-disabled. Eu gosto de usar atributos ARIA como ganchos para CSS, porque ter elementos com estilos inadequados é um indicador de que falta acessibilidade importante.

.isDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}
a[aria-disabled="true"] {
  color: currentColor;
  display: inline-block;  /* IE11/ MS Edge bug */
  pointer-events: none;
  text-decoration: none;
}

Agora nossos links parecem desativados, desativados e são descritos como desativados.

Infelizmente, mesmo que o link seja descrito como desativado, alguns leitores de tela (JAWS) ainda anunciarão isso como clicável. Ele faz isso para qualquer elemento que tenha um ouvinte de clique. Isso se deve à tendência do desenvolvedor de criar elementos não interativos como div e span como elementos pseudo-interativos com um simples ouvinte. Nada podemos fazer sobre isso aqui. Tudo o que fizemos para remover qualquer indicação de que este é um link é frustrado pela tecnologia assistiva que estávamos tentando enganar, ironicamente, porque tentamos enganá-lo antes.

Mas e se mudarmos o ouvinte para o corpo (body)?

document.body.addEventListener('click', function (event) {
  // filter out clicks on any other elements
  if (event.target.nodeName == 'A' && event.target.getAttribute('aria-disabled') == 'true') {
    event.preventDefault();
  }
});

Nós terminamos? Bem, na verdade não. Em algum momento, precisaremos habilitar esses links, então precisamos adicionar código adicional para alternar esse estado / comportamento (state/behavior).

function disableLink(link) {
// 1. Adiciona a classe isDisabled class ao span pai
  link.parentElement.classList.add('isDisabled');
// 2. Armazenar href para que possamos adicioná-lo depois
  link.setAttribute('data-href', link.href);
// 3. Remove o href
  link.href = '';
// 4. Define aria-disabled para 'true'
  link.setAttribute('aria-disabled', 'true');
}
function enableLink(link) {
// 1. Remove classe 'isDisabled' do span pai
  link.parentElement.classList.remove('isDisabled');
// 2. Seta href
  link.href = link.getAttribute('data-href');
// 3. Remove 'aria-disabled', melhor do que definir como falso
  link.removeAttribute('aria-disabled');
}

É isso aí. Agora temos um link desativado que é visual, funcional e semanticamente desabilitado para todos os usuários. Foram necessárias apenas 10 linhas de CSS, 15 linhas de JavaScript (incluindo 1 body listener) e 2 elementos HTML.

2
1

Acredito que desabilitar o redirecionamento seria impossível, porém, você pode usar algumas técnicas para contornar essa situação. De inicio imaginei em alterar a classe do seu atributo <a> no cenário desejado para alguma estilização específica que bloqueie o acesso ao redirecionamento, fiz uma busca e encontrei nessa pergunta do SO onde encontrei algo parecido com o que imaginei(utilizando oa propriedade pointer-events: none;), não sei se o resultado se comporte de fato com o que você deseja, mas achei bem adequado com sua situação.

No momento em que desejar bloquear o link, você poderia alterar a classe do elemento HTML para uma classe que desabilite o link da tela, e vice versa.

Segue o exemplo:

function ajustarLink(){
		var select = document.getElementById("select").value;
		
		if(select == "h"){
			document.getElementById("link").classList.add("habilitar");
		}else if(select == "d"){
			document.getElementById("link").classList.remove("habilitar");
		}
	}
.desabilitar {
  pointer-events: none;
}

.habilitar {
  pointer-events: auto;
}
<select name="" id="select" onchange="ajustarLink();">
	<option value=" "> </option>
    <option value="h">Habilitar link</option>
    <option value="d">Desabilitar dlink</option>
</select>

<a href="#" id="link" class="desabilitar" >link disable não funciona</a>

2
  • @hugocsl, seria essa a sua situação? Commented 19/02/2019 às 13:40
  • 1
    Do ponto de vista de habilitar o link etc fico bem legal, a resposta do link tb é muito interessante! Só faltou a parte da semântica... Mas agradeço pela contribuição
    – hugocsl
    Commented 19/02/2019 às 13:43

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 .