Web Accessibility And Images

Web Accessibility And Images

A common issue on websites that should be a relic of the past is how improper coding of images hinders accessibility. On-screen readers (software that reads the page aloud), braille readers, alternative navigation, and so forth the placement of presentational images in the HTML and lack of proper code for the content images results in a poor user experience.

A common issue on websites that should be a relic of the past is how improper coding of images hinders accessibility. On-screen readers (software that reads the page aloud), braille readers, alternative navigation, and so forth the placement of presentational images in the HTML and lack of proper code for the content images results in a poor user experience.

In fact, done poorly they are an accessibility violation under the Web Content Accessibility Guidelines.

What Are Presentational Images?

Also called “decoration”, “design”, or “template’ images, these are decorations that are not part of the content. They range from images used to make styled borders, to icons and logo’s used to represent controls, company names, and other such presentation. That is what distinguishes them from “content images”.

Whilst many such images have gone the way of the dodo with CSS 3’s increasing ability to handle such things without images, there are a lot of cases where we still end up resorting to them.

What’s Wrong With Presentational Images?

In and of themselves? Nothing! Like a great many things on websites it isn’t the concept that’s the problem, it’s the implementation. Applied improperly they can confuse non-visual users, and sometimes even visual users. They also can make search engines improperly rank your page or slap your page around for bad UX and/or confusing content.

HTML is for saying what your content is, not what it looks like. Presentational images are exactly that, PRESENTATION! They belong in your CSS so that:

  1. They don’t “exist” for non-visual users. If you put them into an tag, you’re doing it all wrong.
  2. You can prevent them from being sent to non-visual users by having a media=”screen” on your external stylesheet
  3. You can easily apply different appearances / images for different media targets (like print) or across different skins without changing the markup.
  4. Text can be applied in their stead in the markup for things like iconography driven controls. You then hide that text to show the image using CSS.

What About Content Images?

Images actually related to your content on the other hand are integral to the page itself regardless of media or layout. The number one way to tell content from presentation is to ask how relevant is said image to the topic.

If it’s some artsy line-art to fill visual space? That’s not content. A company logo in the page header representing the company name? Not content. A fancy border? Not content. A bullet for a styled list? Not Content. An icon for a link representing an action — like done on social media links? NOT CONTENT!

css accessibility wcag html

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

Sidebar Menu Using Only HTML and CSS | Side Navigation BarHello friends, Today in this video you'll learn how to create a Sidebar Menu using HTML and CSS onl...

Responsive Footer Design using HTML, CSS & Bootstrap

Today, I am going to show you how to create a footer design using HTML, CSS and bootstrap. This is a Complete Responsive Footer Design.

HTML Tutorial For Beginners

In this article, we’ll tutorial the best ways for learning HTML to assist you on your programming journey.

Neumorphism Card Design using HTML and CSS | Pure CSS Card

Let's design a card with Neumorphism UI using pure HTML and CSS code.

Menu Design using HTML and CSS | Tile Menu using HTML and CSS

Let's code a simple and best looking menu tiles using HTML and CSS