Week 4 Overview | Basic Elements | Document Sectioning | Images | DOM | Worksheet

Wendi's Web - HTML: Basic Elements

• How to add an image to your page using <img>

  • src=”” attribute
  • alt=”” attribute
  • Accessibility SC and Techniques related to alternative text for images

  <aside> ♿ SC 1.1.1 https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

  • G94 https://www.w3.org/WAI/WCAG22/Techniques/general/G94
    • how to come up with good alt text
    • alt text should only contain the information that is important for understanding what the image is conveying
  • H37 https://www.w3.org/WAI/WCAG22/Techniques/html/H37
    • says to apply alt text with alt=”” attribute
  • H67 https://www.w3.org/WAI/WCAG22/Techniques/html/H67
    • decorative images use empty alt=””
  • other techniques talk about images with long descriptions, images with text in them, etc.
  • See also this helpful resource: WAI alt-text Decision Tree </aside>

• Hotlinking - what it is, why you shouldn’t do it (and when it’s ok to do it)

• Relative vs. absolute Paths

  • the difference between the two
  • how to refer to files via relative paths
  • e.g. ../ (up one level), ./ (current directory), /dirname, etc.
  • why you might choose relative vs absolute and vice versa

• Do the exercises at the end of that section

More on Images and Figures:

Wendi's Web - HTML: Adding Images

Make sure you’re familiar with and understand the following:

• <figure> element - purpose, what is it used for?
• <figcaption> element - purpose, what is it used for?
• When should an image be enclosed within a <figure>?
• When should you NOT put an image inside a <figure>?

<aside> ♿ alt=”” text should not repeat what’s inside <figcaption> and vice versa

alt=”” text should only include information that’s important/relevant - see the MDN example where they talk about “Fluffy” https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#text_alternatives

</aside>