Trouble with Text Content in Images

This happened several months ago…

My friend told me that the channel which aired our favorite shows had changed its program schedule. So after work, I visited the channel’s web site and looked for the new schedule of programs.

And there was the schedule, but oh, it was impossible to read…at least for people like me.

What in the Name of TV was the Problem?

The program schedule was in a jpg image.

Well, this may not seem to pose any problem to people who can see, right? But for persons who cannot see and who use a screen reader to access online content, it’s virtually impossible to access text within an image file.

You see, blind Internet users (like me) normally use a software called a screen reader to access online information. A screen reader acquires textual information on the screen and uses a speech synthesizer to speak the information in a semi-human voice, so that the user can hear it.

Screen readers can read text in web pages. BUT it cannot read text that has been placed within an image file. Examples of image files include those having jpg, gif, png, and bmp file extensions.

Bisecting an Example of Text Within an Image File

When I last checked the channel’s web site, the program schedule was no longer in jpg format. So let’s have another example then.

This is an image file containing the timetable and fare for a train service in Malaysia.

timetable and fare for a train service in Kuala Lumpur, Malaysia

Generally, sighted persons will not have any problem viewing the information in the image. But those of us who use screen readers won’t be able to access and understand the details above.

When we focus our cursor on the image file, all the screen reader would say is “graphic, timetable and fare for a train service in Kuala Lumpur, Malaysia”. This is basically the text description provided in the image’s source code. The screen reader will not be able to read the actual information such as the schedule and the fare for the train service.

What is a Good Solution to this Problem?

Placing the text within a properly marked up HTML table is one of the best ways to ensure that screen readers would be able to read the information above. Once the data has been placed in a properly marked up table, screen reader users can navigate through the columns and rows and access the information in the table.

But wait. Screen reader users are not the only ones who would benefit from this technique. Persons who use text-only browsers and persons who use mobile devices would be able to access your text content if you placed it in your web page instead of providing it in an image file.

This is just one way to enhance the accessibility of the content of your site. But this little technique would surely enable many of your visitors to enjoy and make good use of your content.

Advertisements

Tags: , ,

4 Responses to “Trouble with Text Content in Images”

  1. Moses Choo Says:

    Good, very clearly stated. I hope you will get more readers. Perhaps, send an amail to the site that you got the schedule.

  2. jouielovesyou Says:

    Hello Julius,

    I am also blind and support your initiative. I feel sad when I encounter those inaccessible websites like when I was browsing the help section of a website last week, I was told that to see the detailed instruction on how to *…*, my browser was redirected to a section which contains the information. However when I tried to navigate by pressing arrow keys, I quickly realized that the page is just a whole image that has text on it like what you were talking about.

    Are you aware that you can download the image and convert it to word document? Well, that’s in case we’d want to tolerate this practice and do the work for them.

    Jouie

    • Julius Charles Says:

      Hello Jouie,

      Thanks for your comment. Basically, you can convert images to text files, word documents, and other formats. But this really shouldn’t be the task of the visitor. Accessibility should be present right out of the box.

      Regards,

      Julius

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: