Can you add alt/aria-label directly into CSS?

Question

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.

Answer 1

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');
});