Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make announcement banner into a landmark (aside/complementary) #1793

Merged
merged 3 commits into from
May 7, 2024

Conversation

gabalafou
Copy link
Collaborator

@gabalafou gabalafou commented Apr 29, 2024

One of many fixes for #1428.

Axe-core wants: all page content should be contained by landmarks.

The announcement banner was not a landmark, nor contained by one, so this PR:

  • changes the announcement from a div to an aside, making it into a "complementary" landmark
  • adds the translatable string "Announcement" and sets it as the accessible label for the aside

This follows the implementation of the Black Lives Matter banner on a11yproject.com (i.e, an aside + aria-label).

I thought about putting both banners (version warning + announcement) together into a single landmark, but my thinking is that for sighted users, both banners are visually distinguishable and draw attention to themselves on every page, so I think making them both into separate landmarks achieves the same level of emphasis for both sighted and non-sighted users. It's also the simpler, more straightforward implementation.

After this PR, the landmarks read:

  • Version warning complementary
  • Announcement complementary
  • banner
  • navigation
  • Section Navigation navigation
  • main
  • Breadcrumb navigation
  • article
  • footer

Note: we need to fix the section navigation landmark since it repeats the word navigation twice.

…bel extract command:

pybabel extract . -F babel.cfg -o src/pydata_sphinx_theme/locale/sphinx.pot -k '_ __ l_ lazy_gettext'
pybabel update -i src/pydata_sphinx_theme/locale/sphinx.pot -d src/pydata_sphinx_theme/locale -D sphinx
@trallard trallard added tag: accessibility Issues related to accessibility issues or efforts tag: component Issues or improvements associated with a given component in the theme labels May 7, 2024
@trallard
Copy link
Collaborator

trallard commented May 7, 2024

Thanks @gabalafou, this looks good!

Note: we need to fix the section navigation landmark since it repeats the word navigation twice.
Assume this will be done in a separate PR?

@trallard trallard merged commit 779c3e0 into pydata:main May 7, 2024
16 of 17 checks passed
@gabalafou gabalafou deleted the landmark-header-announcement branch May 8, 2024 11:07
ivanov pushed a commit to ivanov/pydata-sphinx-theme that referenced this pull request Jun 5, 2024
…a#1793)

* Make announcement banner into a landmark (aside/complementary)

* Generate/update the message catalog template (POT file) with the PyBabel extract command:

pybabel extract . -F babel.cfg -o src/pydata_sphinx_theme/locale/sphinx.pot -k '_ __ l_ lazy_gettext'

* Update the message catalogs (PO files) with the PyBabel update command:

pybabel update -i src/pydata_sphinx_theme/locale/sphinx.pot -d src/pydata_sphinx_theme/locale -D sphinx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tag: accessibility Issues related to accessibility issues or efforts tag: component Issues or improvements associated with a given component in the theme
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants