Using high-quality images can illuminate course content and create visual interest. Don't forget, our graphic designer is a great resource to help you identify or create good quality images. We would also encourage you to request the creation of a design board for your course to enhance the overall visual accessibility. Figure 1 is one example created for the newly designed Online Master of Business Administration (OMBA) program.
Figure 1. Example of a Design Board
When selecting images, keep in mind that there are both good and bad ways to use an image on a page. In some instances, it would be better not to use an image at all. Let's explore each method.
Good Use of Images
Do use an image if the image is
informational: flow charts, maps, diagrams, and so on
affective: pictures used to set mood, like people, animals, comics
decorative: backgrounds, borders, dividers, and so on (Note: Make sure they do not distract from the content!)
Bad Use of Images
Don't use images of
tables: Use the HTML <table/> element instead.
lists: Use the HTML <ol/> , <ul/> , or <dl/> elements instead.
text: Use HTML instead (unless it's an infographic).
math: Use MathML <math/> instead.
Text Is Sometimes Better Than an Image
There are many reasons for not using images of content that could be text:
Text enlarges well.
Text is searchable.
Text can be copied and pasted.
Text loads faster and uses less data.
Text is readable by those using assistive technology.
Examples of When Text Is Better
Table Example
Figure 2 is an image of a table, which is not good because the accessible version of this content is an actual table. When you can, you want to provide one format that works for everyone.
Figure 2. Table as Image
Table 1 is an HTML table that can be read by everyone, including screen reader users. This is a better choice.
Level
Characteristic
Length of Plan
Table 1. Organizational Planning
Corporate
Developed by top management and identifies the long-term direction of the entire organization
5+ years (look to future)
Business
Developed by mid-management and sets the long-term direction of a company division which meshes with the corporate plan
1–5 years
Functional
Developed by lower level management and shows how each function (production, accounting, and so forth) will operate to achieve the goals of the division
< 1 year
List Example
The image of a list (Figure 3) is better as an actual list.
Figure 3. List as Image
The list can be styled visually so that it looks better than the image.
A receptionist's job description may look something like this:
Answer the telephone, including screening and directing calls to the appropriate department or person.
Take messages for those employees who did not answer.
Greet all visitors to the building.
Make visitors comfortable by offering beverages while they wait.
Provide directions to visitors.
Maintain the reception areas by straightening chairs and putting magazines away.
Answer general questions from the public.
Provide clerical support to other business areas when necessary.
Receive and sort mail and other deliveries for distribution to the addressee.
Schedule appointments for staff members.
Organize meetings, including room scheduling and setup.
Image of Text Example
Images of quotes can add visual interest, but when those are used to emphasize key points, people who can't see the image will be at a disadvantage. To draw attention to text, it is better to use a color box with real page text.
Figure 4. Text as Image
"No amount of time can erase the memory of a good cat, and no amount of masking tape can ever totally remove his fur from your couch." -Leo Dworken
Math Example
Figure 5 is an image of math, and it is much better to use MathML instead. See the Math module for more information on creating math code.