Pouvez-vous ajouter alt/aria-label directement en CSS ?

Question

Nous effectuons actuellement des vérifications d'accessibilité sur notre site Web. L'un des problèmes détectés était que 2 icônes sur notre version mobile nécessitaient un « texte reconnaissable » :

Sur cette page - https://sthelens.ac.uk/kcc-course-enquiry - l'icône de recherche et l'icône du menu hamburger n'ont pas de texte alternatif lors de la visualisation de la version mobile. Cependant, je n'arrive pas à trouver où il est contrôlé. J'ai trouvé le fichier CSS qui attribue l'image. Puis-je ajouter le texte alternatif directement au CSS, ou dois-je le trouver ailleurs ?

De plus, est-ce que quelqu'un sait pourquoi il semble y avoir 2 menus de hamburgers affichés ?

Si cela peut vous aider, nous utilisons Joomla.

Answer 1

Ces icônes sont toutes deux dans votre balise d'ancrage, vous utilisez donc deux icônes dans votre menu. S'il s'agit d'images, vous devez utiliser "Alt". Nous pouvons ajouter des balises via JS, mais ne forcez pas l'utilisation de alt dans l'ancre. Source

const anchors = document.querySelectorAll('.mobile-controls a');
anchors.forEach(anchor => {
    anchor.setAttribute('alt', 'Alternative text');
});