DP-9177 [a11y] Rules of Court

[ygannett]

Description:

• [MF template change] Make the page category info tie to the page title for assistive technology. Screen readers announce it along with the page title.
• [Drupal change] Add contextual info to the comp headings for the contact for screen reader users. The related already has the contextual info. Omit the event listing for now.

Jira: (Skip unless you are MA staff)
DP-9177

To Test:

• Go to /electronic-filing-rules/qa-rules-of-court or any rules of court page.
• Check the source for the page heading area to confirm the MF template change is reflected as shown below.

<section class="ma__page-header ma__page-header--has-optional-content">
  <div class="ma__page-header__content">
    <div id="page-category" aria-hidden="true">
      <div class="ma__page-header__category">
        <span class="visually-hidden">This page is under the category of </span>
        Electronic Filing Rules
      </div>
      <div class="ma__page-header__subCategory">
        <span class="visually-hidden">the sub category of </span>
        subheading
      </div>
    </div>

    <h1 class="ma__page-header__title" aria-describedby="page-category">_QA rules of court</h1>
  </div>
</section>

• Check the comp headings "Contact" in the main and side columns in the source to see they have their contextual info as visually hidden text.

<h2 class="ma__comp-heading    " id="" tabindex="-1">
  Contact
  <span class="visually-hidden">  for _QA rules of court</span>
</h2>

---

Peer Review Checklist