The Basics

The Basics

The material below is adapted from a CIT presentation—Links, Headings, Images, Oh My!—at the 2018 Web Accessibility Camp.  It covers issues that apply to anyone maintaining web content. It is a good starting point to understand what you need to do with your web content to ensure that it is accessible.

The one other thing everyone needs to do is ensure that all of their web pages have the approved footer. There are two options noted, one a short link to a page with the wording noted and the other, a complete message. 

Links, Headings, Images, Oh My

Note on terminology – SHOULD is best practice; MUST is required to be AA compliant

Headings

Purpose of Headings

  • Headings are essentially titles of sections of content.
  • Headings are used to create an “outline” of your site.
  • Well written and semantic headings give screen reader users a way to quickly skim your site for the content they are looking for.

Proper Heading Structure

  • Every page SHOULD have a heading level 1 <h1> - your page title will the H1
  • Every subheading SHOULD utilize the next heading level in sequence
    • The subheading for <h2> should be <h3>
  • Sibling headings MUST have identical heading levels
  • You must NOT have subheadings which are at a higher or identical level to its parent

For a quick test: View the content structure of one of your web pages in WAVE. Enter a web page URL into the text box, press the button and then select the Outline tab in the side bar (which is the last icon on the far left). 

Naming Your Headings

  • Each heading MUST provide a brief overview of the proceeding content.
  • Headings MUST NOT be empty.
  • Headings SHOULD be concise.

Common Mistakes with Headings

  • Using Headings to have differently styled text (usually to make text larger/bolder).
  • WYSIWIG Editors: Hitting Return when headings are being typed for increased white space (this can create blank headings).
  • Not being careful with structure of headings (wrong heading levels).
  • Using bold paragraph text as headings.

Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (<h1> - <h6>) for all content headings. Do not use headers to achieve visual results only. 

Links

Expected Behavior of Links

  • Links navigate to a location described by the link text or image and alternative text.
  • Links MUST not lose the ability to be focused by tabbing navigation
  • Links MUST visually appear distinct from surrounding text.
  • Links SHOULD open in the same window (and same tab), unless the link explicitly indicates it will open in a new window.

Note: Second and third bullet – not your issues as content editors (technical and/or design) but it’s why links are a different color and underlined.

Link Text

  • Link text is the ACTUAL text used for the link. Context is any other content that helps users understand the purpose of the link. 
  • Link text must describe where the user will navigate to in context.
    • This does NOT mean using the URL as link text
  • If link text repeats on a page, it must go to the same destination unless appropriate additional context is added to differentiate the two links.
  • Links should not be empty.
  • Links should be succinct. A word to a short phrase is sufficient, not a sentence or longer.
  • Generic link text such as “Read more,” “Click Here” etc… are not allowed until appropriate additional context is added in all scenarios.

Styling Links

  • Links must visually appear as links. (As opposed to blending in with surrounding paragraph content.)
  • Techniques
    • Underlining.
    • Using a different color (with at least a 3:1 contrast between link and surrounding text as well as 4.5:1/3:1 contrast ratio against the background.
    • Appending an icon which represents a link

Note: Again, this is a technical/design issue, but it’s also why you don’t want text in different colors.  That should be reserved for links or if the original design uses color for different headers, they need to be checked to be sure the color contrast is sufficient.

Bypass Links

  • All pages must have a mechanism to bypass repeated content – Skip navigation/Skip to main content.
  • Back to Top links are not a requirement, not outright forbidden, but can be considered ambiguous (depends on the interpretation of the top). Also if used in multiple places, it disrupts the flow of reading for screen readers.

Images

Alternative Text

  • Alternative text is a substitution for non-text content.
  • Alternative text is either located in the alt attribute of the <img> tag or it is located adjacent to the image (for instance, a caption).

Writing Alternative Text

  • Do not include “image of,” “picture of,” “logo of,” etc. Users that require alternative text will already know that an image is there.
  • Every image must have an alt attribute, no exceptions. The contents of the alt attribute are what varies.
  • Text in the alt attribute should be succinct.

Images as Links

If an image is used as a link, these rules are the ONLY rules that are followed.

  • If the linked image IS NOT supplemented with additional linked text: Alt text for the image should describe the destination of the link.
  • If the linked image IS supplemented with additional linked text: Alt text for the image should be NULL.
    • If images and link text are next to each other and go to the same destination, they must be wrapped in a single link instead of two separate ones.

Informative Images

  • Informative images replace text-based content. The information conveyed through these images is important to understanding the message of the site.
  • Alternative text should succinctly describe the concept/information the image is conveying.

Decorative Images 

  • Decorative images supplement text-based content but do not add any important information necessary for understanding the message of the site.
  • The alt attribute must be present, but it needs to be null (alt=””) 

Decorative versus Informative Images 

  • Will the content still make sense if this image were to not exist?

Images of Text

  • If you can use text to achieve the same visual effect, you should present the information as text.
    • Logos/Logotypes are always allowed.
    • Images that act as buttons should be HTML buttons instead.
  • For any valid images of text, alt attribute should be identical to the text in the image….EXCEPT if it is also a linked image, in which case, you follow the images as a link rule.

Complex Images

  • Complex images include: graphs, charts (flowcharts/org charts); diagrams and illustrations where the user needs to understand the image to understand the page; maps.
  • All complex images require either a text alternative or an accessible alternative method of understanding the content.
  • Alternate methods:
    • Maps: Provide a method of receiving text-based instructions, so users don't have to rely on a graphic alone. CIT article about maps.
    • Flowcharts: Create an outline. An example of a complex image would be an organizational chart.  It is recommended that be turned into an outline (here’s a sample of org chart outline) for an alternate and accessible version. 

WebAim Resources