Lumen/Guide: Course List Table Formatting (Headers)
- Cascading headers in course list tables
- Examples of best practices
- Examples of improper header use with how to fix
Cascading headers in course lists
If using headers in tables, you must cascade for accessibility and proper ordering.
- first using Area Header
- second using Area Subheader
If you need more than two levels of headings, it's recommended to use headings on the page and use multiple course lists.
Area header
- Area headers may only be set up on text (add comment entry).
- Area headers can only be set up by checking the "Area Header" box.
- An area header displays as bold text in both the edit course list feature and in the public facing table.
- This reads "areaheader" when using a screen reader.
Area subheader
- Area subheaders may only be set up on text (add comment entry).
- Area headers can only be set up by checking the "Area Subheader" box.
- An area subheader displays as italics in the public facing table. The only visual indicator of a subheader is the check box; the font/styling doesn't change in this space.
- This reads "areasubheader" when using a screen reader.
- It is not a requirement to use an area subheader if you use an area header.
- If using area subheader, there should be more than one subheader used.
When to use headers
An area header should be utilized when distinguishing between sections of a curriculum. This could be:
- distinguishing the core courses from electives,
- parsing types of requirements (mathematics, statistics, chemistry),
- any other feature that distinguishes one segment/section of courses from another in a single program.
An area subheader should be utilized when identifying subgroups under an area header.
Headers let end-users know what part of the curriculum they're interacting with and the prominence of pieces of the courses related to the program. They are imperative for all users, particularly for individuals using screen readers, to comprehend the organization of the curriculum.
It is not required to use any headers within the course list table if headers are used outside of the course list, parsing the curriculum by section.
Parsing Example
In this example, each section of course type (Physics, Statistics) are their own header on the requirements tab and distinctly separate the coursework that counts by having individual tables. Best practice would be to have the "Complete one of the following" before the course list table.
Proper use of headers
- Only use headers for heading purposes (not for visual aesthetics)
- Headers must not duplicate the tab name (ex. Requirements)
- Headers cannot be used to mimic course list functionality (sum hours)
- Area headers must not be the same text as a header on the requirements tab outside of the table (i.e. Required Courses on the page, Required Courses in the course list)
- If using multiple area headers, they should be high-level sections that are equitable in the display.
Best practices
- If using headings in a table, the first item in the list must be an area header.
- Headers should reflect a topical area of study, semester/timing (if articulating curriculum in the order courses must be taken), or other distinguishable segment.
- Credits should be associated with text, not a header. Typically, this directly follows the header.
Examples of language for area headers
- Core
- Required Core
- Electives
- Remaining/Additional credits
- Topical matter (Mathematics, Statistics, Physics, etc.)
Best practices
- Avoid language such as "approved courses" or "approved electives." Everything listed has been approved.
Examples of best practices
Area header before text and courses
This table utilizes a single area header to show that all the courses underneath are chemistry related. The text tells the reader what they need to do and the credits are associated with this direction. No subheaders are used. If desired, this example could have the subheaders of "General Chemistry" and "Organic Chemistry", but is not required.
Area header and area subheaders
This table uses "Biology" as an area header with three area subheaders of Option 1, Option 2, and Option 3. Text in the table articulates what a student must do with the credits associated with that text (opposed to listing credits on the header). The area subheaders show three different avenues to complete the biology requirement.
Area headers using semesters instead of topics
This course list utilizes semesters as area headers to articulate when course must be completed (opposed to listing the curriculum without articulating when it must be completed).
Examples of improper header use with how to fix
The following examples are modified course lists to display actual table set-ups without any specific identifying information (i.e. these are not real programs).
No area header, use of subheader for header and text
Incorrect layout
This example does not use an area header and is followed by two subheaders, one utilized only for formatting purposes.
In this edit screen shot, the CHEM electives are set up as an Area Subheader and do not look visibly different than the other content in this table view.
Correct layout
This example utilizes two area headers, "Core" and "CHEM electives." By using two area headers, you communicate to the end user that there are two parts to this curriculum. The curriculum is simple enough that area subheaders are not required.
In the edit view, and end user sees the "Core" and "CHEM Electives in boldface, making it easy to decipher the two sections when editing. Both headers have the "Area Header" box checked.
Area header not the first thing in the course list with other headers present
Incorrect layout
This example has an area header towards the end of the curriculum without utilizing an area header first.
In the edit view, the only header is "Elective Coursework" in boldface which doesn't provide enough context for the courses listed above the header.
Correct layout
by adding an area header of "Core," this provides the end-user with context that these courses are fundamental to the program and are required/not electives.
This displays boldface text in the end-user course list.
Utilizing an area header as "Total Credits"
When building a course list, checking the box to "Sum Hours" auto-calculates the credits listed in a table. As displayed below, the Total Credits listed as an Area header is slightly more bold that the software delivered auto-calculation. If the intent is to list the total credits of a program, you must use the "sum hours" checkbox (i.e. you cannot manually add an area header with a static number of credits).
Incorrect layout
The total credits must not ever be listed in the course list with the "Area Header" box checked.
Correct layout
If wanting to have the total credits listed and have it be boldfaced, you must check the box for Sum Hours. For more help on how to use this feature, see the kb on Lumen/Guide: How to Add/Edit Course List Content (Table Help).
