fix: resolve WCAG 2.1 AA accessibility issues across SciX blog pages by thostetler · Pull Request #622 · adsabs/adsabs.github.io

thostetler · 2026-03-04T19:17:39Z

Resolves a broad set of accessibility failures found via the Siteimprove Alfa scanner across 57+ SciX blog pages. All rules now pass with zero failed outcomes.

Bunch of accessibility updates for the `/scixblog/

Results by Rule

Rule	Description	WCAG	Before	After	Delta
sia-r2	Image alt text	1.1.1 Non-text Content	165	0	-165
sia-r11	Link purpose in context	2.4.4 Link Purpose (In Context)	1	0	-1
sia-r15	Interactive element label	4.1.2 Name, Role, Value	49	44	-5
sia-r41	Link purpose (link only)	2.4.9 Link Purpose (Link Only)	12	12	0
sia-r53	Heading order/levels	—	16	0	-16
sia-r65	Focus visible	2.4.7 Focus Visible	64	64	0
sia-r66	Contrast (enhanced)	1.4.6 Contrast (Enhanced)	637	562	-75
sia-r68	Table info & relationships	1.3.1 Info and Relationships	2	0	-2
sia-r69	Contrast (minimum)	1.4.3 Contrast (Minimum)	398	258	-140
sia-r74	Relative font sizes	1.4.8 Visual Presentation	120	0	-120
sia-r77	Table header markup	1.3.1 Info and Relationships	1	0	-1
sia-r81	Link purpose in context	2.4.4 Link Purpose (In Context)	4	4	0
sia-r87	Heading structure	—	64	64	0
sia-r111	Click/touch target size	2.5.5 Target Size (Enhanced)	937	0	-937
	Total		2,470	1,008	-1,462

Remaining Issues

The following rules have unresolved findings and represent the next areas to address:

Rule	Description	Findings
sia-r65	Focus visible	64
sia-r66	Contrast (enhanced)	562
sia-r69	Contrast (minimum)	258
sia-r87	Heading structure	64
sia-r15	Interactive element label	44
sia-r41	Link purpose (link only)	12
sia-r81	Link purpose in context	4

- Add alt text to thumbnail images in news, general, and technical-posts listing pages - Fix contrast and layout issues in blog layout and post templates - Fix shared navbar dropdown role attribute and footer link target sizes - Add alt text to results chart image in nasa-open-access post - Add docker-based local dev config

…arkmode toggle

… sia-r2)

… sia-r53, sia-r77, sia-r68)

… sia-r77, sia-r68, sia-r2)

… sia-r53)

Copilot

Pull request overview

This PR targets WCAG 2.1 AA accessibility improvements across SciX blog pages by fixing missing/incorrect semantics (document titles, heading levels), providing image alternative text, and adjusting CSS for target size/contrast. It also introduces a Docker-based local dev workflow for the site.

Changes:

Add/normalize semantic structure (page titles, heading levels, lang, nav/main) across SciX blog layouts and many blog posts.
Add missing alt text to many blog images and adjust CSS to improve tap target sizing and contrast.
Add Docker + Docker Compose + ./run helper script and document the workflow in the README.

Reviewed changes

Copilot reviewed 59 out of 59 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
scixblog/index.md	Adds page title and alt text for post thumbnails in SciX “All Posts” listing.
scixblog/news/index.md	Adds page title and alt text for post thumbnails in SciX “News” listing.
scixblog/general/index.md	Adds page title and alt text for post thumbnails in SciX “General” listing.
scixblog/technical-posts/index.md	Adds page title and alt text for post thumbnails in SciX “Technical Posts” listing.
_layouts/blog_layout_scix.html	Adds `lang`, wraps blog links in `nav`, introduces `main` wrapper.
_layouts/blog_page_scix.html	Promotes page title heading to `h1`.
_layouts/blog_post_scix.html	Removes author/date from heading structure by switching to `<p>` elements.
_includes/header_default_scix.html	Tweaks header semantics (removes `role="menu"`, adds banner role).
_sass/_layout.scss	Target-size and typography tweaks; fixes invalid `line-height`; increases label contrast.
_sass/_darkmode.scss	Improves dark mode toggle sizing and legibility.
_includes/_blogcontent/2025-09-29-scix-launch.md	Adds image alt text; adjusts Press Coverage heading level.
_includes/_blogcontent/2025-08-25-scix-data-collections.md	Adds image alt text; normalizes heading levels.
_includes/_blogcontent/2025-07-01-scix-visualizations.md	Adds image alt text; normalizes heading levels.
_includes/_blogcontent/2025-03-25-what-i-wish-i-knew-about-ads-scix-during-my-phd.md	Adds image alt text.
_includes/_blogcontent/2025-02-27-scix-earth-science-literature-review.md	Adds image alt text.
_includes/_blogcontent/2025-02-27-scix-ambassador-workshop.md	Adds image alt text.
_includes/_blogcontent/2024-08-01-data-linking-III.md	Adds image alt text.
_includes/_blogcontent/2024-07-01-data-linking-II.md	Adds image alt text.
_includes/_blogcontent/2024-06-13-data-linking-I.md	Adds image alt text.
_includes/_blogcontent/2024-06-04-HistoricLit.md	Adds image alt text.
_includes/_blogcontent/2024-03-06-introducing-scix-ambassador-program.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2024-02-26-userfeedback-2024.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2024-01-03-aas-2024.md	Adds image alt text.
_includes/_blogcontent/2023-10-23-ads-models-and-datasets.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2023-04-19-scix.md	Adds image alt text.
_includes/_blogcontent/2023-03-20-curation-model.md	Adds image alt text.
_includes/_blogcontent/2022-12-29-uat-integration.md	Converts footnote list to a normal list for readability.
_includes/_blogcontent/2022-09-06-ads-object-search.md	Inlines/explains a footnote; adds image alt text.
_includes/_blogcontent/2021-11-12-arc-ssad-project.md	Normalizes heading levels.
_includes/_blogcontent/2021-08-04-openapi-docs.md	Adds image alt text.
_includes/_blogcontent/2021-04-15-affils-update.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2020-08-10-the_new_myADS.md	Adds image alt text.
_includes/_blogcontent/2020-05-29-ui-updates.md	Adds image alt text.
_includes/_blogcontent/2020-04-06-nasa-open-access.md	Adds image alt text.
_includes/_blogcontent/2020-01-15-affiliations-feature.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2019-05-30-ave-atque-vale.md	Adds image alt text.
_includes/_blogcontent/2019-04-11-transition-reminder.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2019-03-26-citations-journals-3.md	Adds image alt text.
_includes/_blogcontent/2019-02-13-updates2.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2018-10-22-citations-journals-2.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2018-08-20-citations-journals.md	Adds image alt text.
_includes/_blogcontent/2018-07-17-concepts-at-work.md	Adds image alt text.
_includes/_blogcontent/2018-05-24-transition.md	Normalizes heading levels.
_includes/_blogcontent/2018-04-11-updates.md	Normalizes heading levels.
_includes/_blogcontent/2018-02-05-asclepias.md	Adds image alt text; replaces markdown tables with semantic HTML tables.
_includes/_blogcontent/2017-12-12-adsug.md	Normalizes heading levels.
_includes/_blogcontent/2017-10-05-100M-citations.md	Adds image alt text.
_includes/_blogcontent/2016-03-16-open-access-and-nasa-data.md	Adds image alt text.
_includes/_blogcontent/2016-02-17-building-an-app.md	Normalizes heading levels; adds image alt text.
_includes/_blogcontent/2015-11-17-discovering-long-fuse-papers.md	Adds image alt text.
_includes/_blogcontent/2015-11-03-ads-private-libraries.md	Adds image alt text.
_includes/_blogcontent/2015-10-21-visualising-metrics-with-bbb.md	Adds image alt text.
_includes/_blogcontent/2015-07-15-introducing-bumblebee.md	Adds image alt text.
Dockerfile	Adds container image for building/serving the Jekyll site.
docker-compose.yml	Adds compose services for serve/dev/build workflows.
run	Adds convenience wrapper for Docker Compose workflows.
.dockerignore	Excludes build outputs and local/dev artifacts from Docker build context.
_config.yml	Excludes Docker/dev files and vendor directory from Jekyll build output.
README.md	Documents Docker-based development workflow.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-04T20:05:46Z

docker-compose.yml

+services:
+  jekyll:
+    build: .
+    volumes:
+      - .:/site
+      - bundle_cache:/usr/local/bundle
+    environment:
+      - JEKYLL_ENV=${JEKYLL_ENV:-development}
+


jekyll has no profiles entry, so it will be started by default even when running docker compose --profile serve/dev/build .... Because jekyll also has a default CMD that runs jekyll serve, this likely results in an extra, unintended container running alongside serve/dev/build. Consider replacing extends with YAML anchors (x- + <<:) for shared config, or put jekyll behind a never-enabled profile so it isn't started.

Copilot · 2026-03-04T20:05:47Z

scixblog/news/index.md

                <div class="col-md-2">
                    {% if post.thumbnail %}
-                        <img src="{{ site.baseurl }}/{{ post.thumbnail }}" style="width: 280px"/>
+                        <img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="{{ post.title }}" style="width: 280px"/>
                    {% else %}
-                        <img src="{{ site.baseurl }}/img/ads_logo.png" style="width: 280px"/>
+                        <img src="{{ site.baseurl }}/img/ads_logo.png" alt="{{ post.title }}" style="width: 280px"/>
                    {% endif %}
                </div>


The fallback image (/img/ads_logo.png) is always given alt="{{ post.title }}", but that alt text doesn't describe the logo and can mislead screen reader users. If this logo is decorative in the listing, prefer alt=""; otherwise use a truthful alt like "ADS logo"/"SciX logo".

alt="ADS/SciX logo"

Copilot · 2026-03-04T20:05:47Z

_sass/_layout.scss

+// Ensure standalone list links and ambassador profile links meet 44px minimum
+// target size (WCAG 2.5.5, sia-r111).
+.post-content li > a,
+.post-content blockquote p > a,
+.textlabel p > a {
+  display: inline-block;
+  min-height: 44px;
+  line-height: 44px;
+}


Setting line-height: 44px on inline links (e.g. .post-content li > a) can create overly tall lines and awkward spacing when links wrap to multiple lines, which can harm readability. To meet the 44px target-size requirement, prefer using padding (e.g., padding-block) with a min-height while keeping a normal text line-height.

Copilot · 2026-03-04T20:05:47Z

_includes/_blogcontent/2025-09-29-scix-launch.md

    <div class="press-coverage-header">
-      <h4><i class="fa fa-newspaper-o"></i>Press Coverage</h4>
+      <h3><i class="fa fa-newspaper-o"></i>Press Coverage</h3>
      <button class="close-button" onclick="event.stopPropagation(); togglePressCoverage();">&times;</button>


The heading was changed from h4 to h3, but the embedded CSS still targets .press-coverage-header h4, so the intended header styling will no longer apply. Update the selector to match the new heading level (or, better, target a class instead of a specific heading tag).

This sounds like a reasonable catch.

Copilot · 2026-03-04T20:05:47Z

run

+  cat <<EOF
+Usage: ./site <command>
+


The usage text says Usage: ./site <command> but the script name in this repo is run (and README instructs ./run ...). This will mislead users when they invoke the script incorrectly; update the usage string to match the actual entrypoint name (or rename the script to site to match the help text).

Copilot · 2026-03-04T20:05:48Z

scixblog/index.md

                {% if post.thumbnail %}
-                    <img src="{{ site.baseurl }}/{{ post.thumbnail }}" style="max-width: 340px;height:auto"/>
+                    <img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="{{ post.title }}" style="max-width: 340px;height:auto"/>
                {% else %}
-                    <img src="{{ site.baseurl }}/img/ads_logo.png" style="max-width: 340px;height:auto"/>
+                    <img src="{{ site.baseurl }}/img/ads_logo.png" alt="{{ post.title }}" style="max-width: 340px;height:auto"/>
                {% endif %}


The fallback image (/img/ads_logo.png) is always given alt="{{ post.title }}", but that alt text doesn't describe the logo and can mislead screen reader users. If this logo is decorative in the listing, prefer alt=""; otherwise use a truthful alt like "ADS logo"/"SciX logo" (and consider linking the image to the post to avoid duplicate title announcements).

It looks like we can go with alt="ADS/SciX logo" here

Copilot · 2026-03-04T20:05:48Z

scixblog/general/index.md

                <div class="col-md-2">
                    {% if post.thumbnail %}
-                        <img src="{{ site.baseurl }}/{{ post.thumbnail }}" style="width: 280px"/>
+                        <img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="{{ post.title }}" style="width: 280px"/>
                    {% else %}
-                        <img src="{{ site.baseurl }}/img/ads_logo.png" style="width: 280px"/>
+                        <img src="{{ site.baseurl }}/img/ads_logo.png" alt="{{ post.title }}" style="width: 280px"/>
                    {% endif %}
                </div>


The fallback image (/img/ads_logo.png) is always given alt="{{ post.title }}", but that alt text doesn't describe the logo and can mislead screen reader users. If this logo is decorative in the listing, prefer alt=""; otherwise use a truthful alt like "ADS logo"/"SciX logo".

alt="ADS/SciX logo"

Copilot · 2026-03-04T20:05:49Z

scixblog/technical-posts/index.md

                <div class="col-md-2">
                    {% if post.thumbnail %}
-                        <img src="{{ site.baseurl }}/{{ post.thumbnail }}" style="width: 280px"/>
+                        <img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="{{ post.title }}" style="width: 280px"/>
                    {% else %}
-                        <img src="{{ site.baseurl }}/img/ads_logo.png" style="width: 280px"/>
+                        <img src="{{ site.baseurl }}/img/ads_logo.png" alt="{{ post.title }}" style="width: 280px"/>
                    {% endif %}
                </div>


The fallback image (/img/ads_logo.png) is always given alt="{{ post.title }}", but that alt text doesn't describe the logo and can mislead screen reader users. If this logo is decorative in the listing, prefer alt=""; otherwise use a truthful alt like "ADS logo"/"SciX logo".

alt="ADS/SciX logo"

Copilot · 2026-03-04T20:05:49Z

scixblog/index.md

+title: "All Posts"
 ---

 [Sign up](http://eepurl.com/ggoxhn) for our monthly email updates.


The link to the newsletter signup uses http:// instead of https://, which allows a network attacker to tamper with the signup form or redirect users to a phishing page before they enter their email address. Because this is an email subscription endpoint, compromising it could expose users’ email addresses or trick them into submitting credentials elsewhere. Update the link target to use https://eepurl.com/ggoxhn so the initial request and returned form are protected by TLS.

Copilot · 2026-03-04T20:05:49Z

_includes/_blogcontent/2019-02-13-updates2.md

@@ -1,48 +1,48 @@

 We’ve rolled out a number of changes to the new ADS over the summer and fall, some of which you’ve likely noticed and others which may have passed you by. Read on for a summary of some of the bigger updates. If you want to stay up to date on changes with ADS, [sign up](http://eepurl.com/ggoxhn) for our monthly newsletter or check in occasionally with our [What’s New page](../help/whats_new/).


This newsletter signup link uses http:// instead of https://, which allows a man-in-the-middle attacker to intercept or modify the subscription page and harvest email addresses or inject a phishing form. Because users are encouraged here to subscribe for ongoing updates, the link should not rely on plaintext HTTP. Change the target to https://eepurl.com/ggoxhn so the signup flow is protected end-to-end by TLS.

shinyichen · 2026-03-04T21:30:37Z

_includes/_blogcontent/2025-09-29-scix-launch.md

    <div class="press-coverage-header">
-      <h4><i class="fa fa-newspaper-o"></i>Press Coverage</h4>
+      <h3><i class="fa fa-newspaper-o"></i>Press Coverage</h3>
      <button class="close-button" onclick="event.stopPropagation(); togglePressCoverage();">&times;</button>


This sounds like a reasonable catch.

- Fix fallback logo alt text to "ADS/SciX logo" on all listing pages - Convert darkSwitch div to button with aria-label; sync aria-label on toggle - Replace line-height: 44px with padding-block on list links - Update .press-coverage-header CSS selector from h4 to h3 - Remove redundant role="banner" from semantic <header> - Update newsletter signup links from http to https

thostetler added 6 commits March 4, 2026 12:55

fix: improve shared a11y - label contrast, footer/nav target sizes, d…

74ea340

…arkmode toggle

fix: relative font sizes and alt text on blog listing pages (sia-r74,…

99ed0fd

… sia-r2)

fix: add alt text to blog post images and fix heading levels (sia-r2,…

1cb24e5

… sia-r53, sia-r77, sia-r68)

fix: increase list link target sizes and fix table headers (sia-r111,…

d19437f

… sia-r77, sia-r68, sia-r2)

fix: add alt text and fix heading levels on newer blog posts (sia-r2,…

655498f

… sia-r53)

thostetler requested review from Copilot and shinyichen March 4, 2026 19:58

thostetler marked this pull request as ready for review March 4, 2026 19:58

Copilot started reviewing on behalf of thostetler March 4, 2026 19:59 View session

Copilot AI reviewed Mar 4, 2026

View reviewed changes

shinyichen approved these changes Mar 4, 2026

View reviewed changes

thostetler mentioned this pull request Mar 5, 2026

fix: WCAG AA accessibility pass — landmarks, nav, alt text, headings, accordion #625

Open

		@@ -1,48 +1,48 @@

		We’ve rolled out a number of changes to the new ADS over the summer and fall, some of which you’ve likely noticed and others which may have passed you by. Read on for a summary of some of the bigger updates. If you want to stay up to date on changes with ADS, [sign up](http://eepurl.com/ggoxhn) for our monthly newsletter or check in occasionally with our [What’s New page](../help/whats_new/).

Conversation

thostetler commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Results by Rule

Remaining Issues

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

jrkoch127 Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

shinyichen Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

jrkoch127 Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

jrkoch127 Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

jrkoch127 Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

shinyichen Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

thostetler commented Mar 4, 2026 •

edited

Loading

jrkoch127 Mar 5, 2026 •

edited

Loading

jrkoch127 Mar 5, 2026 •

edited

Loading