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.

 

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.