Profile Page Accessibility Fixes

[betsyecastro]

Addresses the majority of the issues reported in the Atlas ticket #745306 including reader navigation and WCAG compliance issues across all profile section templates, including:

1. Skipped Heading Levels

   • Changed H3 headings to H2 for all sections to maintain proper heading hierarchy after the H1 profile name
   • Changed H5 headings to H3 in: activities, additionals, affiliations, areas, news, projects, presentations, and support sections
   • Changed H6 to H4 in the support section

2. Non-Semantic HTML Elements

   • Replaced <div> elements with proper <ul> and <li> lists in: additionals, affiliations, appointments, areas, awards, preparation, publications, and support sections
   • Used <ul> → <li> → <article> structure for: activities, news, projects, and presentations sections
   • Added aria-label to list items in all sections to prevent screen readers from announcing long headings twice
   • Added <p> tags in all sections to to prevent screen readers from announcing long headings twice and the entire element content

3. External Link Icon: For the additionals, areas, news, presentations, publications, projects and support sections:

   • Moved external links from icons to article/publication titles
   • Added has-external-link-icon class to fix underline styling for links with external link icons
   • Added "opens in new tab" screen reader-only text to external links in the same sections

Replaces PR #212 for file reorganization.

[betsyecastro]

Hi @wunc, I tested how VoiceOver reads the <li> elements on Safari, Firefox, and Chrome, and each element is announced correctly without the aria-label attribute. The repetition I was seeing was a Silktide artifact and not an actual screen reader issue, so I removed the aria-label from the list items across all sections.

I also removed role="region" from all sections. It was originally added because Silktide wasn't recognizing the <section> elements as landmarks without it — even though <section> with an id attribute should be sufficient for that purpose. After verifying with VoiceOver, the landmarks are identified correctly without the role attribute, so it was removed as well.

[shukla-m]

@betsyecastro I reviewed the code and tested the changes using the following tools:

• Chrome Silktide extension
• Firefox developer tools (Accessibility tab)
• VoiceOver

I have the following suggestions for nav and footer (not specific to Profiles page):

• nav.blade.php: add alt="" to <img> tag to indicate that it is a decorative image. Since the user's name is right next to the image, the screen recorder won't announce it twice.
• layout.blade.php (and possibly template.blade.php): currently doesn't meet contrast ratio - adjust color and/or background color to meet contrast ratio.