Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
For example if there is an image subfolder under your extension project workspace:
If you have any requirements or dependencies, add a section describing those and how to install and configure them.
Include if your extension adds any VS Code settings through the
This extension contributes the following settings:
Calling out known issues can help limit users opening duplicate issues against your extension.
Users appreciate release notes as you update your extension.
Initial release of ...
Fixed issue #.
Added features X, Y, and Z.
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
Working with Markdown
Note: You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
For more information
W-Confirm (VS-Code Extension)
There is a need to reduce obstacles for all individuals, irrespective of their shortcomings, to access content on the web.
. Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
The proposal is to create an extension for a popular IDE which reminds and gives hints to the developer during the web development.
Here we tried to develop an vs-code extension that would help the developer to follow the rules by suggesting him at the time he develops the website.
This extension helps the developer by suggesting the necessary attributes to a tag that would make the website wcag compliant.
If the user runs the vscode extension alongside with his/her html code
The tags that are not following the compliance are being highlighted using the green colour
On the first time hover over the highlighted tags The user gets the option to get input from the user input options : For the html tag if the user inputs y he gets lang attribute added to the code [according to the guideline] For the form tag if the user inputs y he gets role attribute added to the code [according to the guideline] For the div tag if the user inputs y he gets aria-label attribute added to the code [according to the guideline] For the html tag if the user inputs y he gets lang attribute added to the code [according to the guideline] For the input tag with type image if the user inputs y he gets alt attribute added to the code [according to the guideline] For the input tag with type text the user inputs y he gets autocomplete attribute added to the code [according to the guideline] For anchor tag user needs to enter the description if he wants. Then the description gets added to the anchor tag [guideline]
Based on css anchor and button tags get highlighted if they violate the guidelines [red colour]
For anchor tag we have checked for the font style i.e, it is better to use strong instead of italic. For button tag we have checked for the contrast colour to be atleast 1.5
On hovering over the tags, developer gets to know the attributes he/she can use wrt that particular tag
G Pavan Sahith, M Yethin Chandra Sai, K Pavan Kalyan, V Jaswanth, Gagan Hegde cs19b017, cs19b026, cs19b022, cs19b042, cs19b015
clone the git repository run npm i in your vscode to install the node modules debug the code In the new vscode code editor write your code -> ctrl+shift+p to run the extension It will highlight the tags that violate the wcag compliance & displays the message on hover over the particular tag.
Go to vscode marketplace and search for wcag-ext and install it Open the code in the debug console -> ctrl+shift+p to run the extension. It will highlight the tags that violate the wcag compliance.
To make the parser effecient. To add some more guidelines.