Web Audit helps Web Managers maintain their sites by running automatic audits to find
problems with HTML markup, accessibility, UNL web standards, and broken links.
In this video, I’ll run through how to use the Web Audit system and correct common
errors.
It’s important to correct the errors found by Web Audit.
Ensuring your HTML markup is valid is important to make sure the site
displays correctly across displays and devices.
An accessible site is important for those using assistive technologies
such as screen readers.
Functioning links are important for any user.
All of this is important when thinking about Search Engine Optimization.
Web Managers will receive a monthly email with the results of the
automatic Web Audit scan.
The Web Audit report for a site can also be accessed by selecting ‘QA Test’
at the bottom of the page, then going to ‘Current Report’.
Here, we can see what percentage of pages are passing, the number of changes since
the last scan, and the total number of pages scanned.
Web Audit sorts issues into ‘Errors’ and ‘Notices’.
In this video, we’ll be looking at ‘Errors’, as these are what affect the
Web Audit passing percentage.
Web Audit also sorts issues into categories.
Here, we can see ‘Hot Spots’, which are simply pages that have a lot of errors.
‘Link Checker’ shows pages with broken links.
‘W3C HTML Validator’ shows pages with HTML errors.
‘aXe Accessibility Metric’ shows accessibility errors such as images missing alternate text
or a lack of color contrast.
‘SEO’ refers to errors specific to Search Engine Optimization.
‘Security’ relates to site security and ‘Spelling’ can help identify typos.
The ‘Pages’ section lists every page and a culmination of errors.
This is where I like to start when I’m working on a site with Web Audit errors.
We can sort alphabetically or by number of errors.
Clicking on a page lets us see what errors
Web Audit found during the most recent scan.
While we have the ability to start a new scan of the entire site,
it’s usually more helpful to scan a single page at a time using the
‘Rescan this page’ button.
It takes a few minutes to scan a page, but it takes a few hours to scan an entire site.
Wait a few minutes after starting the page scan and refresh the page.
I have the magic of video editing on my side, so I’ll cut out
any waiting for scans to complete.
I’ve set up my test site with a few common errors that we’ll learn how to fix.
For these edits, we’ll be working mostly with HTML.
The standard editor is called a WYSIWYG editor.
WYSIWY stands for ‘What You See Is What You Get’.
This editor has some limitations when it comes to Web Audit errors,
and in some cases can insert code that causes errors.
You can switch to HTML with the dropdown at the bottom of the editor.
If an error can be fixed with the WYSIWYG editor,
I’ll try to show how use that editor to fix the error as well.
You don’t need to know HTML like the back of your hand,
just know that most HTML elements need an opening tag and closing tag.
It’s just like writing a sentence.
A sentence starts with a capital letter and ends with period.
A paragraph element starts with a <p> and ends with a </p>.
“P” stands for ‘paragraph’.
A link starts with a <a> and ends with a </a>.
“A” stands for ‘anchor’, which links to something else.
We can add attributes to the opening tag to define the element.
Attributes have a name, equals sign, and value in quotations.
This link has an ‘href’ attribute that defines what opens when
the link is clicked.
This image has a ‘source’ attribute attribute that defines what image
displays and an ‘alt’ attribute that describes
the image.
Some elements can have other elements nested inside of them.
For instance, we can add a link nested inside this <p> element.
We just need to make sure that each element closes in the reverse order that
it opened.
The link will close first, followed by the paragraph.
It’s just like writing a sentence.
If part of the sentence needs parentheses, you open and close them between the
capital letter at the start of the sentence and period at the end.
This image tag doesn’t need a closing tag.
It has a forward slash at the end of the tag.
This is called a self-closing tag.
There’s very few of these in HTML;
images and line breaks are probably the only one you’ll come across.
I’ve set up a few pages with common errors, and I’ll work through
correcting the errors.
If you’re looking for a specific issue, I’ve included timestamps in the
video description.
You can also use the searchable transcript.
Alright, so I'm here on my test site.
I have some pages set up with common Web Audit errors.
I'm going to do this video a little differently than most of my videos.
Typically, I record audio separate from the visual.
Here, I'm just going to be sitting on my computer, talking as I works, so
I'm typically very bad with talking and typing at the same time.
Hopefully this runs pretty smoothly.
Let's get into it.
I have a page set up here with broken links.
I'm going to just check out this "QA Test" at the bottom
to see what Web Audit shows.
Here in the Link Checker we can see there's two links that are broken.
There's a link to my page /extension.unl.edu.
Another one to a student resources page.
Alright, so let's take a look at this page.
Let's edit.
I've already got this switched over from the WYSIWYG to the HTML editor.
This first line here, we can see we have a paragraph, there's a link,
the link closes, and then the paragraph closes.
Same thing for this next line. Paragraph, link, link closes,
paragraph closes.
Now this first link here was one of the ones that Web Audit showed was broken.
It's a link to my student resources page.
I know I don't have a student resources page, so I can change this to something
that I know does exist.
Let me pull up another page. Let's open a new tab.
I'm going to link to this page here.
So let's say 'Image missing alt'.
Copy that. And put that in in place of Student Resources.
That should fix that.
This next line, I'm trying to link to a site outside of my site.
What's missing here is the https://
This tells the browser that it's looking for a different site.
Without that, if we look at the Web Audit, it's looking for
unlcms.unl.edu/test/keith/extension.unl.edu.
It needs to be looking for a different site, so we need that https://.
Sometimes when I'm working on a page, I don't necessarily know where a link is
supposed to link to.
In this third line here we have a paragraph, here's the link, link closes,
paragraph closes.
You'll see too I have these <!--. That's an opening 'comment' tag.
Then here is the closing comment tag, -->.
What this does, is tells the browser, 'Don't display this.'
I've done the same thing on the end tag here.
So when we look at our page, we'll see 'Check out our student resources' -
'student resources' will not be a link because I've commented out the link
HTML code, and then closed the paragraph.
So if I ever send you a page that I've been working on and I say there's a
broken link here, I've commented out the code, this is what I've done.
This is also useful if you find a page is broken, you're not sure where it's
supposed to go, but you don't want to have a broken link on your page in the
meantime.
I'm going to go ahead and save this page.
Let's test these links. I'm going to open them in new tabs.
Alright, 'Image missing alt', that was the first link.
And Nebraska Extension was the second one.
Notice too, 'student resources' here is not a link because I commented out the
code that caused that to be a link.
I'm going to revert this back to an older version.
I'm going to go to 'Revisions', I'm just going to say 'Revert', and 'Revert'.
Now I've got it back to the initial edit of this page.
Let me go into 'Edit'. You'll see, again, we have 'student resources', and
extension.unl.edu.
This was how I fixed it with the HTML editor.
With the WYSIWYG editor, it's very simple.
You'll just highlight the link.
Click on 'Insert/edit link', and edit the link URL here.
Same for this one here.
I'll highlight, add or edit link, include that https://.
Select update and save the page.
It works perfectly.
Alright, let me real quick I'm going to copy this and update the other link using
the WYSIWYG editor.
So I'll highlight. Make sure I have the whole link here. Highlight...and paste
this there.
Update and save.
Just test to make sure that works correctly.
It is. Now I'm going to rerun the scan for this page.
Go to "QA Test" at the bottom.
As I mentioned before, we can start a whole new site scan.
We've only done the one page though, so it's probably more effecient to just
re-scan this page. Say 'okay'.
This will take a minute or two, and then just keep refreshing the page.
It will give you a new 'passing/not passing' and score when the scan is finished.
I have the benefit of video editing on my side, so I'm going to skip ahead
to when the scan is actually complete.
There we go. We have a passing grade on this page.
I'm going to go back to my site.
Let's work on this next one, 'Image missing alts'.
So alternate text is defined by the 'alt' attribute in HTML, and this should
describe the image.
Let's go to "QA Test", the Web Audit score, and see what shows for this.
Here we can see an image must have an alt attribute.
There's also some other issues here that we'll deal with a bit later.
Down here we also have image must have alternate text.
Let's go back to the page.
And edit.
Alright, I'm already in the HTML editor.
Here you can see we have an opening tag, 'a' for a link.
It's referencing this image, images/east campus mall.jpg.
We then have the image tag, which is self-closing, and then the
end of the link.
So this image has an 'src' tag.
That stands for 'source', and that tells the image what to display.
It's missing alternate text, which is the 'alt' tag.
So we'll say 'alt=', then in quotes describe this image.
I'm going to go ahead and save this.
So now we've added an 'alt' attribute to this image so a screen reader,
a web search crawler, knows what this image is.
If you're working in the WYSIWYG editor, you want to highlight the image,
select 'insert/edit image', and make sure this 'Image Description' field is
filled in.
I'm going to go ahead and run this "QA Test", the Web Audit scan,
just to make sure there's no more errors related to the image alt.
Alright we still have a 'no passing' grade, but let's just make sure...
I don't see any errors related to the alt there, and we've update our
aXe Accessibility Metric related to image alts.
This 'bad value' error - I'll go through how to update this in another part of
this video related to spaces within the file name.
Alright, let's go back to the site. Go to site.
Alright, this next one is 'links are missing discernible text.'
I have a page with an image.
Let's see what's going on in our Web Audit report.
Scrolling down here...okay.
This image is missing an 'alt' attribute.
We've learned how to fix that.
We also have two errors down here 'Links must have discernible text',
and again this image is missing alternate text.
If we're not sure what the link is, we can look at this 'fix' option over here.
I'll open it in a new tab, and this should show me what the error is.
Here we can see we have an opening 'a', or link. It points to this web address,
and then it immediately closes.
There's nothing inside this link.
Let me close this and go back to our page.
And let's edit.
Alright, here's that error that we saw on the Web Audit report.
In my experience, an error like this is usually caused by the WYSIWYG editor.
I think it has to do with deleting the text that used to be a link.
The WYSIWYG editor doesn't necessarily also catch the link, it just makes an
empty link.
In this case, since there's nothing within the link, I can go ahead and just
delete this, or, if there's supposed to be text in here, I could add text.
Either way, those are both valid.
I'm going to go ahead and just delete this for my own sake.
We also have an opening 'a' - a link, an anchor.
'href' points to this image.
Then we have an image tag, which self-closes.
And then the closing tag for that link.
But notice, this image has a source attribute - 'src', this is the image
that's displaying - it's missing alternate text.
So I included some text that describes the image, and describes what this link does.
I'm going to go ahead and save. And let's run this scan again.
Alright, it's been a few minutes, let's see if this scan is complete.
Perfect, we have a 'P', which means this page has passed.
Let's go back to our site.
Alright so we just did 'links need discernible text'.
This is what I was talking about earlier, the 'space in an image name'.
Let's view the Web Audit report for this page.
We have 'Bad value for attribute href' on our link.
'Illegal character in path segment: space is not allowed.'
So we need to do something to take care of these spaces within this filename.
Let's edit.
Alright, now I'm already in the HTML editor.
I can see here the errors are here and here.
Best practices for naming images is lowercase, short, descriptive words
separated by hyphens.
Here, we have them separated by spaces.
There's a few things we could do.
One is to say, the code for a space is %20.
I'll copy that, paste it here as well.
And I'll paste it here as well.
This is an alright fix.
Let me go ahead and save and rerun the Web Audit report.
Okay, see, this worked.
I replaced the spaces with '%20', and the page now passes.
That's an okay fix, it's not our preferred fix though.
I'm going to show you how to fix this more correctly.
So the issue is this image was named with spaces.
So I'm going to rename the image first.
I'm going to go to 'Find Content', the 'File Browser', and find this image,
'east campus mall'.
Then I want to rename it.
I'm going to put hyphens in here instead of spaces.
This is best practice for naming an image.
So now I have 'east-campus-mall.jpg',
Instead of 'east campus mall' with spaces.
I'll close this. Coming back here, I'll edit.
And I'll just replace these spaces with hyphens.
Save and rerun this Web Audit report.
Alright, this page is still passing.
Now in the WYSIWYG editor, the way to correct that error is to highlight the
image, 'we'll insert/edit image'.
I already have this renamed, but I could also rename it with the rename option
and then select 'Insert File'.
Make sure this 'Image Description' is filled out.
Say 'Links to larger image.'
And insert.
Then I'll highlight, 'insert/edit link', browse and find that same image.
Insert and save.
That worked as well.
Alright, let's move on to 'Frames Missing Titles.'
So, I have here a Youtube embed for Market Journal.
This embed is in an element called a frame.
Images need alt tags, and frames need titles.
This frame is missing a title. Let's see what's happening in our
Web Audit report.
We can see here, "frameborder is obsolete" and "frames must have a title attribute".
These are both related to the YouTube embed.
So let's see what's happening.
I'll edit. I'm in the HTML editor.
See here we have an iframe, it has attributes of width, height,
source similar to an image this tells is what video to play.
This 'frameborder' was one of the errors on our Web Audit report.
It is obsolete. It's been removed from HTML.
It also has a value of zero, which means it's not giving a border.
We can go ahead and delete this.
These are a few other attributes.
What we're missing, though, is 'title'.
So I'll say "title=", I'm going to say 'Market Journal Episode...
Let's actually do this just to make sure I have the title correct.
Episode August 9th.
Attributes have to end with quotations as well,
and then we have the closing tag for the iframe.
Let's save this.
Alright so we've given this frame a title and removed the frameborder
attribute.
Go to 'QA Test' and re-scan this page.
Alright. This page passes.
Let's go back to the site.
Let's check out our next error, 'no p in scope'.
Okay so here I have a page.
It looks like it has a heading, a paragraph and an unordered list.
Let's take a look at the Web Audit report.
Okay, here under the HTML validator, we can see 'no p in scope but a p
end tag seen'.
Let's go to the page and figure out what's going on.
Alright. I'm in our HTML editor.
I can see here we have a heading, h2, that then closes.
Then we have text, and an end </p> tag.
But notice we don't have the opening <p>, so I'm going to,
in angled brackets, add a p there (<p>).
Looks like we then have a <ul> - an unordered list.
This will give the bullets.
'<ol>' is 'ordered list' which will give 1, 2, 3, 4, etcetera.
A list item that then ends. A list item that then ends.
And the end of that unordered list.
So the issue was this opening <p> was missing, because we had an </p> over here.
I'll save this.
And rerun this Web Audit scan.
Alright, our page is passing now.
This was a fairly simple example.
If you have something more complicated,
I would use a tool like DirtyMarkup.
I'm going to copy this, I have bookmarked here DirtyMarkup.
Paste this here.
In DirtyMarkup, you can see our tags are highlighted a different color.
And if we click on them, we get an underline.
This shows where an element opens and where it closes.
So this <p> closes here and opens here.
This opening tag and end tag are related as well.
If I delete this, you'll notice this </p> has been highlighted by DirtyMarkup.
This tells you that there's something wrong with this closing </p>.
In this case, when I click on it it underlines, there's no <p>.
DirtyMarkup's a very useful tool and I'll include a link to it in the description
of this video as well.
Alright, moving on.
The next error that's pretty common is 'ul is not allowed as a child of ul'.
Here we can see we have a list.
It has sort of a sub-list, and then the list continues.
'ul' is an element that stands for 'unordered list'.
That gives you these bullets, dots.
Another type of list is an 'ol'.
That will give you 1, a, b, c, 2, 3, etcetera.
So let's check out the Web Audit report,
and see how this error looks.
Yeah, here we go.
'Element ul not allowed as a child element of ul in this context.'
This is under the HTML validator.
If we go to the aXe accessibility metric, we also see 'ul and ol must only
contain li, script or template elements'.
So let's go to the page and see what we have going on.
Okay.
We have our opening <ul>, then we have a line item.
That closes.
Another list.
Line items that open and close.
This closing is going to be the closing for this <ul>.
We have more line items, that close.
And then we have this </ul>, which closes out this...
I'm sorry we have this closing tag which closes out this unordered list.
Now, this unordered list is sort of a sub-list of this item.
The issue here is that this line item opens, and then closes immediately.
What we want...
I'm going to cut this and I'm going to put it under the closing tag
for this sub-list.
This tells the HTML that this is indeed a child of this list item.
When making sub-lists you want to keep the list item open,
start another list, then close that list item.
Save.
And I'll rerun this scan.
Alright that page is now passing because we have things nested the correct way.
Again, keep the line item open, start a new list, end the list,
then close the line item.
Alright let's continue.
Type is obsolete.
This is also related to lists.
The attribute 'type' is obsolete.
Let's see what's happening on our 'QA Test'.
Alright.
"The 'type' attribute on the 'ul', unordered list element,
is obsolete. Use CSS instead."
When we looked at our frame earlier, there was a 'frameborder' attribute
that was obsolete.
This is the same type of issue.
Go to the page and edit.
And in our HTML editor, you'll notice we have <ul type="disc">.
Now, I think this is an error that comes up from the WYSIWYG editor.
It automatically includes 'type="disc"'.
"Type" is obsolete and 'disc' is the default anyhow,
so we can go ahead and just delete this.
Looking through, none of these other opening tags have other attributes,
so that must have been the issue.
I'm going to go ahead and save and rerun the Web Audit report.
Alright, this page is now passing.
Let's go back to the site.
Alright, duplicate IDs.
So I have two table here.
Let's see what our Web Audit report is saying.
Alright we have a duplicate ID. A couple of duplicate IDs here.
If we scroll down a bit more, our accessibility metric also shows
the same errors, "id values need to be unique".
So an ID is an attribute on an element.
Let me click this 'fix' and show you real quick...
So here we have a table header, <th>. There's a closing tag for it.
It has an ID attribute.
An ID attribute has to be unique for each page.
You can use the same ID on multiple pages, but per page you can only have
one of that ID.
That's the error that's happening here.
So, let's go back, see what's going on.
Like I said I have two tables.
The way I made this, I used IANR's Responsive Table Generator.
I made this top table, copied and pasted the code below,
and then just updated these headers.
So the issue here is that both tables, table heads and other elements with IDs,
are duplicated.
What I'm going to do...
Here we have the opening of this table, we need to find the closing table tag
for this first table, which is right there.
Now, I'm going to, just real quick, I'm going to copy this entire second
table.
I'm going to open up Notepad.
Paste it here.
This is the ID for the table.
It is also then used as the ID for able heads, and table rows, etcetera.
So, let's copy this here.
Say 'edit' and 'replace'.
This table ID is not necessarily important that it's any specific thing,
so I'm going to just change it to...
I'm just going to add a zero to the end of it and replace all.
I'll select all this and copy.
I'm going to paste it back and save the page.
So now I changed the IDs for this bottom table
with a quick and simple find and replace.
Let me go ahead and rerun this Web Audit scan.
Alright, this page is now passing because we don't have duplicate IDs.
Another way to solve this would be if I came in here and I came through
and just manually said, alright, let's change this to 'table',
let's change this to something else, let's change this to something else...
I find the find and replace method is much quicker than going through
and manually updating every ID for every cell in this table.
Alright, let's continue on.
Another issue with tables... Let's see what's happening in this
Web Audit report.
Alright, 'element thead - table head - is not allowed as an element of table
in this context.'
So something is going on with the table head.
Let's go to the page.
Remember earlier I said that most HTML elements can have other elements
embedded within them.
Sometimes, we need to make sure that those elements are embedded in
the correct way.
So here we have a table.
This is the opening tag for the table.
We have a caption, which is empty.
Then we have a table body followed by a table head.
In this case, the table body needs to follow the table head.
Not the other way around.
So I'm going to go ahead and cut this.
We have our opening table head here.
This is table row, table headers that open and close.
Here's the ending of that table row.
Here's the ending of the table head, and under the ending of the table head
we can insert table body.
We then have rows, headers, table data.
They all open and close in reverse order.
Now we can see the table body closes and the table closes.
So this should be good to go.
Let me go ahead and save.
And run this Web Audit scan one more time.
Alright, by making sure that table body and table head were nested properly,
we now have a passing grade on this Web Audit report.
Let's go back to the site and continue working.
Alright our next error, 'child is not allowed as a child of div'.
Let' see how this looks in our Web Audit report.
Alright so under our HTML validator we can see that 'element style
not allowed as child of element div in this context'.
Let's go back to the page and see what's going on here.
So, I'm looking at the HTML, not the WYSIWYG.
So here we can see we have an opening 'style' tag and a closing 'style' tag.
This whole section is our issue.
Now what's in this style tag is what's called CSS - Cascading Style Sheets.
And it's used to style HTML.
What this is saying here, is that an element with a class of 'background',
should have a background color equal to our Husker red, okay?
So we can see down here this div element should have a background color
of the Husker red.
Then, an element with the class of 'white' should have a text color of white.
So this paragraph element has a class of 'white' which gives it the
white text color.
Let's go back to our page just so you can see how that looks.
Red background, white text color.
There's a few fixes for this.
We can use what's called inline CSS, okay?
So instead of doing a style, defining classes and what those classes do,
we would remove the class from the elements and say 'style=',
and then in quotations put our CSS.
Do the same for this <p> element.
We'll say 'style="color: white;"'.
Then I'll remove the style element.
Okay we can see this paragraph still has the red background color
and the white text.
Let's go ahead and run this Web Audit report again.
Alright, so this fix worked.
Our page is now passing.
However, I want to show you a more appropriate way of fixing this error.
I'm going to go ahead and revert this back to the version
we were using before with the style element included.
And again, this is saying that any element with class 'background' should have
this Husker red background.
And I showed you how to put this in as an inline style.
The Web Developer Network has also made classes,
so if we go to wdn.unl.edu,
documentation, 5.0 Framework.
Go down here to 'CSS Classes'.
And I prefer to look at these on a single page.
Now here, I'm going to control+f, try to find that Husker Red.
So here we have a class, 'unl-bg-scarlet',
that will make the background that same Husker red that this
'background' class is doing.
Go ahead and delete this and update this class to 'unl-bg-scarlet'.
We can do the same for the <p> element.
Instead of using a 'white' class that we've created,
we can say 'class="unl-cream"'.
These classes are part of the framework, so when the browser sees that this <p>
has the class 'unl-cream', it will automatically make this a white color.
Similar with this, when it sees that 'unl-bg-scarlet' is what this
div class is, it will make the background that Husker red.
Go ahead and save this.
There we go.
Let me rescan this page.
And I'll include a link to these CSS classes in the video description
as well.
Alright, this page is now passing.
Let's continue.
Alright, let's talk quickly about color contrast.
Color contrast is a big part of accessibility.
We want to make sure that the foreground text has enough color contrast with the
background so that it's legible.
There's some tools that can help with this, I'll bring one up here quickly
that I found.
Here we can put in the hexadecimal reference for the color and find the
color contrast ratio.
I believe 4.5 is the minimum for the AA standard that we look to hit.
Let me just make sure. Yes, 4.5 is what we're looking for.
We want to hit this passing right here.
As you can see, this text is fairly dark on a pretty dark background.
Also, this grey is going to give us an error with this red for the link.
Let me go ahead and show you what this error looks like in the
Web Audit report.
And this is under the aXe Accessibility Metric.
You can see here we have three errors regarding insufficient color contrast.
If we hit the 'fix' button, 'fix' link, we can see exactly what the issue is.
The foreground has a color of this, let's copy this and put it into our tool
here, the background color, let's copy that, paste it there.
So see this only has a 1.88 color contrast.
That's not nearly enough to be an appropriate amount of color contrast.
So, let's view the page and edit.
Let's see what's going on in here.
Okay, you can see here that we have a paragraph.
This paragraph has a class of 'unl-bg-dark-gray'.
Similar to what I just showed with the 'style' error,
this is a CSS class that's in the framework, and will give this
paragraph a dark gray background.
That's causing issues with the text in this paragraph.
So one thing we can do is just delete this class entirely.
I'll delete this. This should remove that dark gray background.
There we go. That's much more legible.
This next line here, let's take a look.
So we have our <p>, the class of 'unl-bg-light-gray', we then have a link
that opens and closes, then the end of the <p>.
Now, 'unl-bg-light-gray' does not have sufficient color contrast with the red
that's used for a link.
So I'm going to update this to a 'lighter' gray.
This also a class in the framework.
It's a slightly lighter shade of grey.
Save this.
This background's now a bit lighter.
Let's see if we can pass our Web Audit scan.
Alright, looks like we are passing now.
Let's continue on, close these other tabs.
Alright, let's take a look at this Web Audit report.
In the HTML validator we can see 'an end tag main was seen but
there are open elements', and there's an unclosed element 'div'.
Let's take a look at this code and see what's going on.
So what that scan was telling me is that one of these divs is not
closed properly.
I'm going to open another tab and bring up the DirtyMarkup tool that
I showed earlier.
Copy this code. Paste it into DirtyMarkup.
As I said before, we're able to click on an opening tag to see the closing
tag and vice-versa.
So here's the closing tag for this header 3.
Here's the opening tag for the header 3.
The issue is one of these div opening tags is not closed properly.
So this one opens here, closes here.
This one opens up here, closes down here.
This one opens here, and closes down here.
And this one...
Nothing's highlighted so we're missing the closing div.
I'll just add </div>. Close that.
Let's copy this, paste it back into this editor and save the page.
Alright, all our divs are now closed properly so we passed the
Web Audit scan.
Let's continue on.
Alright, our last error was we were missing a closing div.
Sometimes we can have too many closing divs.
Let's see what's going on with this Web Audit report.
Here we have a stray end tag 'div'.
This is similar to the paragraph error we had earlier where there was no <p> tag
in the scope, but an </p> tag seen.
I'm going to edit this page.
I'll highlight everything. Well, I'm just going to select all instead.
Let's copy, let's open up that DirtyMarkup and paste our code in.
And we can see when we pasted, this closing div tag highlighted.
If we click on that we can see the blue underline.
There's no blue underline up above to show what the opening tag for this
end tag is.
This one seems to close the overarching div tag.
I'm just going to go ahead and delete this.
I'll copy this code, and paste it back in here.
Save and rerun the Web Audit report.
I'll wait a few minutes then refresh the page.
Alright and our page is now passing.
Let's continue.
Let's see what's happening in the Web Audit report for this page.
In our HTML validator section we can see there's no space between attributes.
When an element has multiple attributes, those attributes have to be separated
by a space.
Let's click on this 'fix' button.
This should show us exactly what we need.
Okay, so it looks like we have, this is the end of an attribute.
There's no space here before the 'alt' attribute appears.
Let's edit our page.
I can see here image source attribute.
That tells the image what to display.
Alt attribute describes the image,
but there's no space between them.
Save and rescan the page.
Alright adding that space cleared up the error.
This page is now passing.
Finally, sometimes we'll have an error where there's too many quotes within
an attribute.
Let's take a look at this Web Audit report,
see what's going on.
Okay so we have three errors here: 'no space between attributes',
'attribute quotation mark is not allowed on image', and then
'saw quotation mark, but expecting an attribute name.' Probably the issue
is equals sign is missing.
Let's go to this page and see what's going on.
Edit.
Okay here you can see we have a link that opens and a link that closes.
We have one quotation, one quotation.
So that's okay.
Image has a source attribute.
One quotation. One quotation.
Then an alt attribute with a quotation, then we have two quotations here.
So let's make this just one quotation mark and save and rescan.
Alright this page is passing now.
You'll notice that that one typo caused three different errors.
Sometimes that happens with Web Audit just depending on the type of error.
Alright if you have any questions, comments, or concerns,
be sure to check out the Web Resources on the IANR Media webpage.
We do have a whole section for Web Audit that shows common errors and how
to fix them.
And we have some more examples there that give code as well.
You can also contact me directly.
I'm in the directory.
kmcguffey2@unl.edu or give me a call at 472-5629.
Thanks for watching!