As we design websites and web pages, we want them to be accessible to as many visitors as possible. This means that we want to take into consideration blind readers, readers with poor sites, readers who may have slow Internet connections, and readers who may be deaf or hard of hearing. Some things you might consider as you create your e-portfolio include:
- Using images that aren't too large, or using a thumbnail version of an image that links to its full size version
- Using only video that has captions, or providing your own transcription
- Not relying on color too heavily to mark the purpose of text
- Ensuring that any audio you include has volume controls
- Using alt tags on images
Of course, these are just a few small things you can do when creating a website. And of course, our semester is short with a lot to cover, so I can't and won't expect you to do all of these things.
The one requirement for our e-portfolio, though, is to use alt tags. Alt tags have many benefits:
- Google searches for text, not images, so this increases the likelihood your image and site will be found through Google searches.
- Text-to-voice readers will be able to read images as text.
- The text shows up before the image when the page is loading, so visitors with sight can preview an image before it loads.
Here is how to go about inserting an alt tag:
Option A: When inserting a new image into the post. The easiest way to do this is through the WYSIWYG interface, by clicking the image icon and uploading and inserting an image into your text.
When you are in the dialogue box for inserting the image, there is a "Name" box. Changing this will change the alt text that someone will hear when they use a text-to-voice reader. Give this a name that will be helpful to someone who can't see the image.
Note: When you insert an image, it's best to choose a "thumbnail" size that's going to fit inside the post. For instance, the original of the image below is 800 pixels wide, which is wider than the post. I chose to make this image 400 pixels wide.
Option B: You already have an image in your post, but want to change the alt tag.
First, switch over to the html editor. This is done by clicking the icon <A>.
Find the source code for the image. It will look something like this (this is the code for the image below):
<img alt="blueprints from Flickr (this is an example of an alt tag)" src="http://www.personal.psu.edu/mjf338/blogs/202cipad/assets_c/2010/11/3489171604_7e33553de4_o-thumb-400x178-164328.jpg" width="400" height="178" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
The text in the quotation marks is the alt text. You can simply change that text (make sure to keep the quotation marks in place) to change the alt text.
Image credit: Florida Keys Public Library's Flickr
A Note on Browsers:
Web browsers used to all show the "alt" text as pop-up text when you hovered over an image. Now some browsers never show the "alt" text once the image is loaded, but instead show the "title" text. If you want text to pop-up when a user hovers over an image, you can add a "title" attribute within your html, like this:
<img alt="blueprints from Flickr (this is an example of an alt tag)" title="blueprints from Flickr (this is an example of a title tag)" src="http://www.personal.psu.edu/mjf338/blogs/202cipad/assets_c/2010/11/3489171604_7e33553de4_o-thumb-400x178-164328.jpg" width="400" height="178" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
Other resource:
Leave a comment