Today's Progress
Today I reviewed the Images and Alt Text lesson in Skillcruch. Newbies need to remember that image tags are self-closing so they don't need a closing tag. To put an image on a website, developers use the src to attribute the URL to your desired site.
Another important attribute is the alt text. This one provides a text description of what the image is. It is great for accessibility because it helps users like me know what we are looking at.
Skillcrush shares another video of how screen readers handle images and use the alt text attribute. As you create images in the future, you'll want to make sure your description provides just as much context as this example. Just putting down "rabbit" or "birthday" isn't enough information for users so don't be afraid to add more information if needed.
==> Click to watch screen reader images and alt text video!
Skillcrush shared some other great tips for alt text which I am going to use to help me better write better descriptions in the future.
1. Keep it brief.
Skillcrush says about 125 characters or less. The key is to strike a balance. You don't want to write one word but at the same time you don't need to put an entire paragraph.
2. Get to the point.
The user and screen reader know it is an image so avoid using words like "image" or "gif of" in the description. Developers often talk about DRY ("Don't Repeat Yourself") in code. The same thing goes for alt text.
3. Don't duplicate the caption.
Make sure your caption text is different than your alt text. That way the computer doesn't have to read the same text over again. Although it might be tempting to do this for you since it will be easier, don't do it!
4. Describe image content and intention.
It might be tough knowing what to put for the description but the key to think of why you are using the image.
-Are there visual characteristics to know about?
-Is there meaning or context a user might miss if they can't see the image?
Ultimately it depends on the image. Some images like logos or icon might not need a big explanation. However, a much more meaningful image might need that alt text.
Follow your gut here. If you feel like you need a better description for your image, you should add more detail.
Skillcrush describes how to find an image's source and how to add animated gifs on a website using the image tag. When I started learning how to code I only learned how to add images. So I might need to throw a gif somewhere on my portfolio site in the future.
The practice quiz went well today. The typos question still was a little tough since it takes me longer to scan through text these days. But I was able to do the task at hand.
Next, I completed the two coding activities. One featured Jane Austen so I was thrilled to do this one. The second didn't have a theme like the first exercise, but Skillcrush also explained the difference between jpg and png files before diving into the task. This is great for new developers learning about these extension files for the first time.
Tomorrow's plan
I am still going to continue on with Skillcrush. Tomorrow's lesson is links. This will review why links are important for developers to use on websites and how to add links to a website. If you are interested in learning more about alt text or need some resources to use on your site, I've included the links in my resource section below.
Top comments (0)