Adjust styling for 2nd-level headers

[ekressmiller]

As I understand it, if we want to use text enhancements to delineate headings, we should also apply header tags so screen readers can access the information in a similar way. It looks like the "Questions" are tagged as H1 (but "class" set to h3). When I set the headings within my subquestion to H2, they come out bigger than the question. Need to adjust them to be smaller than H1. Could probably even be normal font size but bold?

Appearance on screen of H1 question and H2 subheadings (in the subquestion)

Inspect info for Question:

[BryceStevenWilley]

Yep, unfortunately it's a known issue. The solution is to manually set the header class: https://suffolklitlab.org/docassemble-AssemblyLine-documentation/docs/coding_style_guide/accessibility#header-sizes.

I might be able to change our styles so all of the header sizes are one size smaller than the currently are, if that's doable I'll make the change.

[BryceStevenWilley]

We've got a few different independent choices that could work pretty well here.

Choice 1:

• make the h2 smaller than the question font size, or
• make the h2 the same size as the question font size (the horizontal bar below the question makes it stand out a bit more visually).

Choice 2:

• Go with overall smaller font-sizes and bolder text to still make it stand out from paragraph text
• Slightly larger font-size- and normal font weight

Note that either choice doesn't really change the size of the headers on mobile, there they intelligently scale to not take up the whole screen (they are a bit hard to distinguish from each other there, but they are still clearly distinguished from paragraph text).

The code is all in https://github.com/mplp/docassemble-mlhframework/tree/header_sizes

---

Example of smaller and bolder:

---

Example of larger and normal weight:

---

For comparison, this is what that screen looks like now:

[ekressmiller]

Thanks Bryce! For Choice 1, I'd prefer making H2s a little smaller than H1. I think H2s will be the most fine-grained subheading we use in most cases so making that distinction feels useful. For Choice 2, I think I slightly prefer the "larger and normal weight" option. Feels slightly easier on the eyes.