MS Edge Tools VSC errors

Beginners
1

For mcgraphics.us/poets in PG I added http: links, not relative links which I don’t have.
In VSC I now have 5 types of errors all MS Edge Tools related. Most have to do target="_blank" documentation.

  1. “Cross-origin resource needs a ‘crossorigin’ attribute to be eligible for integrity validation.”
  2. “Form elements must have labels: Element has no title attribute Element has no placeholder attribute”
  3. “Links must have discernible text: Element has no title attribute”
  4. “Link ‘rel’ attribute should include ‘noopener’.”
  5. “Link ‘rel’ attribute should include ‘noreferrer’.”

I added noopener noreferrer. Didn’t remove problems.
I did a null Validator. None of these errors show there.`

Help please.

3

Hi @kat,
I’m not sure if you worked on the site since you posted, but I’m only getting one warning and one tip in the MS Edge web tools.

If you open each warning it will point to the element it is having a problem with validating.

image
image3074×1008 252 KB

Not sure if your list looks different. A screenshot would help.
Bob

1 Like
4

I’ve uploaded latest to mcgraphics.us/poets & got it down to 3 types of errors.

Problem 1: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"/>

Two Solutions Examples:
<script src="https://example.com/script.js" integrity="sha256-validHashHere sha384-validHashHere"> </script>

<script src="https://example.com/example-framework.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"> </script>

Question: How do I get the validHashHere or integrity and which do I use?

Problem 2: <input type="checkbox" class="toggler"/>

Solution Example: <input type="text" aria-labelledby="temperature low">

Question: Where do I add aria-labelledby=“checkbox”?
__________________________-
Problem 3: <span><a href="https://twitter.com/PoetryLA" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a></span>

Solution Example: <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>

Question: Where do I put aria-label=“Visit PoetryLA Twitter”?

5

Hi @kat,
For the first, you will have to generate your own hash - Report URI: SRI Hash Generator

For the second, here is a link where you can read about it: aria-labelledby - Accessibility | MDN

For the third, just follow the example. Add it into your link.

Cheers,
Bob

1 Like
6

Fixed all and uploaded. This all must have happened because I installed Microsoft Edge Tools for VS Code. I haven’t yet made it work so browser dev tools are accessible inside VSC.

Writing out my questions and knowing the forum is here, is an amazing asset.

On to my fixing my sites which now shows errors in VSC and (Ready to check - Nu Html Checker - thanks Rob, David @AllMediaLab