 Dans cette vidéo, je vais te montrer comment masquer quelque chose et en le gardant accessible. Qu'est-ce que ça veut dire par là ? Ça veut dire qu'on va le masquer en CSS, mais les screen readers, pour les non-voyants notamment, pourront lire ce contenu. J'ai mon site pour l'instant qui s'affiche. J'ai pas encore placé le logo. Je le fais tout de suite. Je repars dans l'éditeur. J'édite le header. Je charge mon image. Je la fais un peu plus grande. J'enregistre. Et le souci pour l'instant, si je recharge la page, eh bien j'ai le logo et également le titre et le slogan. Je veux juste le logo, mais je veux que les deux éléments soient quand même accessibles. Pour ce faire, j'ai synchronisé le CSS entre le bac et le front. Donc j'ai une vidéo dédiée sur le sujet. Et j'ai ajouté cette classe que j'ai récupérée en ligne qui s'appelle SR Only. En somme, ça veut dire screen reader only. Donc je retiens cette classe. Je repars dans mon back-office, dans la partie éditeur. Je prends l'élément en question. Je m'assure que c'est bien le bon. Je suis bien sur le titre du site. Je pourrais le faire sur tout le groupe d'ailleurs. Puisque à l'intérieur du groupe, j'ai le titre du site et le slogan. Je prends le groupe. Je vais à droite, avancer. Je vais dans classe. Et je fais SR Only. Si je recharge la page, tu vois que les éléments disparus. Je vais regarder ce qui se passe en front. Je recharge. Et donc les deux éléments sont bien masqués. Par contre, ils sont toujours accessibles dans le back-office. Et pour les lecteurs de sites, ils auront accès à ces contenus. Je te montre le modèle. Je suis dans le logo. Et je vais dans le groupe. Et j'ai bien titre du site et description du site. Qui sont masqués mais qui sont encore présents dans la structure. Et surtout, accessibles pour les non-voyants.