Images vs. Text

An informative website generally has a clear purpose, is composed of compelling content, is organized and easy to navigate. Individual contributing components should include semantic HTML. Semantic HTML can includeheaders, paragraphs, images, video, audio, graphs, charts, tables, lists, quotes, etc. Semantic HTML means that the HTML Tags themselves have meaning.

Images can help illustrate the content on a webpage, play a supporting role to help make a page more visually interesting or break up large amounts ot text.

When using images on a webpage it's best to include an alt attribute or alt text to describe the image to someone who uses a screen reader, or to a search engine robot. Alt attributes also serve as placeholders in case an image doesn't load on the page. Alt Attributes should be kept short but descriptive. If more explanation is needed for an image then a caption will allow for a more in depth description.

Any image that contains text should have Alt Attributes and a Caption, but if there are copius amounts of text in an image, then that text should be on the site as a plain text. It should be clearly indicated that the text is there originally was part of an image.

 

What does that mean?

Loosely put, "meta data" is further definition of data, such as a description of an image.
For example, here's a fictitious site using only images on its homepage. To most visitors with good vision, it's easy to understand:

bad example1

However, if a visually impaired visitor came to this site, or if the images were turned off, the screen readers wouldn't have any information to relay and would only have a layout appearing:

bad example2

Which is why it is so important to cover all the bases with meta data, live text and simple layouts. Here is a stellar example of a compliant site:

331display


Here are some scenarios of people with disabilities using the Web for better understanding. You will find simplicity and forethought will deliver your content to a wider audience.

Simple steps you can take:

1. Embed meta data into your file, and be short and descriptive.
2. Make sure and use a simple, concise layout.
3. Limit your use of imagery and graphics.
4. Refrain from using images only to make a point. Offer clear descriptions.
5. Avoid heavy graphics. They take a long time to load, hindering your site.