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.

Sign up for GitHub

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

Jump to bottom

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

Open
Faith-K-commits opened this issue Oct 8, 2024 · 4 comments
Open

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

Faith-K-commits opened this issue Oct 8, 2024 · 4 comments
Labels
💻 aspect: code Concerns the software code in the repository 🛠 goal: fix Bug fix 🟩 priority: low Low priority and doesn't need to be rushed 🧹 status: ticket work required Needs more details before it can be worked on

Comments

@Faith-K-commits
Copy link
Contributor

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

  • The button element should have an aria-label for better accessibility.
  • The nav elements should have aria-label attributes to describe their purpose.
  • The href attributes in the navigation links should be complete.
  • The meta charset tag should be present in the <head> section.

Screenshots

button-nav-issues
meta-issue

Environment

  • Device: (eg. iPhone Xs; laptop)
  • OS: (eg. iOS 13.5; Fedora 32)
  • Browser: (eg. Safari; Firefox)
  • Version: (eg. 13; 73)
  • Other info: (eg. display resolution, ease-of-access settings)

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

  • [x ] I would be interested in resolving this bug.
@Faith-K-commits Faith-K-commits added 💻 aspect: code Concerns the software code in the repository 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 🛠 goal: fix Bug fix 🟧 priority: high Stalls work on the project or its dependents labels Oct 8, 2024
@possumbilities
Copy link
Contributor

possumbilities commented Oct 8, 2024 •
edited
Loading

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 possumbilities closed this as not planned Won't fix, can't repro, duplicate, stale Oct 8, 2024
@possumbilities possumbilities added ⛔️ status: discarded Will not be worked on 🟩 priority: low Low priority and doesn't need to be rushed 🧹 status: ticket work required Needs more details before it can be worked on and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 🟧 priority: high Stalls work on the project or its dependents ⛔️ status: discarded Will not be worked on labels Oct 8, 2024
@possumbilities
Copy link
Contributor

I'm reopening this and moving it to 🧹 status: ticket work required Needs more details before it can be worked on

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.

@possumbilities possumbilities reopened this Oct 8, 2024
@Faith-K-commits
Copy link
Contributor Author

Okay, will create the other issues.

@Faith-K-commits
Copy link
Contributor Author

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

@Faith-K-commits Faith-K-commits mentioned this issue Oct 16, 2024
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
💻 aspect: code Concerns the software code in the repository 🛠 goal: fix Bug fix 🟩 priority: low Low priority and doesn't need to be rushed 🧹 status: ticket work required Needs more details before it can be worked on
Projects
WebDev
Status: Backlog
Milestone
No milestone
Development

No branches or pull requests
2 participants
@possumbilities @Faith-K-commits