36 Online Content Organization and Weblinks

HTML is a good format for creating accessible content. It is well supported and adaptable across browsers and devices. The information in HTML markup helps assistive technologies, such as screen reader software, to provide information and functionality to people with vision impairments.

Organizing your html and online content so it has a logical flow makes sense to do. Using headings and subheadings to organize content allows students to clearly see how the main concepts are related. Headings are one of the main ways that students using a screen reader navigate through a webpage or online resource.

A weblink is a link from a file or document to another location (such as a website address) or file, typically activated by clicking on a highlighted word or image on the screen. Generally, weblinks are included within content to provide the user with additional information that is available at another location.

File types: .html, .pdf, .doc, .xls

Before You Begin

Who Are You Doing This For?

Everyone benefits from having content that’s clearly organized. In addition, well-organized content and descriptive weblinks support students who:

• Have a learning disability (For a example, a student with ADHD) – Having an organized content allow them to easily go back and find the important points
• Are blind or have low vision – It gives them more control in navigating through different chapters
• Have a form of cognitive disability
• Have a physical disability
• Are deaf or hard of hearing

What Do You Need to Do?

Content Organization

Headings help to identify the hierarchical structure of a document (e.g., sections, sub-sections). Headings provide a visual cue that helps sighted readers quickly navigate through sections of a document, skimming through content until they find a section they are looking for. Similarly, headings create logical divisions in the content and allow a non-sighted user to navigate a page or document easily using a screen reader.

When it comes to using visual references to indicate the hierarchy and structure of a document, you may be accustomed to just changing the font, enlarging the type size, making it bold or underlined or italicized, creating the impression of a heading. This approach presents problems when creating material with accessibility in mind because screen readers won’t identify the text as a heading. Instead, a screen reader will just “read” through the text of a heading as if it were part of another paragraph of content, missing your intended cues about structure and organization.

Headings in WordPress (UBC Blogs)

Keep the following guidelines in mind when you create online content:

• Use HTML tags to describe the meaning of content, rather than changing its appearance. For example, you should tag a section title with the appropriate heading level (such as <h3>) rather than making the text appear like a heading by applying visual elements such as bold text and a larger font size. Format list items into a list rather than using images of bullets or indents. Using HTML to describe your content’s meaning is valuable for learners who use screen readers, which, for example, can read through all headings of a specific level or announce the number of items in a list.
• Use HTML heading levels in sequential order to represent the structure of a document. Well-structured headings help learners and screen reader users to navigate a page and efficiently find what they are looking for.
• Use HTML list elements to group related items and make content easier to skim and read.

Content Organization How tos

• How to create headings in WordPress (UBC Blogs)
• How to create headings in UBC Wiki
• How to create headings in Canvas
• How to create headings in EdX

Link Descriptions

Ensure that all web pages and weblinks have titles that describe a topic or purpose. The purpose of the link can be determined by the text alone. That is, you don’t need to include additional information justifying the use of the link. You want the link to be meaningful in context. For example, do not use generic text such as “click here” or “read more” unless the purpose of the link can be determined by meaning in the surrounding content.[4]

Consider the following examples:

New Tabs/Windows

In general, it is better if weblinks do not open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content.[5]. However, if a link must open in a new window, it is best practice to include a textual reference. For example, IInformation on UBC Open education projects and resources (New Window) is available online.[6]