Site Navigation – One Type Does Not Fit All

What type of site navigation should your website have to make it easy for visitors to find the information they are looking for?

Most website creators have to think about how users will navigate their site. I say most and not all because if you have a very simple site that consists of just a single page, you really do not need navigation unless your page has multiple topics and requires the user to scroll to see them all. (Then you might want to use section headers and a Table of Contents to allow the user to quickly jump to the topic in which they are interested. More on headers at another time.)

Suppose that your website has only a few pages. Besides the home page, you might have an About Me/Contact Us page and two or three other pages. An example taken from my site https://nueweb.org has the following menu across the top of the page.

Example of a horizontal static menu.

This menu consists of only four topics. The selected topic is displayed as bold text while the others are regular text and more of a grey than a black font color. To go to one of the other pages, you need only click on the one you want to go to. In addition to pages on your site, a menu item can also link to another site. In my case, the My Old School Site is just a link to a site I supported in a previous life.

Usually, horizontal menus appear across the top of your website. However, they can also appear across the bottom of the page. The probably with putting it on the bottom of the page is that if the user must scroll to see the menu options, they may not even both and go to a different site instead.

It is also reasonable to create a menu that appears vertically on the left side of the page. (Left because we read left to right.) This orientation is useful when you have more links that can fit horizontally across the top of the page. You never want a horizontal menu to wrap around to a second line. One reason for this is related to the ADA concern that clickable links must have sufficient vertical space between them so that visitors with issues pointing and clicking their mouse are less likely to click the wrong link. If you have a lot of menu links or if the number of links can vary by the user or by the user’s action, placing them vertically along the left side of the page with plenty of space between each line is a common alternative. This menu method is used by Outlook, Google Mail, and many others to display your mail folders since you can add or remove folders at any time and you can have dozens of individual folders.

A typical vertical style menu.

Another way around a large horizontal menu is to have as the last button on the right an option to display more menu items. The three dots in a horizontal line shown below or three stacked horizontal lines (known as a hamburger button) show a typical vertically oriented dropdown menu box.

Use of a button on the right side of a horizontal menu to display additional menu items as a dropdown menu.

But what if you have a series of pages that are related to the main topic rather than being separate topics in themselves. In this case, a dropdown menu from an option in a horizontal menu like the one shown above can in theory support any number of items. However, as a practical standard, you do not want the dropdown to have so many items that the user would have to scroll vertically to see all of them. Because they won’t.

For a vertical menu, an indented submenu is a common way to expand the menu with subtopics such as the one shown on Microsoft’s Start Menu. This image shows what happens when the Windows System folder is clicked to show the programs found within it. The same technique could be applied to web pages related to a common topic.

Example of expanding a vertical menu with indented submenu items.

Another way to display a submenu is through the use of a ‘flyout’ menu. In the example below, the dropdown for the horizontal menu item, Academics, first lists various academic areas for a school. Next, the Performing Arts menu item from the dropdown has a fly-out menu that includes Band, Chorus, Orchestra, and Theatre. Similarly, the Band menu item has a fly-out for different band groups that are supported. Note that each menu item that has additional menu selections in a fly-out is indicated by a right-pointing arrow to hint to the user that there are more options.

Example of fly-out menus beginning with Performing Arts with the Academics dropdown menu.

Some sites have a large number of different topics and while a menu structure could serve to display links to each of the topics, sometimes a sitemap on a separate webpage with all of the topics listed is a better alternative. In the example shown below, a site map shows all the departments within an organization as links. The site visitor can then click on the department page to get redirected to the top page of that department. That does not mean that the department only has a single page. Indeed, it may have its own menu of individual pages and subtopics using any of the above navigation methods including this one. The point is that you do not want to display these subtopics in a menu off the website’s main page because the sheer number of subtopics across all departments would be too much information for most users to easily navigate. Therefore, the Home page of the site may have a single link for Departments which shows links to this page displaying the sitemap from which the user can select the department they need to visit.

Example of a sitemap or a mega-menu.

Rather than use a separate page for a site map, this same basic structure can also appear as a drop-down menu. But since the dropdown has more than one column, it is often referred to as a mega-menu.

The use of an individual image sometimes referred to as an icon image, can also serve as a menu provided the image has a properly defined title and alt properties to help the visually impaired. It is also possible to use an image with hotspots that the user can click on to navigate to different parts of the website. Sometimes that image uses graphics that the user might readily identify with an action or perhaps one or more words of text. In either case, the problem with this type of menu is that it is probably not ADA compliant because a blind user would not easily know where to click on the image or perhaps that they even must. To make the menu ADA compliant, you might need a secondary menu like one of the above structures to help blind visitors to your site navigate around. Also, if you do use text on an image, the font color of that text must contrast with the background color according to the ADA rules of color contrast which are:

  • Text and images of text that is at least 14 points and bold or at least 18 points must have a color contrast ratio between the text color and the background of at least 3:1.
  • All other text and images of text must have a contrast ratio of at least 4.5:1.

See:    Must Text Color Contrast with the Background of an Image? – NUEWeb

The Wonderful World of Color – NUEWeb

Choosing Image Formats for the Web – Part 1

There are many different image formats that you can choose from but only a few a common to most websites. I’m going to limit my discussion to the five most popular here and give you my opinion about the pros and cons for each of them.

BMP

This image format was one of the first ones used on the web because many early digital cameras captured images using this format. BMP stands for Bitmap image and is a device independent format. Thus, it works well on all personal computers, tablets, laptops, and phone. It can support from 1 bit per pixel (essentially just black and white dots much like a newspaper print image up to 24-bit color which supports over 16 million colors. Early computers supported graphics of only 16 colors. While this was rather limiting, it served the needs of early games and data charting (after all, most charts don’t need more than 16 colors because more than that can be confusing). Over time, as computers supported more color depth (bits), BMP images added more bits per pixel to support images. However, because of the rather simplistic encoding of the colors in a BMP image which used lossless algorithms, the sizes of these images rapidly grew. One advantage is that the format is capable of supporting a transparent color. You will often see reference to an alpha channel with formats that support transparency. With greater bit depth to support more colors and increasingly realistic images, the size of BMP files grew, and they started to take an increasing amount of time to transmit across the internet to a person’s browser. While the format in theory supported compression, it was almost never used. As the Internet grew and the demand for more graphics changed the nature of the Internet, there had to be a better format to transmit images without losing quality.

GIF

The early days of personal computer usage were driven in part by the popularity of newsgroups. However, it was clear to many that newsgroups that only supported text could not present information as clearly as groups that supported graphics. But computer transmission speeds were significantly slower then as anyone who remembers the old dial-up modems can attest to. Therefore, images that did not support compression typically had to balance the use of few colors (color depth), the size of the image, and transmission speeds. A file format that supported data compression to reduce the total amount of data that needed to be transmitted while not affecting the quality of the image was desired. To fill that need, CompuServe, one of the early online service providers in America, developed an image format to download color images from its servers. This format, called GIF, stood for Graphic Interchange Format and was originally proprietary to CompuServe and to those to whom they licensed its use.

As personal computers became more popular in the 1980’s a common format was needed to encode graphics that could be displayed on different computer systems while at the same time keeping the time required to transmit a graphics file as reasonable as possible. This format was originally protected by patents held by CompuServe. Companies that created browsers that supported this format were expected to pay a royalty to CompuServe. However, these patents had expired by 2004. In the meantime, someone came up with a way to add coding to the GIF image that allowed multiple images to be displayed one after the other. While these were still multiple still images that were displayed sequentially, the effect was add simple animation to an image. Early examples were the Dancing Girl and the Dancing Baby. However soon people were adding animated GIF files everyone in their websites. While a little animation is interesting, too much animation becomes distracting and even can seriously affect some people and can cause seizures in those sensitive to flashing images. As a result, The Americans with Disabilities Act, while allowing animated gifs, requires that they either stop after 5 seconds or provide a way for the user to pause the animations. They must still have alt text and they cannot blink or flash (which is defined as three times in any one second) to get attention.

GIF files are still commonly used for buttons, logos, and icons because these generally do not require a large number of colors. In fact, the size of a GIF file is based on the number of colors it needs. While it can vary from two colors, black and white, the limit is 256 colors. On the plus side of this restriction is that these 256 colors can be any of the 16+ million colors possible with the RGB color palette. That is because each gif stores a table of the colors it can use. If the GIF file uses from 129 to 256 colors, the file must use 8-bits to identify the index in the table for each color. On the other hand, if the image is a simple button, logo, or icon with fewer colors, you can reduce the file size by reducing the number of bits used per color. For example, if you remove at least one color from an image with 129 colors so that it only has 128 colors, the resulting gif can be encoded as a 7-bit gif reducing the file size. In fact, utilities can still be found on the internet that can reduce the number of colors in a gif. They typically do this by converting some of the least used colors to other similar colors. Taken to the extreme, a 2-color button can be encoded as a 2-bit image. Each color in the color table requires 3 bytes. One byte is used for each of the primary colors in the RGB color palette: red, blue, and green. However, now instead of requiring 3-bytes per pixel to represent a color, each pixel can simply be defined by pointing to the color in the table. This decreases the image file substantially over the equivalent BMP file.

Another advantage of a GIF image file is that one color can be defined as the transparent color. In other words, when the image is placed on another background, you will see through the portions of the image with the transparent color to see the underlying background image or color. The use of transparency for one color is common for logos to avoid the ‘ugly’ box around an image when the image is placed on a background of a different color.

Next week we will discuss the other three common image formats found on the web.

Dithering vs. Pixelation

Do you know the difference between pixelation and dithering of images on a web page? Read more to find out.

Dithering vs Pixelation, are two terms that many get confused about when talking about the world of web images. Both affect the quality of the image as seen on a computer screen, but they are the result of two very different processes.

Dithering is something that you might encounter in images displayed on a computer that have had their color depth reduced. It is most commonly seen with photos that start with a very high color depth where it may not be easily reduced to the color depth supported by computer graphics. Ultimately, it is a function of the graphics card or the graphics chip of the computer used to display the website. However, on older devices that use an 8-bit definition for each pixel (rather than 8 bits per red-blue-green color), only 256 colors may be displayed on the screen at one time. Why only 256 colors? Because when only using 8 bits, you can only count from 0000 0000 to 1111 1111 which is 0 to 255 or 256 possible colors for each pixel. While that may seem to be a lot of possible colors, it is not enough to truly represent all the colors in a photograph. Therefore, computer systems have two choices, they can Example of color ditheringeither replace a missing color with a color that is close to the original that it can support and thus introduce a color banding effect, or it can introduce noise, dithering, by mixing dots of two or more colors to simulate the missing color. If you look closely at the screen showing a dithered image, you might see some of these individual dots of color. Of course, most computer screens today support millions of colors so dithering is no longer needed.

Perhaps a simpler way to understand dithering is to look at pictures in your local newspaper. Most newspapers publish pictures using black ink on a white or beige colored paper. Yet the pictures appear to have shades of grey. If you use a magnifying glass to view the images, you can see that the image really consists only of various sized black dots on the paper. As the dots either grow larger or are placed closer together, the image appears darker. Fewer or smaller black dots in an area result in a shade of grey. If the dots are small enough, most viewers of the images in the paper do not even notice them. The same applies to the colors used in the Sunday Comics. However, when we are talking about images in the comics, the dots of color are not limited to black ink but could consist of yellow, blue, or red ink. Now that you are thinking about these three colors, think about what color ink you have in your computer printer. Do you have ink for hundreds if not thousands of colors? Of course not. Your printer simulates colors when it prints an image by using small dots of each of these three colors and even black to create shades. When you buy a printer, they usually list the dots per inch, or resolution, that the printer supports when printing. The larger the number of dots per inch, and thus the smaller the dots, the less noticeable the dithering is to create any color and to print color photos. Modern printers can even overlay two or more colors at the same position to achieve different colors without resorting to dithering of different colored dots. (You may have noticed that printing requires red, blue, and yellow ink while your computer screen requires red, blue, and green to produce colors. Perhaps we can get into that difference another time.)

Dithering also occurs when taking a high-resolution audio track such as a 24-bit resolution track and reducing it to a 16-bit resolution. Why do this? First, a 16-bit resolution track takes is smaller than a 24-bit resolution track and second, most people cannot hear the difference until they have extremely good audio equipment and great hearing.

In any case, dithering occurs when reducing the depth of a data stream either by reducing the number of colors in images or reducing the number of bits to reproduce sound in an audio track.

So, what is pixelation? Pixelation occurs when you take a smaller image and attempt to zoom into it, making it larger. Let’s say you start with an image that is 100 pixels by 100 pixels. That means that the image has a total of 10,000 total pixels. Each pixel has its own color. Now double the size of the image so that the image is 200 pixels by 200 pixels. The Pixelated Imageimage now has 40,000 pixels or 4 times as many. In effect, each pixel of the original image now is represented by 4 pixels. But if each original pixel had a single color, what color should the 4 pixels have? The easy solution is to use the same color for each of the 4 pixels. This technique however creates a visible block of each color pixel that degrades the quality of the image. Is it possible to use the color of surrounding pixels to provide each new pixel with a color that smooths out the image? Yes, but even that does not really improve the sharpness or clarity of the image as that would require creating information where no information existed before. While some sharpening is possible by weighing the transition colors, you will not get the clarity that you see on some TV shows where they take a fuzzy picture of a car, zoom into the license plate, and read with crystal clarity the numbers and letters. The only way to truly do that is with a higher resolution camera that supports a high number of pixels.

Anyway, that is all for today. Hope you had a good Easter weekend, Passover week, or Ramadan month for those of you who celebrate any of those.

C’ya next time.

Raster vs. Vector Graphics

I’ve seen many sites with bad images. I mean really bad images! However, that is something that you can easily fix. Let me explain how.

I’ve seen many sites with bad images. I mean really bad images! Generally, I’m not referring to professional sites such as those of large Fortune 500 businesses. Rather, I’m referring to smaller sites, mom-and-pop organizations, non-profits, and public entities such as school districts. Yes, especially school districts. Before I get into details as to why they are bad, let me first define the difference between two fundamental types of images, raster versus vector images.

Raster images are the cause for most of the worst offenders. After considerable thought, I believe I can identify the underlying reason why the graphics on these sites make the sites look bad. To begin, we have to understand how raster images differ from vector images. Raster images consist of individual dots, pixels, of color. If you are using a digital camera, or more likely today, your phone to take pictures, the resulting image is a raster image, one based on individual pixels. The number of pixels in camera images varies from the early days of 640 x 480 pixels or even less to today’s phones that take photos with 4000 x 3000 pixels or even more. The number of pixels will also vary if the images have been cropped to remove unimportant parts of the picture. To view the actual size of your images from within your file browser, you can include the ‘Dimensions’ attribute as one of the columns displayed as shown here.

A screenshot a file directory showing the attribute Dimensions which indicate the size of the image in pixels.

When it comes to displaying these images on a computer screen, the result depends on the zoom level along with the resolution of your monitor. For now, let’s assume that you have not changed the zoom level on your display. Further, let’s assume you have a monitor that displays 1920 x 1080 pixels. Now if you attempt to display an image such as the first one in the above example that requires 2449 by 2203 pixels you will find that the image extends beyond the edges of the monitor. At 100% zoom, the image cannot fit on your screen with one pixel of the image assigned to one pixel of your monitor’s display. Therefore, you have two choices, crop (trim) parts of the image that are not important or reduce the image size by using a zoom factor of less than 100%. Today, you must resize most digital camera and phone images on the screen on your web page.

Resizing an image is easy. Most software that lets you edit images has a resize option. With an image selected, you can select a Resize function that displays a dialog similar to one of the following.

Dialog to resize images from the software PAINT using a check box to maintain the aspect ratio of resized images. or  Dialog to resize images from the software PAINT using a check box to maintain the aspect ratio of resized images.

Most graphics software lets you resize either by percentage or by pixels. If you know exactly the size you want, resizing the image to the exact pixels you need makes the most sense. In any case, the dialog shows you the image size, horizontal and vertical. The dialog shown above on the left displays a checkbox with the text: Maintain aspect ratio. Selecting this option lets you can change either the horizontal or vertical dimensions of the image and the other dimension is automatically adjusted to keep the aspect ratio (ratio between the width and height of the image) the same. In the dialog shown above on the right, the same functionality is achieved by clicking the lock icon which then shows lines connecting the lock with both the Width and Height options to indicate that it will keep the two dimensions in the same ratio.

What happens if you do not maintain the aspect ratio between the horizontal and vertical sizes of the original image? Then you will ‘stretch’ which flattens the image or ‘compress’ which narrows the image compared to the original. For some images which have no obvious natural aspect ratio, this distortion may not be noticeable such as an image of a landscape. However, if the image is of something that the viewer knows the relative height and width or aspect, such as that of a person, the distorted image can be quite unflattering.

Some web design programs support this same capability when adding an uploaded image to a page. These operate in much the same way as the dialogs shown above.

Unless you have the perfect image size to begin with, you generally will either need to expand or shrink the image. What happens when you do either of these two things?

If you start with a small image and expand it, thus adding more pixels, the software cannot create data where there is no data. Suppose you double the size of an image. Where you had a single pixel, you now have a 2×2 square of four pixels. When this happens, what color do you think the pixels will have? Typically, it is the color of the original pixel. This creates a block texture in the image known as pixelation which gets worse the more you expand the original image.

On the other hand, if you shrink an image to half the size of the original image, the program takes a 2×2 square of pixels, each having its own color, and reduces them to a single pixel with some average color. This process works better than expanding an image and thus reducing images is less noticeable to viewers of the image on a web page. However, this occurs at the expense of fine detail which is irrevocably lost. This is most noticeable when there is text on the image or if the user tries to zoom in on the page to ‘see’ details of the image that no longer exists.

I spent a lot of time discussing raster images because they are the norm for most websites and for images taken by digital cameras and phones. But remember I said that there was a second type of image. That is a vector image. The primary difference between a raster image and a vector image is that unlike a raster image which consists of individual dots, a vector image uses line segments and fill areas and a lot of mathematics (which we will not go into here) to ‘build’ the image and color it. As a result, the software can easily scale vector images with no loss of detail because it is just a matter of mathematics to increase the line segments and fill areas. That perhaps is an oversimplification, but the takeaway is that a vector image can typically be resized with no loss of detail. Some graphics programs allow the user to design images as vector graphics. This type of image can be especially useful for things like corporate logos which can then be used in different sizes for different places on the website without having to create a new logo file for each location.

Assuming that most images you use on your website will be raster images, you may want to consider resizing them before you upload them to your web server. Sure, the website, or more specifically, the viewer’s browser, can resize the image for the viewer when the page is displayed. However, this requires the transfer and use of an image that may be substantially larger than the size needed for the page. Remember that the more data that a page requires before it can be built on the viewer’s browser, the slower the page can be rendered. I have seen pages that have over a dozen images that take over a minute to render because each of the images was saved from a 12-megapixel camera and then resized to display as essentially thumbnail images. By resizing the images prior to uploading them to the web server’s file system, you can reduce the amount of time needed to transfer the image file across the internet as well as the time it takes the browser to render it for display on the page. Thus, my general rules when resizing images are:

    1. Crop the image to only show the portion that is important.
    2. Resize the image to approximately the size needed on the web page before uploading it
    3. Upload the cropped and resized image to the web server before placing it on the web page using your site-building tool.

That’s all for this time. Hope you learned a little about how to efficiently use images on your web pages.

Confused by the alt, title and longdesc Attributes of Images?

Images have three different attributes that can be used to describe the image. Most of you probably know that the alt attribute found in the <img> tag is used by screen readers to assist the visually impaired and blind. But did you also know that alt text is the text that appears in place of the image if the user turns off graphics or if the user is using a screen reader as is the case for blind or visually impaired visitors to your site.

But before we get into the details, you must ask whether you always need alt text? Well, the answer to that question begins with another question of whether the image adds to the understanding of the content on the page. As an example, look at this image used to divide content sections on the page.


There should be no doubt that this image does not enhance the understanding of the content. Rather, it is a decorative feature used to divide sections of the content only. So, say that such decorative images can be eliminated by the proper use of text headers for each content section. I will cover headers at a later time.

Decorative images can even be a picture such as this one depicting elementary school children returning to school after a year of remote learning. Suppose we found this image on a page that provides back to school health guidelines for parents. In this case, the image does not enhance the understanding of the back-to-school health guidelines. In fact, it likely does not illustrate a single one of those guidelines. Therefore, it is simply decorative. Some content editors refer to decorative images such as this as ‘eye candy’ because for the vision enabled viewers of the page, it breaks up the text. Some say that this makes the page more inviting to read. (Imagine if I removed all images from my posts.)

Students race each other as they return to school after a year of remote learning.

If an image does not add additional understanding of the page’s content, would the site visitor have any less understanding after reading just the text content? Would a user who turned off graphics or was blind or visually impaired and could not see these images understand the rest of the page just as well as a person with normal vision? I would argue that in these cases, they would not miss a thing. Therefore, these images could be considered as decorative elements on their respective pages. Decorative images do not need alt text, but they do need the alt attribute. At first you might say, ‘Huh?’ But a decorative image must still include the alt attribute and it must be set to the null string as in the following: (not the word null)

alt=”” (good)

alt=null or alt=”null” (bad)

Would it be wrong to have alt text for this image such as:

alt=”Students race each other as they return to school after a year of remote learning.”

No, it would not be wrong. It just may not be necessary to the understanding of the rest of the page’s content.

Here is one last comment about decorative images. While the title attribute often has the same text as the alt attribute, it should not be included for decorative images. You should not set the title attribute to the null string as in:

title=””

Strictly speaking, the title attribute is what the page visitor sees when they hover over the image with their mouse. This text is used by many search engines to catalog the image. So, if an image provides no additional content to the text around it, there is no need for the search engines to catalog it.

Consider the following image with no text embedded in the image. First ask whether it supports other content on the page?

A middle school student races the Soap Box Derby car he built in the Engineering Magnet program.

If the rest of the page discusses the local Soap Box Derby, it might be appropriate to have the alt text:

alt=”A middle school student races the Soap Box Derby car he built in the Engineering Magnet program.”

Does it matter that the car is blue, or that the grass is green, or that they are on an athletic track, or that the student is wearing a helmet? Depending on the purpose of the story, the alt text shown above may be enough when combined with other content on the page to understand the purpose of the image.

On the other hand, suppose the top of the page has the following banner image which contains text.

New Student Registration

While the image itself may not add to the understanding of the content on the page, at a minimum, the text must be included in the alt attribute to help the visually impaired as in:

alt=”New Student Registration”

Note that the alt text must convey the same information as the text in the image. It is not necessary to say that it is the “New Student Registration Banner” or “Student Registration Image”. Adding words like “banner”, “logo”, “picture” or “image” is considered superfluous. Even the vision impaired already know this text is from an image.

Some images in the middle of the content have text that must be repeated in the alt attribute such as for the following image:

A blue T-shirt sold during COVID-19 that says: We’re all in this together

In this case, the alt text must describe the image as well as the text.

alt=”A blue T-shirt sold during COVID-19 that says: We’re all in this together”.

On the other hand, names on the sides of buildings, text in store windows, and other image text, if not pertinent to the content of the page do not have to be mentioned. The following image use alt text that simply states general information about the image such as:

alt=”Photo of Penn Street in Reading, PA in the early 1940s.”

Photo of Penn Street in Reading, PA in the early 1940s.

It is not always necessary to repeat the image text word for word as long as the meaning and intent remain the same such as in the following image which also serves as a link to more information.

Click image for parental information about remote learning

alt=”Click image for parental information about remote learning”

It is acceptable to convert the text to upper and lower case, and to define TLA (three-letter acronyms) as long as the converted text does not change the fundamental message of the image text.

What if the image and the text on the image do add substantially to the understanding of the page or even the purpose of the image? Then that information must be provided to the visually impaired in some way. If the image description is short or if the text is short, as we saw above, then the alt text can provide that additional information easily. But what if it is not short? While there is no physical limit on the length of alt text, it is recommended that alt text is kept short, 125 to 160 characters or less. Is that really sufficient to describe the image and the text on it? Look at the following image.

An example of an image that needs to use the longdesc attribute to point to a complete version of the text for a screen reader.

Repeating all this information in the alt attribute with only 125-160 characters or less is impossible. This is the intended purpose of the longdesc attribute.

However, contrary to popular belief, the longdesc attribute is NOT a place for directly entering longer text, perhaps paragraphs or more in which to explain the image or the text on it. Rather, the longdesc defines a link or URL where the visitor can get more information about the image and/or the text on the image. While the status of the longdesc attribute is not entirely clear under HTML5, the main point is that it is not a duplicate of the alt attribute text nor is it a more detailed explanation of the image even though longdesc sounds like ‘long description’. It is a reference to a bookmark on the same page or to a relative or absolute URL address of another page that describes the content and/or text in more detail.

In the above example, how do you use a reference on the same page where the text appears? We can identify the content section by adding an id attribute inside any one of the following content tags that precede the content:

<p id=”CovidVaccineComparisons”>

<h3 id=”CovidVaccineComparisons”>

<div id=”CovidVaccineComparisons”>

(Note: Each id value can only appear once on a page. Otherwise, how would a link know which location to branch to. Make sense?)

Then in the longdesc attribute of the image, we would include the following:

longdesc=”#CovidVaccineComparisons”

Note that the name assigned to the id attribute can contain only upper and lower case letters, no spaces, no numbers, and no special characters. When the id is referenced, it must begin with the ‘#’ sign to identify it as a bookmark name and not a page name.

It is also possible to reference another HTML page found at the same level as the page with the image. Suppose this page was given the name: “CovidVaccineComparisons.html” or “CovidVaccineComparisons.asp”. Then the longdesc attribute would be:

longdesc=”CovidVaccineComparisons.html”

Note the absence of the ‘#’ symbol, in this case, to identify the relative reference URL as another page on the same folder level as the current page.

You can also use relative URL references to traverse your folder structure, but that is a more advanced topic than what I wanted to cover here as we are already getting quite long.

It is even possible to reference a page using an absolute reference that might exist on an entirely different site such as:

longdesc=”https://myschoolsite.edu/StudentHealth/CovidVaccineComparisons.html&#8221;

Relative and absolute references are the preferred way to handle charts and graphs in which the longdesc attribute points to a ‘hidden from menu’ page that describes the data used to create the charts and graphs and perhaps even includes the actual data tables used by them. Obviously, information from a graph or chart would never fit within the character limits of the alt attribute.

Anyway, I hope you learned something here about how to use the alt, title, and longdesc attributes found in the <img> tag and to not use the longdesc attribute to directly insert additional text describing the image or text.