Micro-learning Accessibility, Instructional Design 02:38
Series: The Accessibility Minute-ish Episode 2 of 2
In this episode of The Accessibility Minute-ish, we are taking the party to the web to tackle heading hierarchy in the Drupal WYSIWYG editor.
Video
Welcome to The Accessibility Minute. I am your host, Alex Sanchez, and today we are building better documents.
Last time we stopped faking headings in Word. Today we're taking the party to the web right here inside the Drupal editor.
Look at this formatting dropdown in the toolbar, the one that usually says normal or paragraph. I'm wiggling my mouse over it because it is a danger zone. When you're building a page, how you use the h1 through H6 tags from this menu is critical.
Spoiler alert they are not a font size buffet.
Think of heading tags like a staircase, just like the graphic on screen showing steps h1, H2, H2, H3, and H4. If you try to step from H1 straight up to H4, you're going to do a painful split and fall down the stairs exactly like our cartoon friend is doing right now.
You can't just skip from step one to step four without pulling a hamstring. Screen reader users rely on this exact one by one hierarchy to build a mental map of your page. Back in the editor, let's look at the first rule of Drupal headings. Your main page title is already the H1. It's the boss. That means the content you type into the editor body should start with an H2 watch as I highlight this first bolded line of text.
Click the format dropdown menu. Skip right past H1 and select heading two. Now lower down in the text. We have a smaller subsection title. I'll select it and open the format dropdown again. Got a sub point under that H2. Make it an H3. I'm hovering my mouse over heading five right now. It's tempting, I know, but I'm moving my mouse back up and clicking heading three. Never jump from an H2 down to an H5 just because you think the smaller font looks cuter. Doing that makes a screen reader think a whole section of your web page just fell into a sinkhole. As the text on our final title card says, never pick a heading for its size.
If your H3 is too small or your H2 is obnoxiously large, bribe your web developer with coffee to update the CSS theme. Don't break the structure of your site for the sake of esthetics. Keep your headings in order that is your accessibility minute. Remember, true inclusion starts with proper structure. See you next week.