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

Question

We are currently completing some accessibility checks on our website. One of the issues it found was that 2 icons on our mobile version required "recognizable text":

On this page - https://sthelens.ac.uk/kcc-course-enquiry - the search icon and hamburger menu icon do not have alt text when viewing the mobile version. However, I can't seem to find where it is controlled. I found the CSS file that assigns the image. Can I add the alt text directly to the CSS, or do I need to find it somewhere else?

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

If this helps, we are using Joomla.

Answer 1

The icons are both in your anchor tag, so you are using two icons in the menu. If these are images, then you should use "Alt". We can add tags through JS, but don't force the use of alt in the anchor. source

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