Getting quite confused when deciding which attributes should go where on the below code:
<div class="image-container">
<img src="images/Local/col-3/03 Rooftops.jpg" />
<div class="image-overlay">
<div class="image-title">Rooftops</div>
</div>
</div>
Assistance placing the Alt attribute, the aria-label and if 'role' is required on the image-container would be great.
Thanks
A basic principle of ARIA, the standard behind role attributes is to avoid them, if you can use semantic HTML elements: The first rule of ARIA
So to your end, there is the <figure> element, which allows grouping media with a <figcaption>. It seems this would be appropriate for your use case.
Most critical for accessibility is to provide an alternative text in the alt attribute, which describes the image, if it's informational. For example "Rooftops with people socialising" or the like.
If your caption for sighted users is explanatory enough to non-sighted ones, you might leave alt empty, but its presence is mandatory: alt="".
<figure class="image-container">
<img src="images/Local/col-3/03 Rooftops.jpg" alt="Rooftops with people socialising" />
<figcaption class="image-overlay">
<div class="image-title">Rooftops</div>
</figcaption>
</figure>
Now this was the theory based on the standards. For the quirky reality though, with different browsers and screen readers supporting different parts, you might need a mixture to support certain versions. See Scott O'Hara's article from 2019 on figure support in different browsers/screenreaders.
If, for some reason, you cannot use semantically correct HTML, there is the figure role, and by means of aria-labelledby you can establish an association between the figure and it's caption: ARIA:figure role and example