The Big Three: Headings, Links and Images
The way pages are organized and how their elements are configured has a great impact on how well assistive technology (AT) can scan and convert content for people who depend on these software applications to access web content.
The three most common accessibility issues we see on the site are incorrectly configured headings, links and images. If you can apply the guidance below, it will greatly improve the usability and accessibility of the College website for all users including people who use AT.
If you have any questions or need assistance, please submit a website help request.
Headings
Headings are the main organizational tool of a web page and allow you to organize a page’s content into sections and sub-sections.
Headings are hierarchical and have different “levels” that can be set when they are inserted into pages. The HTML heading levels are known as H1, H2, H3, H4, H5 and H6. Note that H5 and H6 are not routinely used on the College website and are not available to editors.
The level of heading that you should use is determined by the content, not personal preference.
Choosing a Heading Level
The page title is H1. There is only one H1 on a page, therefore editors cannot insert additional H1s.
You may determine that no additional headings are needed, but if you do use them:
- The first level of heading within the content area must be H2. Break content into logical sections, each with an appropriate H2.
- H3 is used to subdivide content that is related to the H2 above it.
- H4 can be used to subdivide content that is related to the H3 above it.
Why is the first level H2? Because the page title is H1. As headings must be used hierarchically, the first heading level used anywhere within a page is always H2.
Heading Levels That May Follow Other Heading Levels
You make your own determination of the level of subsequent headings based on the content itself, adhering to these rules:
- H2 may be followed only by H2 or H3.
- H3 may be followed by H2 or H3 or H4.
- H4 may be followed by H2, H3 or H4.
Content After Headings
There must be something after a heading (e.g. text, image, list, other content block).
Headings may also be followed immediately by another heading (without intervening content) that is the next level down in the hierarchy. e.g.:
- H2 may be immediately followed by H3
- H3 may be immediately followed by H4
However:
- H2 must not immediately be followed by another H2 (without intervening content)
- H3 must not immediately be followed by another H3 (without intervening content)
- H4 must not immediately be followed by another H4 (without intervening content)
Headings in Action on This Page
You can see how headings are used hierarchically on this page.
- The page title is H1: “The Big Three: Heading, Links and Images.”
- All of this information about headings is in a section underneath the H2 “Headings.”
- A sub-section of the “Headings” section follows under the H3 “Choosing a Heading Level.”
- A sub-section of “Choosing a Heading Level” follows under the H4 “Heading Levels That May Follow Other Heading Levels.”
- This section right here under “Headings in Action on this Page” is back up a level at H3
- After this sub-section we move onto an entirely unrelated topic under the H2 “Links.”
Links
Links must be descriptive of their destination and make sense out of context because:
- Assistive technology such as screen readers can announce all of the links contained on a page, independently of the surrounding content.
- A sighted user may quickly scan a page looking for a particular link. Making them read all of the surrounding copy to identify a link’s purpose is time-consuming and a poor user experience.
Bad Link Text
The following are examples of unhelpful link text and should be avoided.
- Click here to read the latest news and events.
- Our news and events section has the latest updates from Harvey Mudd College and can be found by clicking here.
- Our news and events section has the latest updates from Harvey Mudd and can be found at: https://www.hmc.edu/about/news/.
- Register for the ice cream social by filling out our online form.
- For more tips about breeding beagles, read this great article.
- This benefits information is provided by TCCS on their website.
Good Link Text
Taking the bad examples above, let’s rewrite them to make them more meaningful.
- Read the latest news and events.
- Visit news and events for the latest updates from Harvey Mudd College.
- To participate, submit the ice cream social registration form.
- For more tips, read the great article How to Breed Beagles.
- This benefit information is provided by TCCS.
Link Text Tips
Even with meaningful link text, users often include “junk” words that can safely omitted, such as:
- click/clicking (it can be assumed users know how links work).
- here (it’s not actually “here” but somewhere else, often on a different website altogether).
- online (it’s a link so is obviously online).
- page/pages/website (in most cases links lead to pages on websites).
Images
Images need to be configured correctly so that assistive technology users can understand the image’s purpose/content.
There are two settings you can customize:
- Required: the “alt” (alternative) attribute.
- Optional: the caption.
Alt Attribute
The alt attribute is required and should succinctly describe what the image shows. Do not include information that cannot be determined by looking at the photo (examples below).
Images without an alt attribute will not be visible on the front end of the website
Caption
The caption is where additional information and context can be provided for the image. It may include information that is not evident in the photograph (examples below).
Image Alt and Caption Examples
A Person
If you have an image of a person, the alt attribute only needs to be their name. There is usually no need to included words such as “photo” or “image” as that can be assumed. However, if it was originally a format other than a photograph (such a painting or charcoal sketch) you may wish to convey that.
In this example, “Joseph Platt” would suffice for the alt attribute.
As you can see, the caption has more information. We learn that Platt was the first president of Harvey Mudd College and his years of service; all information that cannot be ascertained from the photo itself.
A Photo Where Something is Happening
This photo of graduates at the commencement ceremony may have an alt attribute of “Seated and applauding graduates in academic robes.”
The caption provides more context about location and time; again, this is information that is not evident from the photo itself.
Image Specifications
For consistent appearance across the site, we ask you use the following specifications for images.
File Type and Resolution
Photographs should be in JPG format; Graphics with solid colors should use PNG format.
Use 96 pixels per inch resolution.
Do not use PNG for photographs as the file sizes will have excessively large.
Portrait (Vertical) Orientation Images
- Width: 358 pixels
- Height: 412 pixels
- Align to the left; right as alternative
Landscape (Horizontal) Orientation Images
- Width: 768 pixels
- Height: 450 pixels
- Centered (i.e. full width of page)
