Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Feature request - ARIA labels and non-empty contents for links + buttons #2403

Open
Labels
enhancementNew feature or request
@iSpeakNerd

Description

Checklist

Is your feature request related to a problem? Please describe

Chirpy theme has some WCAG errors related to (1) empty buttons and (2) empty links.

  1. I did some looking and while the topbar.html file has aria-label="Search" for the search-trigger button, the button loses that attribute at some point and the ARIA label is not there after rendering in the browser. All three of the following buttons are empty of text and aria labels.
    a. search-trigger
    b. sidebar-trigger
    c. back-to-top

Note

EDIT
I now see that some of the buttons in question are wrapped inside <aside aria-label=""></aside> elements. oops. Well, they're still empty at least

Describe the solution you'd like

Buttons - aria-labelledby="${correctButton.id}" would cover the unlabeled and then use &ZeroWidthSpace; as button text adjacent to the existing icon elements

Anchor links - we can programmatically insert aria-label="Direct link to {{header.innerText}}" and use &ZeroWidthSpace; to fill the anchor link innerText so it will render for screen readers.

Describe alternatives you've considered

No response

Additional context

Image of Chirpy page with WAVE extension running showing errors

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /