Skip to content

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

Draft
Copilot wants to merge 2 commits into
masterfrom
copilot/fix-footer-icon-only-links
Draft

Improve schema.datacite.org accessibility for footer social links, document semantics, and heading structure#163
Copilot wants to merge 2 commits into
masterfrom
copilot/fix-footer-icon-only-links

Conversation

Copy link
Copy Markdown

Copilot AI commented May 13, 2026 •
edited
Loading

This updates schema.datacite.org templates to resolve footer “Empty link” accessibility violations and related semantic issues. Icon-only social links now expose accessible names, decorative glyphs are hidden from assistive tech, and document semantics are tightened (html[lang], logo alt, footer heading order).

  • 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/icons unchanged.
    • Marked decorative icons as hidden:
      • <i ... aria-hidden="true">
      • X inline SVG now has aria-hidden="true" and focusable="false".

  • Document language + image alternative text

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

  • Footer heading semantics (skip-level mitigation)

    • 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) to preserve current visual presentation.
<% link_to 'https://twitter.com/datacite', class: "share", "aria-label": "DataCite on X" do %>
  <svg ... aria-hidden="true" focusable="false">...</svg>
<% end %>
Original prompt

Fix accessibility issues in the schema.datacite.org site within the datacite/schema repository.

Primary fix: footer icon-only links flagged as “Empty link”

Update source/includes/_footer.html.erb so that all icon-only social links have accessible names and decorative icons are hidden from screen readers.

Requirements

  • Do not change URLs
  • Do not remove existing classes (e.g., share)
  • Do not change layout or styling
  • Do not remove icons
  • Only add accessibility attributes.

Apply to all footer social links

Add aria-label to each icon-only link using these labels:

  • mailto:support@datacite.org → Email DataCite support
  • https://datacite.org/blog/ → DataCite blog
  • GitHub → DataCite on GitHub
  • Twitter/X → DataCite on X
  • Mastodon → DataCite on Mastodon
  • LinkedIn → DataCite on LinkedIn
  • YouTube → DataCite on YouTube

For <i> icons: add aria-hidden="true".

For the inline SVG icon used for X/Twitter:

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

Note: Mastodon link is a literal <a ...> tag (not link_to), keep rel="me", class share, and URL unchanged; add aria-label and hide its <i> icon.

Additional fixes

  1. HTML lang attribute
  • Ensure the root <html> element has lang="en".
  • Update source/layouts/layout.erb (current file uses <html> without lang).
  1. Images alt text
  • In source/includes/_header.html.erb, the logo <img> currently has a title but no alt.
  • Add meaningful alt text (use <%= ENV['SITE_TITLE'] %>).
  1. Footer heading structure
  • Check for skipped heading levels in the footer (source/includes/_footer.html.erb). If WAVE/Lighthouse flags heading order, adjust to avoid skipped levels while preserving existing visual styling. Prefer minimal-change approach; do not alter layout/styling.

Validation

  • WAVE: no “Empty link” errors
  • Lighthouse Accessibility: improve/ensure pass
  • Verify keyboard navigation works
  • Ensure no visual regressions

Output

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: how to run https://schema.datacite.org/ locally

Assistant: To run https://schema.datacite.org/ locally, you run the schema.datacite.org site generator and serve the built static files on your machine.

1) Prereqs

  • Git
  • Ruby (commonly 3.x) + Bundler (gem install bundler)
  • Optional: Node.js (only if the repo uses it for assets; many Jekyll sites don’t)

2) Clone the repo

git clone https://github.com/datacite/schema.git
cd schema

3) Install dependencies

bundle install

If you hit native-extension build errors, you may need OS build tools (e.g., build-essential on Ubuntu, Xcode Command Line Tools on macOS).

4) Run the local server

Most DataCite docs/sites are Jekyll-based; try:

bundle exec jekyll serve

Common variants (if the repo uses a docs/ folder or custom config):

bundle exec jekyll serve --livereload
bundle exec jekyll serve --source docs
bundle exec jekyll serve --config _config.yml,_config_dev.yml

Then open:

5) If it’s not Jekyll: use the repo’s documented command

If bundle exec jekyll serve fails, the repo usually defines the right entrypoint in one of:

  • README.md
  • Gemfile / Rakefile
  • package.json scripts (if Node-based)
  • GitHub Actions workflow (shows the build command)

Tell me what error you get (paste the first ~30–50 lines), or share the output of:

ls

and I’ll give you the exact command for that repo layout.

User: Work on DataCite accessibility issue:
datacite/datacite#2450

Scope:
Fix accessibility issues in the schema.datacite.org site (datacite/schema repo only).

Primary issue (from WAVE):
Footer social links are flagged as “Empty link” because they contain only icons and have no accessible name.

Root cause:
Anchor tags () contain only or icons without text or aria-label.

Target file:
source/includes/_footer.html.erb

REQUIRED FIX

Add accessible names to ALL icon-only links using aria-label.

Also ensure decorative icons are hidden from screen readers.

IMPLEMENTATION DETAILS

Update each social link like this:

BEFORE:
<% link_to 'https://github.com/datacite/datacite', class: "share" do %>

<% end %>

AFTER:
<% link_to 'https://github.com/datacite/datacite',
class: "share",
aria: { label: "DataCite on GitHub" } do %>

<% end %>

APPLY TO ALL LINKS

U...

This pull request was created from Copilot chat.

@ashwinisukale
fix: improve footer and layout accessibility semantics
c99d268 
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ashwinisukale ashwinisukale Awaiting requested review from ashwinisukale

At least 1 approving review is required to merge this pull request.

Assignees

@ashwinisukale ashwinisukale

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ashwinisukale