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.
<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 atributodisable
. O papel doselect
é 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...a
teria que utilizar Javascript.