Optimization (accessibility): Lists do not contain only <li> elements and script supporting elements

[rfultz]

Background

Looking to optimize the site's performance and that of the homepage specifically, the Lighthouse tool in Chromium browsers has made some suggestions. Some of these will have repercussions throughout the app so we're going to make them their own tickets.

Accessibility Recommendation: Lists do not contain only <li> elements and script supporting elements

Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. details

Overview

<ul> are not supposed to have <div> as children.

Benefit (the 80 of 80/20)

Will help screen readers and search engines read the page

Effort (the 20 of 80/20)

Minimal for this page
Moderate if other pages are affected

Complications

• Is there a reason we have a UL with children that are both DIV and UL? Are both <ul><div> and <ul><ul> breaking the rules? Any reason the parent <ul> shouldn't be a <div>?
• Are we doing something like this anywhere else on the site?

Related tickets

• Preload key requests
• Remove unused JavaScript
• Remove unused CSS
• Preconnect to required origins
• Eliminate render-blocking resources
• Ensure text remains visible during webfont load
• Reduce the impact of third-party code
• Does not use passive listeners to improve scrolling performance
• Image elements do not have explicit width and height
• Serve static assets with an efficient cache policy
• Minimize main-thread work
• Avoid an excessive DOM size
• Reduce JavaScript execution time
• Avoid enormous network payloads
• [aria-hidden="true"] elements contain focusable descendents
• Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children
• [aria-*] attributes do not have valid values
• ARIA IDs are not unique
• [user-scalable="no"] is used in the element or the [maximum-scale] attribute is less than 5
• Links to cross-origin destinations are unsafe
• Serves images with low resolution

[rfultz]

Valid child elements for <ul> are <li>, <script>, and <template> (mdn). (<li> content can be anything.)

I can't find a way to easily scour the site looking for <ul> children that aren't <li>—no easy way to querySelectorAll('ul > li:not')—but spot checking the 300+ instances of <ul, it doesn't seem to be a widespread issue.

There's an instance inside fec/legal/templates/legal-advisory-option.jinja that I've corrected and there's another issue in fec/fec/static/js/data/terms.json where the html is inside a string (three occurrences on line 28)