Code in comment blocks still triggers errors
ex.
<!-- <img src="placeholder.png" class="thumbnail"> -->
still shows

Provide an alt text that describes the image, or alt="" if image is purely decorative

Describe the bug
In Angular we use attribute binding, but the plugin doesn't support it.

To Reproduce
Steps to reproduce the behavior:

1. Create a simple angular project
2. Write this to template: <img [src]="folder.Icon" [alt]="folder.Label"> or this: <img [src]="folder.Icon" [attr.alt]="folder.Label">
3. See error: Provide an alt text that describes the image, or alt="" if image is purely decorative

Expected behavior
I expect to accept and handle both of these definitions as a correct solutions, because these are Angular specific goog practices.

Visual Studio Code (please complete the following information):

• Version 1.55.2

Additional context
This expected behavior expected with any attributes.

Is your feature request related to a problem? Please describe.
We are using single quotes in our ejs template to work around it breaking when we serialize it into JSON. The Web Accessibility extension still complains about for example the alt text missing though it's there, it's just using single quotes.

Describe the solution you'd like
Support single quotes or allow it to be toggled in options.

Is your feature request related to a problem? Please describe.
When I'm developing in portuguese, I need a way to config "nonDescriptiveAlts" and "badAltStarts" to the native language.

Describe the solution you'd like
An option to change the language.

Describe alternatives you've considered
Maybe a file with the translations
ex:

badAltStarts {
 'pt-br': [
   'alt="imagem de',
   'alt="foto de'
   ]
 'en-us': [
   'alt="image of',
   'alt="picture of'
   ]
}

Describe the bug
Don't show alerts on multiple line tag definitions.

To Reproduce
If I use multiple lines for HTML tags, like below, the plugin don't show any alerts, warnings, or errors:

<input
  type="password"
  maxlength="3"
/>

I know this is not a standard of code usage, but it is acceptable if we want.

If I change to this format, the plugin works as I expect:

<input type="password" maxlength="3">

Expected behavior
I expect alerts on multiline tags too, because of max-line-length rule of linters I use multiline tags in many cases.

Visual Studio Code (please complete the following information):

• VSCode version: 1.55.1
• Plugin version: 0.2.83

hey, thanks for the great tool,

but do you plan to follow a specific accessibility standard? e.g. WCAG?, 508 etc?

Open a directory:

Error: Cannot find module './patterns'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:602:15)
    at Function.Module._load (internal/modules/cjs/loader.js:528:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/home/pdxweb/.vscode-insiders/extensions/maxvanderschee.web-accessibility-0.2.4/server/out/server.js:15:17)
    at Object.<anonymous> (/home/pdxweb/.vscode-insiders/extensions/maxvanderschee.web-accessibility-0.2.4/server/out/server.js:205:3)
    at Module._compile (internal/modules/cjs/loader.js:711:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:722:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
[Info  - 11:52:50 PM] Connection to server got closed. Server will restart.
internal/modules/cjs/loader.js:604
    throw err;
    ^

Error: Cannot find module './patterns'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:602:15)
    at Function.Module._load (internal/modules/cjs/loader.js:528:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/home/pdxweb/.vscode-insiders/extensions/maxvanderschee.web-accessibility-0.2.4/server/out/server.js:15:17)
    at Object.<anonymous> (/home/pdxweb/.vscode-insiders/extensions/maxvanderschee.web-accessibility-0.2.4/server/out/server.js:205:3)
    at Module._compile (internal/modules/cjs/loader.js:711:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:722:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
[Info  - 11:52:50 PM] Connection to server got closed. Server will restart.
internal/modules/cjs/loader.js:604
    throw err;
    ^

Error: Cannot find module './patterns'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:602:15)
    at Function.Module._load (internal/modules/cjs/loader.js:528:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/home/pdxweb/.vscode-insiders/extensions/maxvanderschee.web-accessibility-0.2.4/server/out/server.js:15:17)
    at Object.<anonymous> (/home/pdxweb/.vscode-insiders/extensions/maxvanderschee.web-accessibility-0.2.4/server/out/server.js:205:3)
    at Module._compile (internal/modules/cjs/loader.js:711:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:722:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
[Error - 11:52:50 PM] Connection to server got closed. Server will not be restarted.

** VS Code version - 1.33.0-insider **

Is your feature request related to a problem? Please describe.
I can't use npm to run the lint

Describe the solution you'd like
A second program that used the logic of this as an eslint plugin

Describe alternatives you've considered
None of the other HTML lints have the a11y linters yours has

Is your feature request related to a problem? Please describe.
For now, there is no other A11y checker on PUG

Describe the solution you'd like
Support PUG

1. Highlight elements that you should consider changing.
2. Give a hint on how you should change it.

Describe alternatives you've considered
No

Additional context
No. Thanks.

When you have a <button>, prevent role="button"

Is your feature request related to a problem? Please describe.
It's sometimes better to use divs for wrapper elements that are necessary to implement complex layouts, not every div or span is bad if used with concious.

Describe the solution you'd like
An option in preferences to disable/enable semantically transparent elements highlight about Use semantic HTML5 or specify WAI-ARIA role, or an option to disable this monit on particular chosen elements (if possible)

Is your feature request related to a problem? Please describe.
Screen readers depend on the id attribute to correctly associate labels, aria-describedby's and aria-labelledby's. Duplicate id's confuse them, and are just plain old bad code.

Describe the solution you'd like
Have the linter check if an id has been used before on the page, and throw an error if so.

Describe alternatives you've considered
It's possible a user is using other good HTML linters to check for this issue, but I think it's still worth including in this one.

Love this extension but I'd like to know more.

Is your feature request related to a problem? Please describe.
I want to know what tests are being run.

Describe the solution you'd like
A doc page with a list of the tests.

Thanks!

Is your feature request related to a problem? Please describe.
Any time you have any kind of frame, it should have a title attribute with words inside. (Note, not a <title> element, a title attribute, as in <iframe title="Why You Should Make Issues on Github Video">).

Describe the solution you'd like
Add a check for the linter that any and all frames or iframes have a title attribute.

Describe alternatives you've considered
I just think it's within the power of a linter like this to check for it and it's an a11y requirement, so let's go for it.

Additional context
https://webaim.org/techniques/frames/

It's common to use the name btn to represent styling for a button. This should be implemented in the check.

Add support for HBS

Repo: https://gitlab.com/tkil/hbs-example.
See full conversation: issue #22

Describe the bug
For a viewport meta tag with content without user-scalable, it displays the "Enable piching to zoom.." recommendation. After adding it to the content, the recommendation still shows.

To Reproduce
Steps to reproduce the behavior:

1. In an HTML file, have:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

Expected behavior
Recommendation should not display once the user-scalable is added.

Screenshots

Visual Studio Code (please complete the following information):

• Version 1.34.0-insider (user setup)
• Windows Version 10.0.16299.1087

Additional context
Restarted VSCode several times after making the change. Also disabled all the other extensions to verify it wasn't something that was colliding with another extension.

For some elements, this extension recommends using aria-label attribute or <label for=""> to provide a label for that element. I would like that aria-labelledby be included in this validation rule too.

In my HTML page I use a mix of HTML and Prime NG tags , I see that html accessibility issues are highlighted, but not prime ng tags. Is there a plan to support prime-ng tags as well.
Thanks in advance

Based on a discussion with an expert in web-a11y.slack.com, non-semantic elements like span and div are not required to have roles, and enforcing the application of a role on an element that doesn't need one may hurt accessibility.

The suggestion is to modify this rule / test so that it doesn't automatically flag any span or div without a role, at least when settings are at their default.

Thank you.

Describe the bug
The check to be sure there is a <title> attribute between <head> tags does not trip if the <head> tags are empty and right next to each other.

To Reproduce

Expected behavior
The linter should trip when <header> tags are empty and consecutive.

Screenshots
If applicable, add screenshots to help explain your problem.

Note: Anything at all separating <head> tags, including space or newline, does trip the linter.

Visual Studio Code (please complete the following information):

• Version 1.29.1

Additional context
This will probably be a pretty rare problem since most devs do make use of the <header> space for one thing or another if not <title> tags, but it's a fun edge case to put to bed.

Code with expressions in the alt attribute shows an error:
<img className="avatar" src={userAvatar} alt={${user} avatar} />
Error: Provide an alt text that describes the image, or alt="" if image is purely decorativeweb accessibility.

Is your feature request related to a problem? Please describe.
Plugin don't work with HTML-like languages, e.g. Nunjucks, Handlebars, etc. It doesn't work even if extension of file is .html.

Describe the solution you'd like
Added the ability to select extensions in plugin settings.

Describe alternatives you've considered
Default support for all html-like languages.

Is there a way for this plugin to work inside a PHP file to ensure that the HTML written inside the .php files have proper accessibility? I looked at the extension settings but didn't find a way for it to make it work inside a .php file.

Describe the bug
I'm getting a warning to provide an aria-label on elements that are both hidden & aria-hidden="true". Since this element is hidden from screen-readers, there is no need for a label.

To Reproduce
Steps to reproduce the behavior:

1. Include <input type="hidden" aria-hidden="true" name="contact[tags]" value="newsletter">

Expected behavior
When adding either hidden or aria-hidden="true" attributes, the warning should be silenced.

Screenshots

Visual Studio Code (please complete the following information):

• Version 1.37.1

Is your feature request related to a problem? Please describe.
First, the linter currently flags a non-issue. Best practice for images of purely decorative text is an empty alt, like so: <img src="decorative_scribble.png" alt="">

Second, there's a lot of other bad alts that can be caught with their own tests, including:

• Crummy alts, like alt="image"
• Bad practice alt opening, like alt="image of a white dog on a green couch". "image of," "picture of" etc. are not recommended for alt openings.
• Alt text that is too long. Most modern screen readers cut off reading alt text at 125 characters.

Describe the solution you'd like
Improvements to the image alt linter to account for these cases.

Describe alternatives you've considered
I suppose there's a question on whether these should all be grouped together in the validateImg function or broken out into separate tests, but I do think this would be a great addition either way.

Additional context
I'm already working on this! Hope I didn't jump the gun here. Also, more information on good alt text: https://webaim.org/techniques/alttext/

Is your feature request related to a problem? Please describe.
Dev's will commonly use <div> elements for buttons when they should be using <button> elements instead.

Describe the solution you'd like
<div onclick="doStuff()"> should trigger an error different to the typical "Use Semantic HTML5 or specify a WAI-ARIA role [role=""]" warning.

It should say something like "Use a <button> element instead of a <div> element for interactive controls."

The extension currently highlights a Font Awesome spans and tags, expecting a role to be added, e.g.
<span class="fa fa-phone pe-color pe-small-icon" role=></span>

I performed a diagnostic package search on this extension and found the following.

Package has been deprecated
https://www.npmjs.com/package/path-is-absolute
This package is no longer relevant as Node.js 0.12 is unmaintained.

Is this package necessary?

Thank you for your time.

Is there a way to make it work with React JSX?

Is your feature request related to a problem? Please describe.
tabindex should only ever have a value of 0 or -1, except in SUPER RARE exceptions in which case the developer would know enough about tabindex to ignore the linter.

This is an accessibility issue because messing with tabindex messes with keyboard accessibility in ways many developers do not realize.

Describe the solution you'd like
Add a check for tabindex=, then any number following that is greater than 0

Describe alternatives you've considered
It is possible to leave this off because again, there are very, very rare cases where tabindex greater than 0 is warranted, such as a page with a circular structure, but far more common is developers thinking they're helping their page by putting tabindex=1 on the logo at the top of the page, not realizing that this can interfere in cases where, for example, a modal closes and focus should return to where it was before it opened but instead it jumps to the top of the page.

Additional context
More info on tabindex: https://webaim.org/techniques/keyboard/tabindex