-1

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.

mickmackusa
  • 43,625
  • 12
  • 83
  • 136
Samantha Ashton
  • 23
  • 4
  • 2
    No, you can not add alt text or aria attributes via CSS. – CBroe May 30 '23 at 10:19
  • this also is not how it is supposed to work. The `alt` attribute is not only used for screen readers but also as an alternative if the loading of the image itself failed. It adds redundancy to a document to be completely understandable by itself without external information. Adding that in CSS would remove that. – tacoshy May 30 '23 at 10:58

1 Answers1

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');
});
ZEHAD KHAN
  • 1
  • 1
  • 2
  • This answer is not correct, anchors tags doesn't have `alt` attributes, also ideally you shouldn't try to modify them using JS. You should try to locate the HTML and modify it there. In this case they should add a `aria-label` attribute with some descriptive text like "Search" and "Toggle menu" – Mauro Gava May 30 '23 at 14:25