Skip to Content

Automatic Header Adjusting (Header 1)



What are headings? (Header 2)

Headings are used to provide structure to a page and are used hierarchically. Title text, such as "Automatic Header Adjusting" at the top of this page, provide the most important idea, or purpose of the page. The title of a page or document should always be a Header 1, sub-sections in a page are typically considered Header 2's, and subtitles within those would be Header 3's, and so on. Each header level should appear differently.

Importance of accessibility (Header 3)

Headers allow users to quickly scan a page visually for the appropriate section. Because blind users are unable to do this, assistive technology such as screen readers are used to achieve the same result. They allow users to easily navigate a page according to its headings.

It's the Law (Header 4)

To read more about Electronic Accessibility and how it's required by law, please visit the Texas State Digital Accessibility website.


What Changed? (Header 2)

Please read over these changes and review your website, as it may appear differently than it was prior to the June 11, 2019 update. (Maleficent release)

Before: (Heading 3)

  • Headings were often used inappropriately, resulting in inconsistencies among pages and lack of usability for blind users.
  • It's estimated that Texas State websites contained roughly 13 thousand header-related issues.
  • Despite being used correctly at times, the formatting of the headings didn't always format as one would expect. See the image below.
a before picture of broken header functionality
This is the same section as above, prior to the update. The text "It's the Law" didn't format correctly as a heading 4. With the old formatting, it resmembled another subtitle.

Now: (Heading 3)

  • Existing and future headings will be automatically adjusted to the correct header level. This will improve functionality for blind users and provide a more consistent look among Gato sites.
  • The number of skipped and empty header level issues has been significantly reduced.
  • The formatting for existing headers has also been corrected. The first header in a section will resemble a Header 2 (as seen throughout this page)
demostrating format changes
In contrast to the example to the left, we can visually determine that "It's the Law" is a subsection of "Importance of accessibility".

You can now combine sections!

Previously, each new section would begin with a new set of header levels - starting at a header level 2 (H2). While this is what we were initially aiming for, this caused some concern among users.

If one wanted to create a one-column section with a related two-column section underneath it, the two-column section would begin with an H2 (formatted with large bold text) - even though the topic was the same. Having that bottom section default to an H2 not only indicated that the topic was different, but also was aesthetically restrictive. An example of this is provided a little further down the page.

Now, one can simply choose to select a checkbox indicating that the sections are related. This not only increases the header level (H2 to H3), but changes both the spacing and formatting of the text in the bottom section. The larger bold text would now become the smaller gold text.

screenshot of the new checkbox when adding sections

The examples provided below illustrate how this update can provide enhanced structuring ability to your page.

Before the update:

Notice the two titles identified within the image to the right:

  • They're both considered H2's and have large, dark font.
  • Because they are H2's, they're unintentionally considered main subsections of the whole page.
  • In creating this, the desire was for them to format as smaller sections within "Coffee Roasts."
visualization of attaching sections prior to update

After the update:

Now, look for the differences:

  • They're both considered H3's and have smaller, gold font.
  • Because they're H3's, they're considered subtitles within the page.
  • As desired, they are visually (technically) logical subsections within "Coffee Roasts."
visualization of attaching sections after the update

Organizing a Webpage (Header 2)

While Gato will work to automatically adjust headers to the correct level, it cannot adjust the content under each header. Please review the section below to ensure that your content is always well thought out and organized.

Establish your headings and layouts first (Header 3)

Because headings are used to organize and divide up your content, it's best to create these first as you plan out the flow of your webpage. For example, let's say we are building a site about food. Here is an example of how we might build our sections and headers:

An example of header levels on a Texas State page.
This image is a visualization of what the header tree in the right-hand column looks like in Gato.

As header levels increase, content should become more specific.

Example:


  • Page Title (Food) - Header 1
    • Section 1 Title (Fruits) - Header 2
      • Text and Image Title (Apples) - Header 3
        • Text Editor Title (Red Delicious) - Header 4
    • Section 2 Title (Vegetables) - Header 2
      • Text and Image Title (Corn) - Header 3
        • Text Editor Title (History of Corn) - Header 4