Question 178375 in CSS Question posted in
Some basic documentation can be found here.

Can alt/aria-label be added to CSS?

We are currently in the process of completing some accessibility checks on our website. One of the issues it has identified is that the 2 icons on our mobile version need "discernible text":

On this page – https://sthelens.ac.uk/kcc-course-enquiry – When looking at the mobile version, the search icon and hamburger menu icon don’t have alt text. However, I can’t seem to find where this is controlled. I have found the CSS file which allocates the image. Can I add alt text directly into CSS, or do I need to find it in another location?

Also, does anyone know why there seem to be 2 burger menus showing?

We are using Joomla if this helps.

Tags:

2

Answers


  1. 0

    Those icons are all in your anchor tags, so you are using two icons for the menu. If these were images, then you should use "Alt".
    We can add the tag through JS, but you shouldn’t use the alt in the anchor forcefully.
    Source

    const anchors = document.querySelectorAll('.mobile-controls a');
anchors.forEach(anchor => {
    anchor.setAttribute('alt', 'Alternative text');
});
    Login or Signup to reply.
  2. 0

    You can’t do that, But if you want to change alt or any attribute you can use JavaScript.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search