Describe the new a11y feature or project enhancement

I see this quite often in code bases, where devs will attach an onclick to some div or span and call it a day. This breaks keyboard navigation. Worse...sometimes there are onclick handlers that will just navigate the user to another page. This specifically fails Success Criterion 1.3.1 and 2.1.1.

Describe the solution you'd like

I quickly mocked this up in codepen: https://codepen.io/tricinel/pen/VwjZEPK.

I'm not sure if we should be that aggressive and ban all elements except buttons and anchor tags.

Link(s)

https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F42

Migrates all @import at-rules to @use in preparation for dart-sass deprecating @import at-rules.

Note: There are still 4 @import at-rules left in two files (README.md and test/index.css) in the project. But we can discuss converting these or leaving them during review. We started out at 41 @import results in 5 files and took it down to 4 results in 2 files which is exciting!

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

Resolves #123

Replaces all existing @import at-rules with @use because @import will eventually be deprecated in dart-sass in the coming years.

Link(s)

Screenshot(s)

Checklist:

• [x] I have thoroughly read the CONTRIBUTING guidelines.
• [x] I understand my pull request will be thoroughly reviewed at high detail.
• [x] I understand the work in my pull request will only be available in the next version release of Checka11y.css and not in the current version release.
• [x] I confirm the work in this pull request is valid according to my findings and is not something for anything personal.
• [x] I have updated the README and/or features.md where and if applicable (still put an x if you have considered this but thought there was nothing to add or modify).
• [x] I have added myself to the contributors section in package.json (still put an x if you have considered this but decided not to add yourself).
• [x] I have checked I have not committed any accidental files.
• [x] I have tested all the main modern browsers (I.e. Chrome, Firefox, Edge, Safari - please leave this unchecked if there were any browsers listed you could not test and list them in the help section with details why you couldn't test that browser)
• [x] I have run the automated tests and added new ones to cover new code.
• [x] All new and existing a11y checks still work correctly (compare your local test/index.html to the test/index.html in the master branch).

Describe the new a11y feature or project enhancement

The Cypress tests can take up to 2 minutes to run, which uses up minutes and storage in the GitHub workflow. The tests are extremely simple, so can we find a way to make the tests a lot quicker? I.e. Could we change to Jest?

Describe the solution you'd like

Tests to runner quicker. Anything is an improvement.

Link(s)

• https://github.com/jackdomleo7/Checka11y.css/actions/workflows/Tests.yml

Headings should be in the correct order See here for more information.

Skipping heading ranks can be confusing and should be avoided where possible

For example, this is correct:

<h1>This is a heading</h1>
<h2>This is a subheading</h2>

This is incorrect because it goes from h1 straight to h3 (skipping h2):

<h1>This is a heading</h1>
<h3>This is an h3 heading</h3>

Not completely sure how this can be done with CSS. I have tried this

h1+h3,
h1+h4 {
    border: var(--checka11y-error-border-width, 5px) solid var(--checka11y-error-color, red) !important;
}

which checks if an h1 heading is followed by an h3 or h4 header. However, this doesn't take into account elements in between the headers. Any ideas welcome.

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

1. Added check whether the "for" attribute is provided a non-empty value in a <label>.
2. Added check whether the "for" attribute is provided a non-empty value in a <input>.

Resolves: #7

Screenshot(s)

Checklist:

• [x] I have thoroughly read the CONTRIBUTING guidelines.
• [x] I understand my pull request will be thoroughly reviewed at high detail.
• [x] I understand the work in my pull request will only be available in the next version release of Checka11y.css and not in the current version release.
• [x] I confirm the work in this pull request is valid according to my findings and is not something for anything personal.
• [ ] I have updated the README where and if applicable (still put an x if you have considered this but thought there was nothing to add or modify).
• [x] I have added myself to the contributors section in package.json (still put an x if you have considered this but decided not to add yourself).
• [x] I have checked I have not committed any accidental files.
• [ ] I have tested all the main modern browsers (I.e. Chrome, Firefox, Edge, Safari - please leave this unchecked if there were any browsers listed you could not test and list them in the help section with details why you couldn't test that browser)
• [ ] All new and existing a11y checks still work correctly (compare your local test/index.html to the test/index.html in the master branch).

Help

I could not test in Safari because I do not have access to an Apple device.

Describe the new a11y feature or project enhancement

Images should nave a descriptive alternative text. Images in which the alternative text is "image" or "graphic" or a " " (blank space), are not providing enough information for assistive technologies.

Describe the solution you'd like

This one is tricky because it can be really language-dependant. The same word that works in English (image) may work in French (image) but not in Spanish (imagen) or German (bild). Also, images don't have ::before and ::after pseudo-elements to display the error.

The language barrier is difficult to skip, the solution could include some common words in different languages that would trigger the rule, but having all of them may be complex. Some of them (e.g., a blank space). As for the highlight, the project could include an inline image in SVG or base64 with a message through the content property.

Then the selector/rule could be something like this:

image[alt=" "],
image[alt="image"i],
image[alt="graphic"i],
image[alt="photo"i],
image[alt="picture"i],
... {
  border: 4px solid red;
  content: url(path-to-error-image)
}

Link(s)

• Codepen with demo of the code working
• WebAIM: Alternative text

Describe the new a11y feature or project enhancement

Buttons and links should contain something that indicates what they are or what they are going to go. Having an empty link, or a button that is only an image, or an empty input button without a value can be confusing and doesn't provide enough information for screen reader users.

From WCAG 2.1 Success Criterion 2.4.4 Link Purpose (In Context): "The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context [...]."

Describe the solution you'd like

Verify that buttons and links follow some basic patterns:

• They are not empty (e.g. using the :empty pseudo-class)
• They don't contain just an image tag (e.g. using the :only-child pseudo-class)

Link(s)

• WCAG 2.1: Success Criterion 2.4.4 Link Purpose (In Context)
• WebAIM: Links and hypertext

Describe the new a11y feature or project enhancement

This is not an a11y mistake by itself, but it is something that I've seen in most accessibility checkers: showing a warning when there's a link to a Word, Excel, PowerPoint, or PDF document. Also, when there's a link to Youtube (because captioning is often missing or not well generated).

Those documents often have accessibility issues and need to be created with accessibility in mind. Also, they may be loaded on the browser, but they require plugins/extensions that can create navigation difficulties.

Describe the solution you'd like

Show a warning about potential accessibility issues when:

• A link to a PDF, Word, Excel, or PowerPoint document is present on the page.
• A link to Youtube is present on the document.

This can be done in CSS by checking the end of the URL looking for certain extensions (".pdf", ".doc", ".docx", ".xls", etc.), or the beginning of the URL looking for Youtube addresses ("https://youtu.be", "https://youtube.com", etc.)

Link(s)

• WebAIM Wave Guidelines (will link to Google Docs) <-- this list may be interesting to add more CSS-only features to Checka11y.css.

Add an error message if the heading levels are not in the right order. This solution combines the methods described in #13 to resolve that issue.

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

Applied the selector described in the ticket, but soon found other cases in which it was insufficient, so I had to extend it (a lot). Also, included Una Kravets solution (linked in the ticket). Resolves #13.

Link(s)

Screenshot(s)

Checklist:

• [x] I have thoroughly read the CONTRIBUTING guidelines.
• [x] I understand my pull request will be thoroughly reviewed at high detail.
• [x] I understand the work in my pull request will only be available in the next version release of Checka11y.css and not in the current version release.
• [x] I confirm the work in this pull request is valid according to my findings and is not something for anything personal.
• [x] I have updated the README and/or features.md where and if applicable (still put an x if you have considered this but thought there was nothing to add or modify).
• [x] I have added myself to the contributors section in package.json (still put an x if you have considered this but decided not to add yourself).
• [x] I have checked I have not committed any accidental files.
• [x] I have tested all the main modern browsers (I.e. Chrome, Firefox, Edge, Safari - please leave this unchecked if there were any browsers listed you could not test and list them in the help section with details why you couldn't test that browser)
• [x] I have run the automated tests and added new ones to cover new code.
• [x] All new and existing a11y checks still work correctly (compare your local test/index.html to the test/index.html in the master branch).

Help

Didn't test on IE.

• Add Cypress dependency
• Generate automatic Cypress files
• Add initial tests for accesskey, autoplay, button, and html
• Update README with test information
• Update .gitignore to remove Cypress videos

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR adds Cypress as a testing tool (as a devDependency). It also adds a few common functions and tests for 4 of the tests (accesskey, autoplay, button, and html).

Resolves: #66

How to test these changes:

1. Install the new dependencies: npm i
2. Build the library: npm run build
3. Run the tests:
   • To open the tests in a browser: npm run cypress:open
   • To run the tests from the command line: npm run cypress:run

Link(s)

• Cypress website
• Cypress documentation

Screenshot(s)

Result of running npm run cypress:run (headless):

Result of running npm run cypress:open:

Checklist:

• [x] I have thoroughly read the CONTRIBUTING guidelines.
• [x] I understand my pull request will be thoroughly reviewed at high detail.
• [x] I understand the work in my pull request will only be available in the next version release of Checka11y.css and not in the current version release.
• [x] I confirm the work in this pull request is valid according to my findings and is not something for anything personal.
• [x] I have updated the README and/or features.md where and if applicable (still put an x if you have considered this but thought there was nothing to add or modify).
• [x] I have added myself to the contributors section in package.json (still put an x if you have considered this but decided not to add yourself).
• [x] I have checked I have not committed any accidental files.
• [x] I have tested all the main modern browsers (I.e. Chrome, Firefox, Edge, Safari - please leave this unchecked if there were any browsers listed you could not test and list them in the help section with details why you couldn't test that browser)
• [x] All new and existing a11y checks still work correctly (compare your local test/index.html to the test/index.html in the master branch).

Help

No a11y check changes, so didn't test those. It would be good to check how the tests are structured.

It may be better to separate the tests in their own spec instead of all in a file. That way we could avoid merge conflicts too.

Suggestions?

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

Branched from #26 and requesting merge back into #26.

checka11y.css and checka11y.min.css are autogenerated.

Implemented SCSS to allow for easier maintaining:

• Installed stylelint-scss for SCSS linting
• Separated each feature into it's own sub file
• Udated README & CONTRIBUTING
• Moved projects logos into their own logo directory
• Created minified version of the stylesheet
• Added npm scripts
• Installed postcss-cli, autoprefixer and cssnano

Link(s)

• https://www.npmjs.com/package/stylelint-scss
• https://github.com/browserslist/browserslist

Screenshot(s)

Checklist:

• [x] I have thoroughly read the CONTRIBUTING guidelines.
• [x] I understand my pull request will be thoroughly reviewed at high detail.
• [x] I understand the work in my pull request will only be available in the next version release of Checka11y.css and not in the current version release.
• [x] I confirm the work in this pull request is valid according to my findings and is not something for anything personal.
• [x] I have updated the README where and if applicable (still put an x if you have considered this but thought there was nothing to add or modify).
• [x] I have added myself to the contributors section in package.json (still put an x if you have considered this but decided not to add yourself).
• [x] I have checked I have not committed any accidental files.
• [x] I have tested all the main modern browsers (I.e. Chrome, Firefox, Edge, Safari - please leave this unchecked if there were any browsers listed you could not test and list them in the help section with details why you couldn't test that browser)
• [x] All new and existing a11y checks still work correctly (compare your local test/index.html to the test/index.html in the master branch).

Help

Couldn't install v10.x.x of Autoprefixer because it's not compatible with v8 of PostCSS, so had to downgrade to v9.8.6 of Autoprefixer, until they release a fix.

Bumps minimatch from 3.0.4 to 3.1.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Documentation Issue or Feature

Describe the documentation issue or feature request

Currently, the documentation website source code is sitting in the gh-pages branch. I want to change this so it sits in a docs/ directory in the master branch, then automatically deploy to the gh-pages branch. I also want to utilise Nuxt 3 rather than raw HTML, CSS & JS.

Acceptance criteria

• [ ] Use Nuxt 3
• [ ] Move docs into master branch
• [ ] Script to deploy to the gh-pages branch
• [ ] Automatically deploy to gh-pages on every master build

Why is this important?

This is important because it keeps the code clean and in one place. It also allows other developers to easily contribute to the documentation website.

Details

The below comment should only appear in the checka11y.css file once, but it appears 3 times. (NOTE: Version may be different to the time this was raised)

/*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */

Screenshot(s)

N/A

What is Expected?

Important comment to only appear once in checka11y.css.

What is actually happening?

Important comment is appearing 3 times in checka11y.css.

Describe the new a11y feature or project enhancement

It would be nice to indicate if the value set on the lang attribute on the <HTML> is set to a know language string as defined here by w3. Although this is a very long piece of work and may prove to be better suited in a JS accessibility tool.

Link(s)

• https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
• https://www.w3.org/International/articles/language-tags/#rfc
• https://r12a.github.io/app-subtags

Proposal:

Inputs missing labels (often when Placeholders are being used as labels) might have unclear intentions.

Issue:

<input type="text" placeholder="Email" />

The placeholder in the above example is rarely read by screenreaders

Issue 2:

<label>Email</label>
<input type="text" />

The label in the above example exists, but is not associated with an element so will often be misinterpreted.

Solution:

<label for="email">Email Address</label>
<input name="email" type="text" />

The above is the best-accepted solution, which most screen readers understand (unlike <label><input></label>).

We should check 2 things

• [ ] Does a label have a for attribute present and populated
• [ ] Does an input have a name attribute present and populated

This won't account for if any inputs/labels have attributes present but their counterparts don't exist, however.