SuffolkLITLab / docassemble-AssemblyLine

Quickly go from a paper court form to a runnable, guided, step-by-step web application powered by Docassemble. Swap out branding and pre-built questions to meet your needs.
https://suffolklitlab.org/docassemble-AssemblyLine-documentation/
MIT License
42 stars 5 forks source link

Header Accessibility and Header size. #454

Closed BryceStevenWilley closed 1 year ago

BryceStevenWilley commented 2 years ago

There was some conversation about header size today.

In accessible pages, there is exactly 1 h1 header on the page, and all of the headers below that are sequential and don't skip headers (https://www.w3.org/TR/WCAG20-TECHS/H69.html#H69-description). The main issue is that the main question specifically has the h3 class applied to it, which makes the h1 header look like an h3 header.

<div class="da-page-header">
  <h1 class="h3" id="daMainQuestion">What is your name?</h1>
  <div class="daclear"></div>
</div>
<div class="da-subquestion">
  <h1>header 1</h1>
  <h2>header 2</h2>
  <h3>header 3</h3>
  <h4>header 4</h4>
</div>

On the default docassemble, it looks like this: Screenshot from 2022-04-25 19-24-41

The best approach to this is the somewhat hacky thing of making all headers within the da-subquestion div look like one header below, i.e. make h2 have the .h3 class, etc.

Originally posted by @BryceStevenWilley in https://github.com/SuffolkLITLab/docassemble-AssemblyLine/issues/452#issuecomment-1109138694

nonprofittechy commented 1 year ago

I think we should perhaps audit our question library and make sure we're not using any <h3> or <h4> in the wrong places. Once we do that we can close.

We have already documented here, so keeping the issue open will be redundant: https://suffolklitlab.org/docassemble-AssemblyLine-documentation/docs/coding_style_guide/accessibility#maintain-consistent-header-increments

BryceStevenWilley commented 1 year ago

https://github.com/search?q=org%3ASuffolkLITLab+%28%22%23%23%23%22+OR+%22%23%23%23%23%22+OR+%22%23%23%23%23%23%22+OR+%22%23%23%23%23%23%23%22%29+AND+NOT+%22%23%23%23%23%23%23%23%23%22+language%3AYAML+&type=code is a good search for all of the ### and #### markdown headers, there are 55 files with those.

Suprisingly, we don't have any uses of <h3> or <h4> in interviews; https://github.com/search?q=org%3ASuffolkLITLab+%3Ch3%3E+language%3AYAML+&type=code.

nonprofittechy commented 1 year ago

I didn't read this issue as "audit every interview to make sure it uses the proper heading hierarchy," just to audit the question library in this framework. Is auditing every interview for this specific accessibility problem something we plan to do, and is this the right place to track it?

nonprofittechy commented 1 year ago

Going to close for now after confirming that we do not have any H3 or H4 in the wrong order in any of this repo's YAML files. Going to let #746 track the need to do this on other repos.