Skip to content

Improve schema.datacite.org accessibility for footer social links, document semantics, and heading structure#163

Merged
ashwinisukale merged 5 commits into
masterfrom
copilot/fix-footer-icon-only-links
May 15, 2026
Merged

Improve schema.datacite.org accessibility for footer social links, document semantics, and heading structure#163
ashwinisukale merged 5 commits into
masterfrom
copilot/fix-footer-icon-only-links

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 13, 2026

This updates schema.datacite.org templates to resolve footer “Empty link” accessibility violations and related semantic/accessibility issues identified through WAVE and Lighthouse audits.

Footer social link accessibility

  • Added explicit aria-label values to every icon-only social link in source/includes/_footer.html.erb:

    • Email, Blog, GitHub, X, Mastodon, LinkedIn, YouTube
  • Kept existing URLs, classes, layout, and icons unchanged.

  • Marked decorative icons as hidden from assistive technologies:

    • <i ... aria-hidden="true">

    • X inline SVG now includes:

      • aria-hidden="true"
      • focusable="false"

Example:

<% link_to 'https://twitter.com/datacite',
           class: "share",
           "aria-label": "DataCite on X" do %>
  <svg ... aria-hidden="true" focusable="false">...</svg>
<% end %>

Document language + semantic structure

  • Added lang="en" to the root <html> element in source/layouts/layout.erb.
  • Added a semantic <main id="main-content"> landmark around primary page content to improve screen reader navigation and document structure.

Image alternative text

  • Added alt="<%= ENV['SITE_TITLE'] %>" to the header logo image in source/includes/_header.html.erb.

Heading hierarchy / skip-level fixes

  • Promoted footer column headings from h4 to h2 in source/includes/_footer.html.erb to avoid skipped heading-level warnings.

  • Updated footer CSS selectors from .footer h4 to .footer h2 (including margin styles) to preserve existing visual presentation.

  • Corrected schema page heading hierarchy in source/layouts/index.erb:

    • Schema Versions changed from h4h2
    • schema version links changed from h5h3
  • Corrected markdown heading hierarchy in:

    • source/meta/kernel-4/index.html.md
    • source/meta/kernel-4.7/index.html.md
  • Updated:

    • #### See Version 4.7 Update...
    • to:
    • ## See Version 4.7 Update...
  • This resolves Lighthouse “Heading elements are not in a sequentially-descending order” findings.

Touch target improvements

  • Increased interactive navigation/link target sizing to better satisfy Lighthouse/Deque touch target accessibility recommendations.

Validation

  • Validated locally using:

    • WAVE (WebAIM)
    • Lighthouse Accessibility audits
  • Confirmed resolution of:

    • “Empty link” violations
    • missing landmark issues
    • heading hierarchy warnings
    • touch target accessibility warnings

Related issue

Agent-Logs-Url: https://github.com/datacite/schema/sessions/ca1e911b-ec40-4675-b819-e2cf066aed1f

Co-authored-by: ashwinisukale <1137325+ashwinisukale@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix accessibility issues for icon-only links in footer Improve schema.datacite.org accessibility for footer social links, document semantics, and heading structure May 13, 2026
Copilot AI requested a review from ashwinisukale May 13, 2026 06:39
@ashwinisukale ashwinisukale marked this pull request as ready for review May 15, 2026 09:48
@ashwinisukale ashwinisukale merged commit da67f4e into master May 15, 2026
1 check passed
@ashwinisukale ashwinisukale deleted the copilot/fix-footer-icon-only-links branch May 15, 2026 10:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants