Skip to content

Build Screen Reader Friendly Pages for Every Episode

    Websites & Players

    Building Screen Reader Friendly Episode Pages

    Headings, landmarks, page titles, show notes, link text and transcript placement that let screen reader users move through episode pages easily.

    Published
    Read time
    6 min
    Level
    Intermediate
    Category
    Websites & Players
    Tags
    screen readersheadingsepisode pages

    A sighted visitor can glance at an episode page and understand it in a second: here is the title, there is the player, below it are the notes. A screen reader user cannot glance. They move through the page by listening, and they depend on structure to know where they are and where to go next. If your page is a heap of styled paragraphs, they must hear it from top to bottom to find the play button. If it is built with clear structure, they can jump to exactly what they want. Here is how to build the second kind.

    Start with a clear page title

    The page title, the text inside the title element in the page head, is the first thing a screen reader announces when a page loads. It is also the label in browser tabs and history. Make it specific and put the most useful words first, for example: “Episode 42: Growing Tomatoes in Small Spaces – The Garden Hour”.

    A title that says only “Podcast” or “Home” on every page leaves people guessing where they landed. If you use WordPress or a similar system, check what the theme produces by default, since generic titles are common.

    Use a logical heading structure

    Screen reader users often skip from heading to heading, much as sighted readers scan bold text. Headings are the table of contents of your page, so they need to be honest.

    • Use one main heading, the episode title, as the top level.
    • Use second-level headings for major sections like “Show notes”, “Guests”, “Transcript” and “Resources”.
    • Use third-level headings for subsections beneath them.
    • Do not skip levels to get a certain size. Control appearance with styles instead.
    • Do not use a heading just to make text big or bold, and do not fake headings with bold paragraphs.

    Read your headings alone, with nothing else. If they tell the story of the page, you have done it right.

    Add landmarks

    Landmarks are named regions that let people jump straight to the part of the page they want. Most modern HTML provides them through ordinary elements: a header for the top banner, a nav for the main menu, a main for the primary content, an aside for related material, and a footer at the bottom.

    Use exactly one main region, and put the episode, player and notes inside it. If you have more than one navigation area, such as a primary menu and a menu of related episodes, give each a distinct label so they are not both announced as just “navigation”. Combined with a skip link, this saves a great deal of time.

    Structure is the map a screen reader user navigates by.

    Structure your show notes

    Show notes are often a long block of text with timestamps and links jammed together. Break them into pieces that can be navigated.

    1. Begin with a one or two sentence summary.
    2. Follow with a list of topics or chapters, each with its timestamp as text.
    3. Add guest details under their own heading.
    4. Finish with resources and credits.

    Use real lists for anything that is a list. A screen reader announces “list, five items” before reading it, so the listener knows what to expect and can skip it. Lines separated by line breaks and bullet characters typed by hand do not give that benefit.

    Write link text that makes sense alone

    Screen reader users frequently pull up a list of all links on a page. In that list, each link is read without its surrounding sentence. So a list full of “click here”, “read more” and “this link” is meaningless.

    Write link text that describes where it leads: “Guest’s research paper on soil health” rather than “click here”. Avoid making the raw web address your link text, because it is read out character by character. If several links share the same wording but go to different places, add distinguishing words. Also tell people when a link opens a file or a new window, so there are no surprises.

    Place the transcript thoughtfully

    A transcript is one of the most valuable things on an episode page, and where you put it affects how usable it is. A 6,000-word transcript can be read faster than a one-hour show can be heard, and for screen reader users who listen at high speed, text is often the quickest route into your content.

    • Put it on the same page as the player, under its own heading, or provide a clearly labelled link to a dedicated page right near the player.
    • Do not hide it behind a mouse-only tab or an image.
    • Mark up speaker changes consistently, with names in bold at the start of a turn.
    • Use headings or timestamps at natural breaks in long transcripts.

    If you collapse the transcript to save space, make sure the toggle is a real button that says whether it is expanded or collapsed.

    Declare the language

    Set the language of the page on the opening HTML element. A screen reader uses it to choose the right pronunciation rules. Without it, a French episode may be read with English sounds, which is nearly unintelligible. If part of the page switches language, such as a quote in Spanish, mark that passage separately.

    How to test with a screen reader

    You do not have to be an expert. Every major operating system includes a screen reader, and free ones are available for desktop computers. Spend fifteen minutes with one:

    1. Turn on the screen reader and close your eyes or dim your screen.
    2. Load an episode page and listen to the page title.
    3. Open the list of headings and see whether the page makes sense from that alone.
    4. Open the list of landmarks and try jumping to the main region.
    5. Open the list of links and check that each is understandable out of context.
    6. Find and use the player, then find the transcript.

    Real users will do better than you, and they will notice things you will not. When you can, ask someone who uses a screen reader daily to try your pages and tell you what they find.

    Final thoughts

    A screen reader friendly episode page is mostly a well-built ordinary page: a useful title, honest headings, proper landmarks, tidy lists, meaningful links, a transcript close to the player and the language declared. None of it needs special tools or large budgets. Fix your template once and every new episode benefits. Then test with real software, because hearing your own page is the quickest way to learn what it feels like to use it.

    Quick answers

    Frequently asked questions

    01How should I structure headings on a podcast episode page?

    Use one main heading for the episode title, second-level headings for sections like Show notes, Guests and Transcript, and third-level headings for subsections. Do not skip levels for visual size or fake headings with bold text. Read the headings on their own: they should outline the page clearly.

    02What makes good link text for screen reader users?

    Link text should make sense when read alone, because screen reader users often browse a list of links. Describe the destination, such as Guest's research paper on soil health, instead of click here or read more. Avoid raw web addresses and distinguish links that share the same wording.

    03Where should I put the transcript on an episode page?

    Place it on the same page as the player under its own heading, or put a clearly labelled link to it right next to the player. Do not hide it behind a mouse-only control. If it is collapsible, use a real button that announces whether it is expanded or collapsed.

    Leave a Reply

    Your email address will not be published. Required fields are marked *