These are just some notes for my own use, but you can use them too if they help you! I recommend viewing the page source, too. These are techniques to help your websites be more accessible to screen readers (the tools blind and low vision people use computers with) and people who navigate by keyboards. I know a lot of Neocities sites are intentionally ugly and inaccessible, but having a disability myself, that's not for me.
Many ARIA roles are already taken care of by using basic HTML5 correctly. I've found the MDN Web Docs to be useful for remembering the difference between things. (Did you know you're not supposed to use HTML just to make something bold or italic anymore? Wild!)
Major navigation sections use the
nav element. If you have two or more navs, you use
aria-labelledby (note the double L) to distinguish them in your code.
Example from MDN, showing header nav and footer nav:
<header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">Primary navigation</h2> <!-- navigation items --> </nav> </header> <!-- page content --> <footer> <nav aria-labelledby="footer-navigation"> <h2 id="footer-navigation">Footer navigation</h2> <!-- navigation items --> </nav> </footer>
I had to escape all the < and > characters in that so that it'd display properly.
For headers, you shouldn't jump from
h3, etc. To a screen reader, it's like a numbered list where you're missing number 2 and people will wonder where it went. Just change
h2 to look like you want with CSS.
A few HTML5 elements display the same way or similarly by default, but mean different things. They include
var (all italic by default), as well as
b (both bold by default), and
kbd (all monospace by default).
emis for EMphasis. You use it to put stress on specific words.
iis for Idiomatic. You use it when text isn't being stressed, but is different somehow, like thoughts, transliterations, or things that aren't creative works but are commonly written in italics, such as species (Homo sapiens) or the names of ships (the Titanic).
cite; that one's easy. For example, I've been playing a lot of Hades and Animal Crossing recently.
dfnis for DeFiNing words. I don't totally get the point, but apparently it's used for marking the first use of an abstruse (difficult to understand, obscure) term, along with its definition, so readers don't feel confused for not knowing it and machines better understand the point of the text. But it's not the same as a definition, which should be in a description list? Plays well with
varis for VARiables, like in math. (Or programming.) The equation for a straight line is y = m*x + b, for instance.
I'll get to the bold and monospace later, and write up some stuff about ARIA labels and the other elements I mentioned.