Working with Web Content

Accessibility Topics

Headings and Subheadings
Images, Photos, and Graphs
Links, Buttons and Navigation
Unordered and Ordered Lists
Videos and Audio

Basic Principles of Organizing Information

These principles may seem obvious but, since content organization is crucial to how people find, navigate, and process information, keeping the basics in mind is particularly helpful to making our web properties more accessible.

  1. Start with a simple outline to create a hierarchy and organize your ideas in a logical way. This improves scannability and encourages better understanding.
  2. Put the most important information first.
  3. Place similar topics in the same paragraph, and clearly separate different topics with headings.

Content Basics 

  • Links: use meaningful descriptive links when you can. Links should provide information on the associated action or destination.
    • Links should not be empty.
    • Try to avoid “click here” or “learn more.” and “read more”.
      • If you use  “click here” or “learn more.” and “read more” make sure the surrounding text provides the right context. Ideally, you would append the link to add more context. For example:  from “Learn more” to “Learn more about Bird ID”. Or, write a sentence as you normally would, and link relevant keywords. This can also help with Search Engine Optimization.
    • Links should be part of the same paragraph or element which contains the link context. The context is important for assistive technology.
  • Images. For further details: Images, Photos, and Graphs
    • All images need an alt attribute. Ask yourself, will the content still make sense if this image did not exist? If you answer “no”,  the image is informative, and you’ll need a good alt tag.
  • Headings and subheadings organize content for readers.
    • Be descriptive but concise.
    • Make sure you do not have any empty headers
    • Headings and subheadings should always be nested and consecutive. 
  • Working with PDFS. You’ll need to make sure your PDFs are compliant

Standard Problems to Look Out For

  • Avoid creating instructions or using language that requires the reader to see the layout or design of the page. This is helpful for many reasons, including layout changes on mobile. (For example “You’ll find this in the menu to your right”)
  • Don’t put h1 into your content. The page title field outputs an h1 and there should only be one h1 per page or post.
  • Do not use bold tags to create false headers, use h2, h3, etc… tags.
  • Make sure headings and subheadings are nested and consecutive
  • Avoid using the same link text that goes to different destinations. For example, do not have “learn more” four times on a page, going to four different destinations. See the Links section, for details on improving link text.
  • Make sure to have the right Alt text set up, whether it be a concise useful description for “informative” images or having a null (alt=“”) for “decorative” images.
  • Make sure there are captions, transcripts, and alt text to supplement multimedia content
  • Try to avoid putting text into your images graphically. This is for accessibility, legibility, and responsiveness of the sites. If it is unavoidable, make sure to follow the guidelines outlined in the “Images” section.
  • Make true lists instead of using a paragraph or line breaks.