A equipe de desenvolvimento do Medium discutiu algumas práticas ruins que quebram a acessibilidade. Em um exemplo, eles argumentam que opacitynão é bem suportado por leitores de tela e, portanto, se quisermos ocultar um elemento em uma transição, devemos sempre usar o visibilityatributo também:
.m-fadeOut ( visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; ) .m-fadeIn ( visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; )Lembre-se de que a opacidade e a visibilidade ainda deixam um elemento no fluxo do documento. Se você precisar removê-lo do fluxo, há mais trabalho a fazer. Na verdade, aqui está uma maneira de pensar sobre eles ...
| pode tornar as coisas invisíveis | pode tornar a coisa impossível de clicar | remove do fluxo de documentos | pode ser transferido | pode ser revertido na criança | |
|---|---|---|---|---|---|
| opacidade | sim | não | não | sim | não |
| visibilidade | sim | sim | não | sim | sim |
| exibição | sim | sim | sim | não | não |
| eventos de ponteiro | não | sim | não | não | não |
Se você precisar alterar o valor de exibição de um elemento após um desvanecimento, isso é mais difícil. Não é realmente possível em CSS, pois displaynão é passível de transição. Snook escreveu sobre isso, incluindo algum JavaScript para ajudar.