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

feat: Adding Web Accessibility section #8

Merged
merged 7 commits into from
Jun 26, 2024

Conversation

adigidh
Copy link
Contributor

@adigidh adigidh commented Apr 23, 2024

Created first draft for web accessibility section that will be iterated upon review and feedback from other members.

@bennypowers
Copy link

cc @adamjohnson you might be interested in contributing here

Copy link

@adamjohnson adamjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a few minor notes. Overall, great work!

Recommendations of manual accessibility testing tools:

- [Wave](https://wave.webaim.org/)
- [BrowserStack](https://www.browserstack.com/accessibility-testing)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another good tool that you might add here is the HeadingsMap extension.

It allows users to quickly see an outline of the page's heading levels and HTML5 tags. If someone skipped a heading level (eg: went from h2 to h4), this tool helps identify it.


## High Level overview on ways to make your site/ application more accessible

- Images and alt attributes

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of these being a list (<ul>), they should be heading 3's for this document:

### Images and alt attributes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good call!

Accessible hypertext links are very important aspects for accessible web pages and documents.
Accessible links are not just helpful for people with disabilities, well-written link text descriptions enhances user experience for any user. Following are some high level guidelines that should be followed:

1. Ensure concise, descriptive and meaningful anchor text

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You may consider specifically adding

Avoid using "click here", "read more" or "learn more" as link text.


- Add Keyboard navigation

Create an accessible experience for keyboard users by making sure disabled users can access all interactive elements of your site/ app.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid attaching event listeners to non-interactive elements like <div> whenever possible. Use interactive elements like <button> and <a> instead.

IBM's Developer [guidelines and checklist](https://www.ibm.com/able/guidelines/index.html).

- [Tools List by W3C](https://www.w3.org/WAI/test-evaluate/tools/list/)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The blank lines in between list items here and above are likely to create multiple unordered lists with one list item each. Remove the blank lines to keep it to one list.

@adigidh
Copy link
Contributor Author

adigidh commented May 6, 2024

thank you for taking a look @adamjohnson. Appreciate the inputs, updated the PR with the review comments.


- Links and context
- Add Keyboard navigation
- ARIA Landmarks and HTML Semantics
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the topic of HTML semantics, it might be good to reference the HTML5 Element Flowchart Or otherwise call out that there's 100+ semantic elements.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated the section to call out and link 100+ semantic elements 👍

@lholmquist lholmquist merged commit a130c46 into nodeshift:main Jun 26, 2024
1 check passed
@adigidh adigidh deleted the add-web-accessibility branch June 26, 2024 19:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants