What HTML attributes and elements make a banner accessible to screen readers?

WHAT THIS TESTS: This question evaluates whether you understand how non-interactive promotional content is exposed to assistive technology. Screen readers rely on programmatic labels, semantic elements, and heading hierarchies to announce purpose and structure. The interviewer wants to see that you do not treat accessibility as an afterthought applied only to interactive controls.

A GOOD ANSWER COVERS: A good answer hits four things in order. First, the image must have an alt attribute. If the image conveys the promotional message, the alt should be a concise description of that message. If the image is purely decorative, use an empty alt so the screen reader ignores it. Second, the text should live in a proper heading element such as h2 rather than a styled div, because headings provide navigable structure. Third, the banner should be wrapped in a landmark region such as aside or section with an aria-label or aria-labelledby attribute pointing to the heading, which allows screen reader users to jump to the region via landmark shortcuts. Fourth, if the banner acts as a link, the anchor or button should have an accessible name that combines the image alt and the heading text or uses aria-labelledby to reference both.

COMMON WRONG ANSWERS: A common wrong answer is using generic div and span elements with CSS alone and claiming the visible text is enough. Another red flag is omitting the alt attribute entirely or writing unhelpful alt text such as image or banner. Some candidates suggest title attributes as the primary label, which is unreliable because many screen readers ignore them or expose them inconsistently. A third wrong pattern is wrapping the entire banner in a link but providing no text alternative, leaving the screen reader to announce only the URL.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle a banner that auto-rotates, which introduces motion and focus management concerns. They might also ask whether you would use role equals banner or treat the promotional block as a complementary landmark. Another follow-up is how you would test your markup with a screen reader or automated tool.

ONE CONCRETE EXAMPLE: Imagine a summer sale banner with a photo of sunglasses and a headline reading Summer Sale Up to 50 Percent Off. The markup would be an aside element with aria-labelledby pointing to an h2 id equals promo-heading. Inside, an img src equals sunglasses.jpg alt equals Summer sale up to 50 percent off on sunglasses. The h2 contains the visible headline. This gives screen reader users a landmark region labeled by the heading, an image with a meaningful alternative, and a navigable heading level.

Source: developer.mozilla.org