This ticket is regarding accessiblity complaince of .cql files in the eCQM packages generated in MADie.

Deque is the organization that performed the accessibility audit for the Joint Commission.

They used NVDA for the screen reader, which is a Windows open-source app.

DDSP is the Joint Commission eCQM engine, which provides users the interface and the debugging tool to evaluate their eCQM data processed against eCQM measures.

Following text is the Deque’s feedback when auditing the eCQM CQL logic in DDSP -> Source Viewer -> Logic Explorer of the following screen:

<picture>

Deque Feedback:

Lists (1.3.1.f)

The list or list item is not marked up properly.
Element description: List items present on the below sections:-

- Initial Patient Population
- Denominator

List items: -
✓ define "Initial Population":
                __✓ PCMaternal.✓ "Delivery Encounter with Age Range"
[..........]

Description of the issue: Above mentioned items are defined in separate list which will confuse the screen reader users to navigate on the page.

Expected:

• Items which are the part of a single list should be defined inside a single <ul> tag.
• If a list is a subpart of the parent list, items should be defined as a nested list.

RULE :  Lists MUST be constructed using the appropriate semantic markup.
HOW TO FIX:  Fix this issue by correctly applying <ul>/<li> or <ol>/<li> markup.

1. Unordered list: Wrap a series of list items (<li>) inside an unordered list element (<ul>). Unordered lists should be used when a set of items can be placed in any order.

Example:
<ul>
<li>Strawberries</li>
<li>Papaya</li>
<li>Mangos</li>
<li>Kiwis</li>
</ul>

1. Ordered list: Wrap a series of list items (<li>) inside an ordered list element (<ol>). Ordered lists should be used when the list items need to be placed in a specific order.

 __ 

Example:
<h3>How to boil an egg</h3>
<ol>
<li>Place eggs in a large saucepan.</li>
<li>Cover them with cool water by 1 inch.</li>
<li>Cover pan with a lid and bring water to a rolling boil over high heat.</li>
<li>When the water has reached a boil, remove saucepan from the burner.</li>
<li>Let eggs sit in water for 12 minutes.</li>
</ol>

There are 2 ways to identify the issue. Looking at the code and using a screen reader.  How we visually see the list and how it is nested must be conveyed to assistive technology so they receive the same information that is conveyed visually.

1. Looking at the code
   • Because the list is nested, I would expect to see <ul> or <ol> nested inside other <ul> or <ol> to convey the same information we see visually to assistive technology.
2. Listening to a screen reader
   • Navigating line by line (using down arrow key with NVDA), I would expect to hear:
     • list with one item logic met define initial population
     • list with one item logic met encounter with existing diabetes diagnosis
     • list with two items union logic met encounter with hypoglycemic medication
     • union logic not met encounter with elevated glucose...
     • <picture> 
       • The screen reader announcement conveys the same information that is seen visually with the nested lists.

If the visual structure of the nested lists is not important. I would recommend changing the format, so it no longer appears as a nested list.

• REFERENCEs:
• Deque University: https://dequeuniversity.com/class/semantic-structure2/lists/semantic-markup
• W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/page-structure/content/#lists
• The American Foundation for the Blind (AFB) provides information about Screen Readers and a list of applications:

https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers

• Code example from W3C of nested list

BACKGROUND:
People who can see are able to look at a list and get a sense that it is a list, how large it is, and its structure - whether there are multiple lists, nested lists, etc. People who are blind do not have this ability if the list is not marked with semantic list markup. Lists must be marked semantically in a way that correctly identifies the list structure and type: unordered, ordered, or definition/description. When list markup is correctly applied, screen readers are able to notify users when they come to a list and tell them how many items are in a list.