Скачать или смотреть Coding for Beginners: CSS Basics #49— Accessibility for Background Images?

Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...

The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here:    / @designerslearncode  

------

In general, content is not meant to be conveyed with background images. Their use is for decorative purposes. This is why there is no attribute to add alternative text to a background image. Assistive technology will not announce the presence of background image nor convey content. So it is best practice to avoid including any information that would be critical to understanding the webpage's intent.

So if an image has important content, it should be rendered as a traditional image (img) and not a background-image.

However, there is a workaround for the instances where you may still want to add alternative text for a background-image anyway, maybe as a courtesy as the image is not essential towards discerning the purpose of the page.

The method involves add a role attribute and aria-label attributes. WAI-ARIA is a suite of Accessible Rich Internet Applications developed by the Web Accessibility Initiative to make web content more accessible. The role attribute set to "img" lets the browser know we are dealing with an image and the aria-label set to the alternative text desired will tell the browser the content of the image.

It is best to set these attributes on an empty span element within a div element because if there are other elements in the div, they may be obscured by the aria-label. Watch the video to see the html.

#HTML #CSS #coding #web #accessibility #background #accessibilitymatters #alternativetext #alttext #decorativeimages #learntocode #webdevelopment #alttextforimages #accessibilityandinclusionforall #codinglife #webdesign #designerslearncode #dailycodesnippet #htmlelements #tags #codingtutorial #htmltutorial #csstutorial #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse #image #backgroundimages #images