Headings
What is a heading?
Headings are titles or subtitles to be displayed on a webpage. Choosing the right heading is crucial to passing knowledge clearly and effectively to the audience.
For example, assuming that machine learning is something new, below, we can see the four first steps of a Machine Learning project. There is no need to read it line by line, just a quick skim of it will be enough.
The quantity & quality of your data dictate how accurate our model is
The outcome of this step is generally a representation of data (Guo simplifies to specifying a table) which we will use for training
Using pre-collected data, by way of datasets from Kaggle, UCI, etc., still fits into this step
Data Preparation
Wrangle data and prepare it for training
Clean that which may require it (remove duplicates, correct errors, deal with missing values, normalization, data type conversions, etc.)
Randomize data, which erases the effects of the particular order in which we collected and/or otherwise prepared our data
Visualize data to help detect relevant relationships between variables or class imbalances (bias alert!), or perform other exploratory analysis
Split into training and evaluation sets
Choose a Model
Different algorithms are for different tasks; choose the right one
Train the Model
The goal of training is to answer a question or make a prediction correctly as often as possible
Linear regression example: algorithm would need to learn values for m (or W) and b (x is input, y is output)
Each iteration of the process is a training step
What did you think about it? Was the information clear? Hmmm, I guess not! No headings were used in the above text. Let’s reorganize the information using headings:
-
Data Collection
→ The quantity & quality of your data dictate how accurate our model is
→ The outcome of this step is generally a representation of data (Guo simplifies to specifying a table) which we will use for training
→ Using pre-collected data, by way of datasets from Kaggle, UCI, etc., still fits into this step -
Data Preparation
→ Wrangle data and prepare it for training
→ Clean that which may require it (remove duplicates, correct errors, deal with missing values, normalization, data type conversions, etc.)
→ Randomize data, which erases the effects of the particular order in which we collected and/or otherwise prepared our data
→ Visualize data to help detect relevant relationships between variables or class imbalances (bias alert!), or perform other exploratory analysis
→ Split into training and evaluation sets -
Choose a Model
→ Different algorithms are for different tasks; choose the right one
-
Train the Model
→ The goal of training is to answer a question or make a prediction correctly as often as possible
→ Linear regression example: algorithm would need to learn values for m (or W) and b (x is input, y is output)
→ Each iteration of the process is a training step
As we can see, we might not be able to build a machine-learning project, but we can definitely say that the information is much clearer and easier to understand.
Why headings are important?
Using proper headings is important so the reader can better understand the hierarchy of a webpage. With that, the reader can distinguish if the topic has changed or if it is still talking about the same content.
When talking about accessibility, since the user can’t see different font sizes, colours, italics, etc., it is crucial for a screen reader user to have proper headings. This is how the user will be able to distinguish if the following topic is related to the previous or not. It is also used to skim through a web page and search for topics on the page. Without it, a blind person would have to read the web page line by line until they get to the desired content.
How are headings used?
Headings range from 1 to 6, and the lower the heading, the higher its hierarchy. The font size also changes according to the heading where heading 1 has the biggest font followed by the others.
The headings must be changed according to the content. Let’s go for an example of how to garden to make it simpler and clear to understand.
Observe the hierarchy levels for each heading in the below example. The title is assigned as heading 1. Because the title is heading 1, “Step 1: Choosing a Type of Garden” in the list is assigned as heading 2. Following Step 1, the two headings, “Step 1.1: Decide what you want to grow or do with your garden” and “Step 1.2: Consider how much space you have available,” are heading-level 3 because they belong to Step 1, and thus should be associated as such on the heading hierarchy .Then, as the information moves to “Step 2: Preparing Your Garden Plot and Tools,” it is assigned heading 2 because it it is still a topic related to heading 1 (i.e. “How to Garden” title), but not related to the previous heading 2 anymore. So now we have created a new heading 2 to discuss those new items.
How to Garden (Heading 1)
Step 1: Choosing a Type of Garden (Heading 2)
Step 1.1: Decide what you want to grow or do with your garden. (Heading 3)
There are many different types of gardens and uses for a garden, so think about what your ideal type of garden would provide. Some of the different types of gardens include:
- Vegetable garden
- Flower garden
- Butterfly or hummingbird garden
- Wildlife garden
Step 1.2: Consider how much space you have available. (Heading 3)
If you have lots of space, then you can plant a garden in the ground. If you have limited space or simply do not want to plant in the ground, then you can also plant a garden in containers. You can grow a variety of different plants in pots and keep them on a patio or in a sunny spot of your yard. Some plants even thrive in containers indoors, so using containers may also be ideal if you live in an apartment.
Step 2: Preparing Your Garden Plot and Tools (Heading 2)
Step 2.1: Choose a plot. (Heading 3)
Location is important when you are planning your garden. Most importantly, determine if the area you want to use gets enough sun. Then, consider if the size is appropriate for what you want to do with it and also consider how you will water this garden. You should either be able to pull a hose over to it if it is a large garden, or be able to carry a full watering can to it if it is smaller.
Now, the same content but with proper headings. Using proper headings, the screen reader user will be able to identify when the topic/subject has changed and understand the hierarchy of the web page.
Another way to write the above text would be:
1 – How to Garden
1.1 – Choosing a Type of Garden
1.1.1 – Decide what you want to grow or do with your garden.
There are many different types of gardens and uses for a garden, so think about what your ideal type of garden would provide. Some of the different types of gardens include:
- Vegetable garden
- Flower garden
- Butterfly or hummingbird garden
- Wildlife garden
1.1.2 – Consider how much space you have available
1.2 – Preparing Your Garden Plot and Tools
1.2.1 – Choose a plot
Common mistakes when using headings
- Using heading for styling, i.e. using headings to change the size of the font
- Skipping headings, i.e. going from heading 2 to heading 4 for example
- Leaving topics without headings
- Using colours to change topics without changing the heading
And that’s it! We just went through the most important regarding headings. Let’s do an exercise!
Exercises
Extra content
The video below gives a great example of a blind person using the internet. We can see how a screen reader works and reinforce the importance of using proper headings.
References:
- ChromeDevelopers. (2017, May 26). Why headings and landmarks are so important — a11ycasts #18. YouTube. Retrieved December 13, 2022, from https://www.youtube.com/watch?v=vAAzdi1xuUY
- Masley, S. (2022, December 1). How to garden (with pictures). wikiHow. Retrieved December 13, 2022, from https://www.wikihow.com/Garden
- W3Schools free online web tutorials. W3Schools Online Web Tutorials. (n.d.). Retrieved December 13, 2022, from https://www.w3schools.com/
- Why use accessible headings? YouTube. (2019, June 3). Retrieved December 13, 2022, from https://youtu.be/Q7hTVxmZ6UE
- wikiHow. (2022, August 17). 3 ways to make a phone call. wikiHow. Retrieved December 13, 2022, from https://www.wikihow.com/Make-a-Phone-Call