FAQ: Accessibility - Alt Attribute

This community-built FAQ covers the “Alt Attribute” exercise from the lesson “Accessibility”.

Paths and Courses
This exercise can be found in the following Codecademy content:

FAQs on the exercise Alt Attribute

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Hello all,

Regarding the lesson on Web Accessibility (ARIA)

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/responsive-design-and-accessibility/modules/web-accessibility/lessons/accessibility/exercises/accessibility

Are ARIA roles and properties only applied in HTML? Or are they found in CSS and JavaScript as well?

Thanks!

In this lesson, it is stated:

  1. If an image conveys no information (such as a decorative border), the alt attribute should be empty, but should never be omitted.
  2. If an image is described by text near the image, do not duplicate the description in the alt attribute. Use an empty alt attribute instead.

This doesn’t seem very clear to me—what is the usefulness of an empty alt attribute in these, or other, instances?

1 Like

Reviewing this lesson, I encountered the same question, and then found a compelling answer from this website: Accessibility Tip: Empty alt Attributes

<!-- BAD: image URL will be read out -->
<img src="/wp-content/themes/punky/images/logo.png">

<!-- BAD: adding useless cruft alt -->
<img src="/wp-content/themes/punky/images/logo.png" alt="Logo">

<!-- GOOD: empty alt is silent -->
<img src="/wp-content/themes/punky/images/logo.png" alt="">

"Images with only visual value should have an empty alt attribute set on them. Omitting the alt attribute makes most screen readers read out the entire image URL [emphasis mine] and providing an alt attribute when the image is for visual purposes only is just as useless. "

This seems like a really useful point to add to the lesson…

1 Like

Bottom line, for the purposes of accessible images, never omit the alt attribute, and use it according to WAI-WCAG guidelines. For images that are strictly meant as visual enhancements or skin graphic use CSS background images, then there is no issue with accessibility.

So is aria-label just the next-step when alt isn’t available?

Alt is always available. It is a required attribute. The best way to learn about and justify the aria-label is to read their documentation, and anything you can find on w3.org.

aria-label - Accessibility | MDN

But it says this in the lesson:

On the other hand, the value of aria-label will never be displayed on the screen and is a better choice for elements that do not support the alt attribute.

Which is most elements. alt is not a global attribute.

Sorry, I’m completely lost

Suggest put aria-label on hold and concentrate on HTML fundamentals. Accessibility can wait, for the time being. It has to begin with valid, well formed HTML documents. Go back and get yourself unlost.

I’ve completed all the HTML lessons

How familiar are you with the specifications and recommendations of w3.org and whatwg.org? If you’ve finished the courseware, then the above reading would be warranted and advisable. Follow up with WAI/WCAG, CSS validation, and best practices from those regards.

Not all all. I don’t think they were used in the courses but I’ll check em out. Thanks

1 Like

It’s possible they feel misled because in one reply you say

Alt is always available. It is a required attribute.

Then in another you say

Which is most elements. alt is not a global attribute.

Which without further context appears contradictory.

Unrelated, my own question is: is there a situation where you would use both alt and aria-label on the same element?

There are very few elements that ‘support’ the alt attribute, and I suspect all of them are media related. It is not a global attribute, though, which means it should not be written on any element for which it is not explicitly recommended in the W3C spec. WHATWG may have something else to say about this, so do a little reading over the holidays if you find the time.

ALT is a legacy attribute that goes way back to HTML 4 and earlier. It is not being replaced by aria-labels, only augmented. They are not cross-purpose, as such, and so the alt should be included in all img tags, even if written as an empty value: alt=“”.