Structuring an Itch Page with Headings - for Games for Blind Gamers

I made an accessible game! But is its page accessible, too?

This question came up in the Games For Blind Gamers Jam community. After harduous game development, creators have the seemingly simple task of publishing it on an Itch.io page - an online game publishing platform. The twist is: the web page should be accessible, too.

A developer in the community was concerned about this and asked (paraphrased): "will my game's long description make it harder to reach the download section?".

That's a valid concern and it affects both sighted and blind players - how to easily find and reach not only the "Downloads" section, but all content sections. After all, everyone wants to find what they're looking for, without much hassle. Generally, it's important to have nice visuals and concise writing. But there's something else to keep in mind: the page structure - by using headings.

Itch.io webpages: how they are structured

First of all, let's see how an itch page is structured. Depending on the game file and if it is a submission to a jam, there might be some banners, an embed with the game if it's playable on browser, a text description about the game, the downloads section and the comments. There can also be images and other types of content.

Here's an example page from a game called Echolocation.

Echolocation's itch page.

Its description very concise - one paragraph long. But you'll notice some words in the page are styled as bolder and bigger, such as the game title, and the words "Download" and "Comments". Our eyes dart straight to them, because we know they come right before a content section and tell us what the content below them is all about.

Try a longer, more complex page and these headings become very handy. See Adventure 4's itch page, which has more content.

The game's description has well-defined content sections, preceded by clear headings.

The description is longer, so those extra headings help us navigate it and find the content we want in a brief skim reading. Want to know about the game controls? You'd rather skip immediately to the downloads? Then follow the signs - the headings.

Sure, but blind gamers can't see those. Or can they?

These headings stand out visually, so they're very helpful for people who rely on their sight. But blind users can also see them, in their own way. Screen readers, like NVDA, respond to shortcut commands that will jump to special kinds of content, like headings (H key, for NVDA) and quotes (Q, for NVDA).

So, instead of reading the whole page by pressing the arrow keys to read sentences one by one, a blind user can press H and go through all content sections in the page, by reading their respective headings. Plus - if you press 1, it'll find all level 1 headings; press 2 and it'll find level 2 headings.

Here's another example. Let's see Subhunt's itch page.

SubHunt's headings stand out visually.

And here's what the page's document outline looks like - that is, a list of the headings a screen reader will find and announce to the user, if the user asks for it:

Document outline as displayed by the Web Developer extension.

In practical terms, what'll happen when a screen reader user presses H, is it will read the headings one by one in this order. The focus would move to the next heading, is a logical hierarchy:

1. Itch.io;

2. This is a submission to games for Blind Gamers 4;

3. Subhunt;

4. Gameplay;

5. Controls;

6. Debug;

7. Credits;

8. Download;

9. Development Log;

10. Comments.

On video, you can see how NVDA navigates between headings by pressing H - and how it points out that they are headings, when reading them.

When Headings are Coded Correctly: NVDA behaviour

You can see that the website's heading, Itch.io, is the first main heading, followed by a heading of level 3 about the jam submission. Those are provided by Itch itself.

Within the author's control, though, is the game description. The game's title is the main heading (h1) because everything else coming after is related to it and under it: it's Subhunt's Gameplay, Subhunt's Controls, etc.

Not all headings are born equal. Equality is in your hands.

Sometimes, content authors might organize their description in different sections and add headings - at least, make plain text look like one. That's when inequality of access starts: a sighted and a blind user won't perceive them the same way.

If you style text to look like a heading by making it bigger, bolder, in a different color and/or isolated in its own paragraph... it'll stand out for a sighted user. See the gorgeous Ladybud Roll page as an example, as of March 1st, 2025:

Conceptual headings stand out visually as bigger and bolder text in its own paragraph.

But many of those headings are missing in the document outline. A screen reader won't find them when a user presses H: they'll have to search the page sentence by sentence.

Many headings that were visually evident aren't coded as such.

And here is also a video showing that the headings aren't recognized as such by NVDA.

When headings are only styled - NVDA behaviour.

So, make sure to code your headings as headings. And this way your visually impaired players will be able to find content sections in the page much more quickly, in a similar experience to a sighted player's.

What headings should I add?

Some headings, as you may have noticed, are inserted by default by itch.io itself. These are:

Before the description, they added:

• "Itch.io (h1)"

• "This is a submission for [Jam name]" (h3)

• The game title (h1).

After the description, they added:

• Downloads (h2);

• Developer Logs (h2);

• Comments (h2).

For us, as content creators: we should consider if the content is long enough to warrant sections and, if so, we'd add their headings in the description:

• Headings for content sections related to the game - e.g.: Controls (h2);

• Headings for content subsections related to a specific section - e.g. Keyboard controls (h3), Mouse controls (h3) - under the section Controls (h2).

• And so on - as needed.

How do I code headings in an itch.io game page?

In the game page, you just have to scroll down (or press H, or 2, with NVDA :) ) to get to a h2 heading called "Details". Under, you'll find a text input box with an array of buttons to style the text.

1. Press the second button, "Format".

2. Choose "Heading 2" in the dropdown to add a section heading, like "Controls";

3. Choose "Heading 3" for headings under an already existing level 2 section.

4. Scroll down to choose headings of other levels, as needed.

Itch editor: inserting headings in the Description text box.

You could also add Heading 1 - like the game title - but I wouldn't recommend it. It is usually reserved to describe and summarize the whole webpage which in this case it the game.

You can also use this formatting option to insert quotes, if you want!

Note: I'm afraid the formatting options are inaccessible for keyboard and screen reader users.

Heading structures and hierarchy

Headings are like chapters of a book: usually, we'd have a single book title, some chapters, and some subchapters. Also, usually, we don't jump from the book title to a subchapter. We need a chapter section between them:

1. Earth and Nature

   1. Plants

      1. European Plants

      2. American Plants

      3. Asian Plants

      4. Oceanic Plants

   2. Animals

      1. Wild animals

      2. Pets

      3. Humans

   3. Geology

      1. Mountains

      2. Beaches

      3. etc

The same would happen with headings for your itch page - or any other webpage, or even Word and PDF documents. It's a good practice to not skip heading levels. Instead, be mindful of their hierarchy and logic. For example:

• Game Title (h1)

  1. Summary (h2)

  2. Controls (h2)

  3. Credits (h2)

     1. Main team (h3)

     2. Playtestesters (h3)

     3. Other sources of content (h3)

But there's another structure that improves on this one, and might be preferred by blind users.

For better usability - Article update:

As a blind user pointed out to me, some itch.io regular users are used to find the Download section (h2) by simply pressing the '2' key shortcut. Having a lot of h2s in the description would make it more cumbersome to find this important section of the page. on the other hand, if the description uses fewer h2 headings, then they'd find the Downloads section much quicker.

A solution to this dilemma is to only have a single h2 in the description, like "Description", "About", or "Gamebook"; with other headings like "Summary" and "Controls" under it, as h3. Here's a proposed example:

1. Game Title (h1) [coded by itch]

   1. Description (h2)

      1. Controls (h3)

      2. Credits (h3)

         1. Main team (h4)

         2. Playtestesters (h4)

         3. Other sources of content (h4)

      3. Download (h2) [coded by itch]

      4. Comments (h2) [coded by itch]

Extra tips and resources

If the page is description is short and sweet, you probably don't need all this fancy stuff and wouldn't need that many headings. But if you have much info to share, it might be good to structure it correctly for all your players!

Also, it's always a good idea to ask for feedback. If blind users are your target demographic, listen to their experience on the page to improve its usability. Accessibility and usability aren't only checking off checkboxes on a list: it's about ensuring a better experience, based on lived experiences.

You can also see the Document Outline of any webpage by using the Web Developer Extension for Chrome.

Conclusion

This whole post came because of a question (paraphrased):

We have a long description text on our game's itch page, and the download section is below that. Is it more difficult to reach the download section? How would I make it easier?

... And I would add: how to make it easier to reach any section of the page?

And the answer, in my opinion, is: the Downloads section will always be found easily with a screen reader when users use a shortcut like the H key, or '2' - because that part's already coded correctly by Itch.io. As for other content in the description:

• Try to be concise;e

• If needed, separate your content into logical sections;

• Use headings for those sections;

• If you use headings, don't just style them as bold text - instead, make sure to code them properly (with a correct hierarchy), so screen readers can easily find them.

• Don't format something as a heading if it isn't one, just because it'll look pretty! (But that's a story for another time).

• And, as always, ask for feedback to go from good to better!

If you can achieve all these, both sighted and blind players will read your content much more easily - and find what they need in a few seconds, be that information or a download button. So go forth and spread the gospel of accessible itch pages - and start applying it in all your itch games.

This guide was created to help the Games for Blind Gamers initiative.

This article was updated on 2nd of March, 2025 to add video captions and correct a few mistakes.