I can see why you think it’s an appearance class; as DaveMaxwell says, in one way it is. You could use a class based clearly on what it is: e.g. <span class=“phrase-that-does-not-need-to-be-visible-to-sighted-visitors”> but <span class=“hidden”> is much easier to type and means the same thing.
Does that help?
To me, it seems like a comment in the code than an actual text that needs to be styled (in context of the discussion).
It’s text that needs to be there to give context for a visually impaired user, rather than a comment. In the second example (for Debbie’s menu) it’s perhaps a little less clearly so, as the <h3>My Account</h3> provides some context.
In the first example, the WebAIM breadcrumb navigation, a visually impaired user hearing just the list of links read out might not realise that it’s a breadcrumb trail to the current page and be confused by it. Adding the “You are here” text solves the problem. It’s not needed for sighted users, so is hidden from view. (The only styling applied is to hide it.)
Ahhh. Gotcha. Didn’t realize that. I’ve actually never heard of that - should I be doing that for most things? Should I include a hidden “navigation” for my NavBar?
Well, obviously you have to be judicious about it. A common example is a hidden heading just before a navigation block, as some peaple navigate a page by jumping from heading to heading. Unless there’s something like an ARIA role in place, there’s nothing to distinguish a navigation section. So a hidden heading like Page Menu could be handy.