Bebou et Pikselkraft vs TUI

Pre et ASCII Art

Balise pre seule

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links	oui	oui	oui
browsh	oui	oui	oui
gecko/webkit/blink	oui	oui	oui*

* besoin d'un texte alternatif (avant, aria-describedby) et aria-hidden="true" pour une transcription accessible

Le titre Designer Ethique en ASCII art

  
   _____            _                               __  _   _     _                       
  |  __ \          (_)                            _/_/_| | | |   (_)                      
  | |  | | ___  ___ _  __ _ _ __   ___ _ __ ___  | ____| |_| |__  _  __ _ _   _  ___  ___ 
  | |  | |/ _ \/ __| |/ _` | '_ \ / _ \ '__/ __| |  _| | __| '_ \| |/ _` | | | |/ _ \/ __|
  | |__| |  __/\__ \ | (_| | | | |  __/ |  \__ \ | |___| |_| | | | | (_| | |_| |  __/\__ \
  |_____/ \___||___/_|\__, |_| |_|\___|_|  |___/ |_____|\__|_| |_|_|\__, |\__,_|\___||___/
                       __/ |                                           | |                
                      |___/                                            |_|

Visibility hidden

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links	oui	oui	oui
browsh	oui	oui	oui
gecko/webkit/blink	oui	non	oui*

* besoin d'un texte alternatif et aria-hidden="true" pour une transcription accessible

Le titre Designer Ethique en ASCII art

  
 _____            _                               __  _   _     _                       
|  __ \          (_)                            _/_/_| | | |   (_)                      
| |  | | ___  ___ _  __ _ _ __   ___ _ __ ___  | ____| |_| |__  _  __ _ _   _  ___  ___ 
| |  | |/ _ \/ __| |/ _` | '_ \ / _ \ '__/ __| |  _| | __| '_ \| |/ _` | | | |/ _ \/ __|
| |__| |  __/\__ \ | (_| | | | |  __/ |  \__ \ | |___| |_| | | | | (_| | |_| |  __/\__ \
|_____/ \___||___/_|\__, |_| |_|\___|_|  |___/ |_____|\__|_| |_|_|\__, |\__,_|\___||___/
                              __/ |                                           | |                
                             |___/                                            |_|

Pre et sr-only

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links	oui	oui	non
browsh	non	non	non
gecko/webkit/blink	oui	non*	oui**

* oui avec focus, active

** besoin d'un texte alternatif et aria-hidden="true" pour une transcription accessible

  
 _____            _                               __  _   _     _                       
|  __ \          (_)                            _/_/_| | | |   (_)                      
| |  | | ___  ___ _  __ _ _ __   ___ _ __ ___  | ____| |_| |__  _  __ _ _   _  ___  ___ 
| |  | |/ _ \/ __| |/ _` | '_ \ / _ \ '__/ __| |  _| | __| '_ \| |/ _` | | | |/ _ \/ __|
| |__| |  __/\__ \ | (_| | | | |  __/ |  \__ \ | |___| |_| | | | | (_| | |_| |  __/\__ \
|_____/ \___||___/_|\__, |_| |_|\___|_|  |___/ |_____|\__|_| |_|_|\__, |\__,_|\___||___/
                     __/ |                                           | |                
                    |___/                                            |_|

Pre avec display none

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links	oui	oui	non
browsh	non	non	non
gecko/webkit/blink	non	non	non

  
   _____            _                               __  _   _     _                       
  |  __ \          (_)                            _/_/_| | | |   (_)                      
  | |  | | ___  ___ _  __ _ _ __   ___ _ __ ___  | ____| |_| |__  _  __ _ _   _  ___  ___ 
  | |  | |/ _ \/ __| |/ _` | '_ \ / _ \ '__/ __| |  _| | __| '_ \| |/ _` | | | |/ _ \/ __|
  | |__| |  __/\__ \ | (_| | | | |  __/ |  \__ \ | |___| |_| | | | | (_| | |_| |  __/\__ \
  |_____/ \___||___/_|\__, |_| |_|\___|_|  |___/ |_____|\__|_| |_|_|\__, |\__,_|\___||___/
                       __/ |                                           | |                
                      |___/                                            |_|

Formes CSS

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links	non	non	non
browsh	oui	oui	non
gecko/webkit/blink	oui	oui	non

le contenu est visible sur un navigateur textuel

Animation CSS

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links	non	oui*	non
browsh	non	oui*	non
gecko/webkit/blink	oui	oui	non

* Contenu sans animation

Un texte qui fait un kickflip

CSS before/after

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links	non	non	non
browsh	non*	oui*	non
gecko/webkit/blink	oui	oui	oui

* Les emojis ne sont pas reconnus (carré)

Le site de Katzele

Emoticône, emoji, unicode

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links	oui	oui	non
browsh	non*	oui*	non
gecko/webkit/blink	oui	oui	oui/non

* Les emojis ne sont pas reconnus (carré)

Note sur l'accessibilité

Un emoji est rendu... parfois avec une bonne transcription.
C'est beaucoup plus rare pour un emoticon, kaomoji

Le site de Katzele 😸

¯\_( ͡° ͜ʖ ͡°)_/¯

✌☀

HTML markee

À éviter pour l'accessibilité, la balise n'est plus standard

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links*	non	non	non
browsh*	non	non	non
gecko/webkit/blink	oui	oui	non**

* Contenu sans animation

** Pas d'annonce de l'animation

Designer éthique

Texte dédié aux navigateurs textuels

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links*	oui	oui	non
browsh*	non	non	non
gecko/webkit/blink	non	non	non

Les navigateurs textuels modernes pausent un problème pour séparer les deux rendus.

Image

Navigateur	Rendu	Visible	Lecteur d'écran
w3m/lynx/links*	oui/non*	oui/non*	non
browsh*	oui**	oui**	non
gecko/webkit/blink	oui	oui	oui

* alt text affiché, possiblité de voir l'image en fonction de la configuration.

** Rendu avec librairie catimg.

le serveur bebou, un raspberry pi tout mignon.