Hi JHONFXA
An FAQ like this one is an example of a Disclosure pattern. Here is an excellent explanation of the definition by one of our Mentors at Frontend Mentor , Grace:
A "disclosure" means any user interface (UI) pattern that reveals
additional content following some kind of user interaction.
Common examples are tooltips, mobile menu toggles and accordions.
Here is a link for more information Disclosure - ui. Some of the highlights are as follows
- open disclosures with a button click (not hover or mouseover)
- use aria-expanded to communicate state to assistive tech
- use aria-controls to programmatically link buttons with the content they're controlling for the JAWS screen reader
The disclosure has to be interactive, hence you need to use interactive elements such as a button. An img element is not an interactive element and should never have a click event.
Alt value should be meaningful if the image is not decorative, a decorative image should have an empty alt value. A message such as expand answer is not beneficial to assistive technology users.
Test your site with a keyboard only , you will find out that the content is not focusable.
Marked as helpful
@JhonFXA
Posted
@ChamuMutezva Oh, I get it! I'll take care of these issues right away. Thanks!
@JhonFXA
Another technique to use is the details summary element , it is worth looking at
@JhonFXA
Posted
@ChamuMutezva Thank you, i'll take a look.
I've embedded images within buttons with aria-expanded, aria-controls, and aria-label attributes. I've read that the aria-controls value should be a list of IDs. However, I wanted to avoid assigning a unique ID to each answer, so I dynamically added aria-controls attributes and IDs for each answer using JavaScript.
I'm unsure whether the images inside the buttons need to have alt text, or if the ones I've provided are good enough. I would appreciate it if you could take a look when you have the time to. Thank you once again for your assistance!
@JhonFXA
- the image are just decorative - so an empty alt value is needed.
- since the buttons have an
aria-label, the part of havinggive the button an accessible name, has been covered. If you navigate with a keyboard , you will notice that the buttons are receiving focus and can be opened and closed
Well done
