How do screenreaders navigate all the complex HTML and UI elements on a webpage? Like header bars and buttons and sidebars and other dividers on a page, and things like that.
This one may unfortunately be a little bit above my pay grade. I don’t know too much about the technicalities of HTML or web coding.
What I can tell you is that most of those elements are announced when we land on one and that we often use shortcut keys to jump to useful elements. We can quickly jump between headings, links, buttons, combo boxes, and form controls. If these things are not marked up properly, it can interfere with our ability to navigate the Page efficiently.
One of the most common accessibility barriers we face is actually unlabeled buttons. This is especially prevalent in mobile apps. It is not uncommon for me to download a new trendy app, only to open it and find that every single button in it is completely unlabeled so all I hear everywhere I touch is “button.” As you can imagine, this can make even the most simple apps completely unusable. Buttons must have accurate labels, not just the visual appearance of one. If the visual image on the button says submit, then the actual label should also say submit. This can also be a problem sometimes with unlabeled links.
Similarly, headings that are not actually marked as headings are a common issue. This is most common in documents rather than proper webpages—often times someone will make a word document and they will make a fake heading by just changing the font size to 40 without actually choosing the heading style. When a heading isn’t actually properly marked as a heading, this means that to a screen reader, all of that text is body text so we cannot use the heading shortcut to skip to different sections with different headings. Jumping between headings is a major way that many of us navigate webpages and documents quickly and get a sense of what kinds of information are present without having to manually arrow through all of it. It’s one of the closest things we have to skimming.
For things like side bars, these are often considered regions which we can also jump to with a shortcut. Sometimes these are also not correctly labeled or marked which can make them a little bit harder for us to find or understand what we are looking at when we are manually tabbing through links on it. However, if by sidebar you meant the visual divider, we do not interact with that element.
Dividers in general are not meant to be interacted with by a screen reader because it just adds clutter. One common piece of accessibility advice given is actually deliberately not to describe purely decorative dividers, such as a swirly line between paragraphs, because it adds unnecessary elements for us to move through and adds no functional benefit to us.
Beyond these things, my understanding of how it all works on a technical level comes to an end. I can tell you how I use a screen reader and I can tell you how I navigate websites in general terms, but I am definitely not a coder or web designer of any kind so I can’t get too far into the weeds of how it all works under the hood. I hope this is a useful enough explanation though to answer the broad strokes of your question.
