C09 A-Z Index

The A-Z Index component organizes services or content alphabetically, allowing users to quickly find items by letter. The component supports a headline, optional supporting copy, and additional space for supplemental content, giving flexibility to provide context or guidance alongside the index.

Component requirements

Required:

  • Headline: Text field.
  • Title type: Dropdown. H2/H3/H4/P/C1-Component. Default: P.
  • Top content alignment: Dropdown. Left/center. Default: Center.
  • Background: Dropdown. White/White smoke. Default: White smoke.

Optional:

  • Top support copy: Rich text field. Allows users to add additional content.

  • Bottom support copy: Rich text field. Allows users to add additional content.

Additional component notes:

  • The links are generated via custom link list.
  • Active bucket letter is highlighted.
  • If no links exist within a particular bucket, the letter is disabled.
  • Internal as well as external links can be added to the index.

Content guidance

List element naming guidelines below were developed based on examples encountered in MW care delivery brands. Use judgement based on individual care delivery brand.

A-Z lists naming guidelines

URL slug example

Preferred A-Z entry

Include acronyms if they are commonly known or something people might search for.

Electrocardiogram (EKG or ECG)

Add conjunctions for clarity.

Radiology & imaging

Add other words for clarity and logical alphabetical placement.

Shingles vaccines

Use title case for names of hospitals and proper nouns.

Advocate Heart Institute

Avoid adding entries for pages that are deeper than 4th level in the IA. Larger service lines may require exceptions.

Consider the consumer and where they would most likely look to find a type of care. For example, “urgent care” and “immediate care” generally refer to the same thing. But consumers may look for this care under both phrases. Same for radiology & imaging above. It might be good to also list under “Imaging”. Ask for SEO input.

“Featured services” are different between care delivery brands. Consistency across brands should be considered during migrations or other reorganizations.

The titles on A-Z pages are different on different care delivery brands. Use judgement in choosing. Examples:

ADA requirements

  • Use ARIA roles/attributes to indicate each letter’s state and purpose.
  • Ensure full keyboard navigation and operability.
  • Clearly mark letters with no associated links as skipped/disabled.
  • Provide aria-describedby or similar to announce component purpose to screen readers

Component example

A-Z index example showing component with White smoke background, and all content enabled (heading, top support, bottom support). Title is set to H3. A and B categories are enabled, with both internal and external links.

C09 A-Z index heading (required)

Top support copy (optional)

Bottom support copy (optional)