Missing semantic structure in quick facts section

[sgroi-l]

Description

The "Quick Fact" section on the service page lacks proper semantic structure. Key information is styled in a way that suggests importance but does not use appropriate semantic elements to convey its meaning.

Expected Behaviour

• Information, structure, and relationships conveyed through presentation should be programmatically determined or available in text.
• Semantic elements like headings should be used to structure content properly.

Actual Behaviour

• The "Quick Fact" section contains styled content that lacks semantic equivalents. For example, the main content is styled to appear larger but does not use appropriate semantic elements to indicate its significance.

How to Replicate

1. Visit a service page, such as this example page.
2. Locate the "Quick Facts" section.
3. Inspect the HTML markup to verify that the section uses div elements with styling but lacks semantic elements.

WCAG Reference / Links

• WCAG Guideline 1.3.1: Info and Relationships (A)
  Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text, such as headings, landmarks, lists, tables, and footnotes.

More details: WCAG 1.3.1 Info and Relationships

Recommendations

1. Update the "Quick Fact" section to use appropriate semantic HTML elements.

[markconroy]

@sgroi-l can you test this PR please? Especially, take note of the comment in the Accessibility section in the PR.

Thanks.