Filter property for the image overlay

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Enmanuel Otero Montano! 👋

  Good effort on this challenge! 👍 Your solution looks pretty good! 😀

  About the alternative text for the image, I would recommend trying to see the page without any images. In this case, if the image doesn't exist then there would be no missing information. So, the image on this page would be a decorative image. It doesn't add any information or contain any useful data. But, it makes the page more beautiful.

  For decorative images, you can make them as background images. Background images would also be ignored by screenreaders.

  You need to an alternative to important images such as a logo or an icon that is a button (e.g. Twitter's love icon). This way, the screenreader users would know that the image exists because the image would be pronounced by the screenreader.

  If the image doesn't have alternative text then the image would be ignored by screenreader users. For example, if the logo image doesn't have any alternative text then the users of the screenreader would not know the name of the site.

  I recommend reading "Images Concepts • WAI Web Accessibility Tutorials". Also, try to avoid common alt-text mistakes every time you need to write an alternative text.

  Now, as far as the suggestion for this solution, use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).

  That's it! I hope this information is useful! 😊

  Marked as helpful

  1

  ---

  

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  @vanzasetia Hello sorry for the late reply

  You have really given a very complete answer. I am clear about the use of the alt attribute and the images, the problem is that there are times when the image is a bit ambiguous with the content, but the advice you mention to know if the image should be put from the CSS or with a tag img is great.

  About capital letters, I didn't know that screen readers can spell it, I know perfectly well the properties to make it capitalized from CSS, but I always wondered why it was necessary to do it from CSS when it could be done from HTML. In the same way I am going to check it from the reader and I will tell you how it is, I am very interested in the subject of accessibility.

  Cheers!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Enmanuel-Otero-Montano No worries, Enmanuel! 🙂

  For your information, not all screenreaders will spell the uppercased text. It also depends on the user's setting of the screenreader. But, since the text should not be spelled letter by letter, then I recommend using CSS to uppercase the text visually.

  Marked as helpful

  0

  

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  @vanzasetia Hello!

  Exactly, I just tried it in Chrome and it reads it fine (it doesn't spell it), but applying logic, we see that the properties exist for a reason

  text-transform: capitalize;
  

  text-transform: uppercase;
  

  Thank you!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Enmanuel-Otero-Montano

  What is the screenreader that you are using to test the page? Also, are you trying to use a screenreader on the page when those text are uppercased in the HTML?

  0

  

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  @vanzasetia

  The reader I used to test was the Windows default, yes, I tried it with the uppercase letters in the HTML.

  1
• 

  P

  Justin Green•2,770

  @jgreen721Posted over 2 years ago

  Im pretty sure an argument should always be supplied to an img alt-tag, if for no other reason to improve SEO (googles robots that check your page for element/content integrity sort of a thing). I believe this rule extends/applies for all html labeling. Fsure easy to get lazy on but, for actual production, they become important details.

  Marked as helpful

  0

  ---

  

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  @jgreen721 Excuse me for being late in responding 😅.

  In truth, you shouldn't always implement content for the alt attribute, there are even times when you don't even have to implement the attribute. This all depends on the relationship of the image and the content. It is true what you say about search engines and SEO, the latter must be taken into account, since there are developers who put anything in the alt attribute, without knowing that what should really go there is a description. as close as possible to what the image describes.

  Good point what you say about SEO.👌

  Cheers!

  1