search

creativecommons / vocabulary

A cohesive system of design for Creative Commons
https://vocabulary-docs.netlify.app
Creative Commons Zero v1.0 Universal
7 stars 59 forks source link

[Bug] Improve Accessibility and Structure in blog-index.html #149

Open Faith-K-commits opened 2 weeks ago

Faith-K-commits commented 2 weeks ago

Description

The [blog-index.html] file has several issues related to accessibility and HTML structure that need to be addressed to improve the overall quality and user experience of the page.

Reproduction

  1. Open the [blog-index.html] file.
  2. Inspect the button element with class expand-menu.
  3. Inspect the nav elements and their href attributes.
  4. Check for the presence of the meta charset tag in the <head> section.
  5. See the issues.

Expectation

Screenshots

button-nav-issues meta-issue

Environment

Additional context

Issues:

  1. Accessibility Issues:

    • The button element with class expand-menu lacks an aria-label or descriptive text for screen readers.
    • The nav elements lack aria-label attributes to describe their purpose.

  2. Incomplete Navigation Links:

    • The href attributes in the primary-menu navigation links are empty.

  3. HTML Structure:

    • The meta tag for charset is missing, which should be included for proper character encoding.

Resolution

possumbilities commented 1 week ago

Hi! and thank you for this contribution!

I don't believe any of these items are specific to the blog-index.html page. I would encourage people to be sure that if the work is bound to a specific context, like the blog-index.html that the issue in question is only occurring on that context, and not others. We don't want to resolve or document Issues piecemeal if we can help it. If instead the work spans contexts and is the same across them, that's also helpful to document generally so the work can happen together and not split across piecemeal PRs.

I'm not certain the button and nav elements need aria-labels fully. aria-labels are usually fallbacks for missing semantics, attributes, descriptive content, etc. Other times they are necessary, it largely depends. If there are improvements we can make that resolve this before adding aria-labels that is the preference. Given the buttons contain text, they already have appropriate descriptive text and shoudn't need aria-labels. The nav elements could make user of aria-label="NAME HERE", provided there isn't a better use-case for an existing heading element that could be attached via aria-labelledby

The instances where the href elements are set to # is intentional. This is a framework and these are example URLs, not real ones. They are at best placeholders and that is why they use this method. If there are spots where they are completely empty then they need to be set to # as proper placeholders.

Overall, this means this Issue is actually 3, possibly 4 different Issues:

  1. [Bug] missing <meta charset="utf-8"> in head of all contexts
  2. [Functionality] nav elements Accessibility can be improved through use of aria-labelled-by or aria-label, depending on markup present
  3. [BUG] Placeholder links across (list the contexts affected) are missing the default # placeholder value.
  4. *1

~I'm closing this since this Issue is not narrow or focused~, but would encourage you or anyone reading this to create these three Issues listed above separately, with adequate documentation to support them, and submit them as new Issues.

*1 There is also a possibility there is a 4th Issue here worth documenting around whether the expand-menu, would merit aria-label improvements. This button contains the text Explore CC which describes it, but there might be adjustments that could be made here to improve its implementation. If there's evidence to support that I would also encourage a fourth Issue being created here.

possumbilities commented 1 week ago

I'm reopening this and moving it to https://github.com/creativecommons/vocabulary/labels/%F0%9F%A7%B9%20status%3A%20ticket%20work%20required

When the contents of this Issue have migrated into other stable and more narrow Issues it can be closed, until then I think it's useful for others to have more direct visibility of it, and I think that label best describes where its at.

Faith-K-commits commented 1 week ago

Okay, will create the other issues.

Faith-K-commits commented 1 week ago

I have created another issue in regards to the meta tags.