Dakota State University students walking around campus

Preparation + opportunity = success

That's the DSU equation. We're a four-year university with nationally recognized programs, cutting-edge facilities, and the brightest thinkers. But we're also a tight-knit, inclusive community. Small class sizes mean hands-on training and individualized attention. All this with an affordable, public school price that's among the best values in the region.

Majors & Degrees

Search

Popular searches

smiling woman

Is DSU the right fit for you?

Even the best brochures and postcards (and yes, even websites) can only tell you so much about a college. The only surefire way to know if DSU is right for you is to see for yourself.

Visit DSU

Home ― Accessibility at DSU ― Training Resources ― Images - ALT Tags

Images - ALT Tags

ALT tags, also referred to as alternative text, ALT text, or image descriptions, play a crucial role in the use of images on any document or webpage at Dakota State. It is imperative to take a moment to understand ALT tags and recognize their significance in providing accessibility for users who rely on alternative text to comprehend the content conveyed by images.

There are several uses for ALT tags. The most well-known are:

  1. Screen readers speak the ALT tag of an image for users who cannot see
  2. If an image cannot be loaded due to some sort of network or IT error, the ALT tag displays instead
  3. ALT tags boost search engine rankings and can help a website's images display in Google search results

Guidelines

We need to write meaningful ALT tags for all the images we put into documents or onto websites. Not only is it a legal requirement, but it is also the right thing to do. When writing ALT tags, please keep these guidelines in mind (borrowed from WebAIM):

  • Be accurate and equivalent in presenting the same content and function the image serves in your text
  • Be succinct, this means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically, no more than a few words are necessary, though rarely a short sentence or two may be appropriate
  • Avoid the phrases "image of" or "graphic of" to describe an image. It is apparent to the user that the ALT tag is describing an image. If the image is conveying content, it is typically not necessary that the user know the image is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc., is important content, it may be useful to include this in the alt text.

Other tips include:

  • A good rule of thumb is to keep ALT text digestible: between five and 10 words. If you exceed this, keep in mind that some screen readers only support 125 characters maximum.
    • Instead of using a very long ALT, use a brief ALT and also include a longer image caption (viewable by everyone) or link to a webpage with additional image content. Linking to an additional webpage is particularly useful to explain infographics.
  • Do not worry about keywords or Search Engine Optimization (SEO). Just focus on describing what is in the photo. SEO should be considered a side benefit and not the goal for writing good ALTs.

Examples

Here are some good examples of Image Descriptions. Note the concept and/or function in each:

  1. Student taking notes during a class lecture -
    ALT example: "Class lecture scene with a student taking notes."
  2. Facilities management staff member leading a safety inspection -
    ALT example: "Staff member conducting a safety inspection."
  3. Chemistry students in lab safety gear testing vials of liquid -
    ALT example: "Students in lab safety gear conducting liquid tests."
  4. Aerial view of Dakota State University's campus -
    ALT example: "Aerial view of Dakota State University's campus." (Note: Consider additional details based on context, e.g., "Aerial view of snow-covered Dakota State University's campus in winter.")

Code

<img src="generalcyber.jpg" alt="General Cyber, DSU Trojan Mascot" height="100" width="100" class="left" />