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.
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.