Web Audit Guide

Keith McGuffey Author

09/17/2019 Added

188 Plays

Description

A guide to fixing common Web Audit errors.

Timestamps:
5:16 - Broken Links
11:32 - Images missing alt text
14:37 - Discernable text
17:59 - Spaces in filename
22:44 - Frame missing title
25:20 - No <p> in scope
28:11 - <ul> as child of <ul>
31:30 - Type is obsolete
33:00 - Duplicate IDs
36:54 - Improperly nested heads
39:00 - <style> not allowed as child of <div>
44:30 - Insufficient color contrast
48:22 - Missing closing </div>
50:36 - Too many <div>s
52:57 - No Space between attributes
53:55 - Too many quotes

Links:
DirtyMarkup: https://www.10bestdesign.com/dirtymarkup/
UNL CSS classes: https://wdn.unl.edu/50-classes
Color Contrast Tool: https://webaim.org/resources/contrastchecker/

Searchable Transcript

Search:

[00:00:00.962]Web Audit helps Web Managers maintain their sites by running automatic audits to find
[00:00:05.390]problems with HTML markup, accessibility, UNL web standards, and broken links.
[00:00:11.922]In this video, I’ll run through how to use the Web Audit system and correct common
[00:00:15.901]errors.
[00:00:16.970]It’s important to correct the errors found by Web Audit.
[00:00:19.469]Ensuring your HTML markup is valid is important to make sure the site
[00:00:23.680]displays correctly across displays and devices.
[00:00:26.692]An accessible site is important for those using assistive technologies
[00:00:30.039]such as screen readers.
[00:00:32.028]Functioning links are important for any user.
[00:00:34.274]All of this is important when thinking about Search Engine Optimization.
[00:00:38.754]Web Managers will receive a monthly email with the results of the
[00:00:41.459]automatic Web Audit scan.
[00:00:43.572]The Web Audit report for a site can also be accessed by selecting ‘QA Test’
[00:00:47.652]at the bottom of the page, then going to ‘Current Report’.
[00:00:52.090]Here, we can see what percentage of pages are passing, the number of changes since
[00:00:59.275]the last scan, and the total number of pages scanned.
[00:01:03.679]Web Audit sorts issues into ‘Errors’ and ‘Notices’.
[00:01:07.192]In this video, we’ll be looking at ‘Errors’, as these are what affect the
[00:01:10.243]Web Audit passing percentage.
[00:01:12.515]Web Audit also sorts issues into categories.
[00:01:15.341]Here, we can see ‘Hot Spots’, which are simply pages that have a lot of errors.
[00:01:19.985]‘Link Checker’ shows pages with broken links.
[00:01:22.850]‘W3C HTML Validator’ shows pages with HTML errors.
[00:01:28.548]‘aXe Accessibility Metric’ shows accessibility errors such as images missing alternate text
[00:01:33.703]or a lack of color contrast.
[00:01:36.189]‘SEO’ refers to errors specific to Search Engine Optimization.
[00:01:40.243]‘Security’ relates to site security and ‘Spelling’ can help identify typos.
[00:01:45.440]The ‘Pages’ section lists every page and a culmination of errors.
[00:01:49.795]This is where I like to start when I’m working on a site with Web Audit errors.
[00:01:53.946]We can sort alphabetically or by number of errors.
[00:02:00.238]Clicking on a page lets us see what errors
[00:02:01.987]Web Audit found during the most recent scan.
[00:02:04.552]While we have the ability to start a new scan of the entire site,
[00:02:07.610]it’s usually more helpful to scan a single page at a time using the
[00:02:10.859]‘Rescan this page’ button.
[00:02:12.987]It takes a few minutes to scan a page, but it takes a few hours to scan an entire site.
[00:02:18.439]Wait a few minutes after starting the page scan and refresh the page.
[00:02:22.340]I have the magic of video editing on my side, so I’ll cut out
[00:02:25.593]any waiting for scans to complete.
[00:02:29.586]I’ve set up my test site with a few common errors that we’ll learn how to fix.
[00:02:33.514]For these edits, we’ll be working mostly with HTML.
[00:02:37.108]The standard editor is called a WYSIWYG editor.
[00:02:40.189]WYSIWY stands for ‘What You See Is What You Get’.
[00:02:43.585]This editor has some limitations when it comes to Web Audit errors,
[00:02:46.810]and in some cases can insert code that causes errors.
[00:02:50.898]You can switch to HTML with the dropdown at the bottom of the editor.
[00:02:55.440]If an error can be fixed with the WYSIWYG editor,
[00:02:57.921]I’ll try to show how use that editor to fix the error as well.
[00:03:01.566]You don’t need to know HTML like the back of your hand,
[00:03:04.055]just know that most HTML elements need an opening tag and closing tag.
[00:03:08.446]It’s just like writing a sentence.
[00:03:10.906]A sentence starts with a capital letter and ends with period.
[00:03:14.703]A paragraph element starts with a <p> and ends with a </p>.
[00:03:22.759]“P” stands for ‘paragraph’.
[00:03:24.585]A link starts with a <a> and ends with a </a>.
[00:03:30.705]“A” stands for ‘anchor’, which links to something else.
[00:03:33.814]We can add attributes to the opening tag to define the element.
[00:03:37.555]Attributes have a name, equals sign, and value in quotations.
[00:03:42.532]This link has an ‘href’ attribute that defines what opens when
[00:03:46.543]the link is clicked.
[00:03:48.657]This image has a ‘source’ attribute attribute that defines what image
[00:03:54.064]displays and an ‘alt’ attribute that describes
[00:03:56.547]the image.
[00:03:58.563]Some elements can have other elements nested inside of them.
[00:04:01.996]For instance, we can add a link nested inside this <p> element.
[00:04:05.939]We just need to make sure that each element closes in the reverse order that
[00:04:09.643]it opened.
[00:04:11.189]The link will close first, followed by the paragraph.
[00:04:14.215]It’s just like writing a sentence.
[00:04:16.521]If part of the sentence needs parentheses, you open and close them between the
[00:04:20.238]capital letter at the start of the sentence and period at the end.
[00:04:24.334]This image tag doesn’t need a closing tag.
[00:04:27.092]It has a forward slash at the end of the tag.
[00:04:29.549]This is called a self-closing tag.
[00:04:32.047]There’s very few of these in HTML;
[00:04:34.314]images and line breaks are probably the only one you’ll come across.
[00:04:38.321]I’ve set up a few pages with common errors, and I’ll work through
[00:04:40.871]correcting the errors.
[00:04:42.696]If you’re looking for a specific issue, I’ve included timestamps in the
[00:04:45.734]video description.
[00:04:47.246]You can also use the searchable transcript.
[00:04:50.413]Alright, so I'm here on my test site.
[00:04:52.852]I have some pages set up with common Web Audit errors.
[00:04:57.689]I'm going to do this video a little differently than most of my videos.
[00:05:00.509]Typically, I record audio separate from the visual.
[00:05:04.048]Here, I'm just going to be sitting on my computer, talking as I works, so
[00:05:08.779]I'm typically very bad with talking and typing at the same time.
[00:05:12.218]Hopefully this runs pretty smoothly.
[00:05:14.461]Let's get into it.
[00:05:15.891]I have a page set up here with broken links.
[00:05:18.779]I'm going to just check out this "QA Test" at the bottom
[00:05:23.197]to see what Web Audit shows.
[00:05:27.943]Here in the Link Checker we can see there's two links that are broken.
[00:05:31.007]There's a link to my page /extension.unl.edu.
[00:05:36.119]Another one to a student resources page.
[00:05:40.693]Alright, so let's take a look at this page.
[00:05:43.490]Let's edit.
[00:05:46.351]I've already got this switched over from the WYSIWYG to the HTML editor.
[00:05:51.229]This first line here, we can see we have a paragraph, there's a link,
[00:05:57.085]the link closes, and then the paragraph closes.
[00:06:01.110]Same thing for this next line. Paragraph, link, link closes,
[00:06:08.933]paragraph closes.
[00:06:10.784]Now this first link here was one of the ones that Web Audit showed was broken.
[00:06:14.942]It's a link to my student resources page.
[00:06:18.329]I know I don't have a student resources page, so I can change this to something
[00:06:21.980]that I know does exist.
[00:06:25.328]Let me pull up another page. Let's open a new tab.
[00:06:31.529]I'm going to link to this page here.
[00:06:33.575]So let's say 'Image missing alt'.
[00:06:37.587]Copy that. And put that in in place of Student Resources.
[00:06:46.114]That should fix that.
[00:06:48.438]This next line, I'm trying to link to a site outside of my site.
[00:06:55.513]What's missing here is the https://
[00:07:01.541]This tells the browser that it's looking for a different site.
[00:07:05.164]Without that, if we look at the Web Audit, it's looking for
[00:07:08.332]unlcms.unl.edu/test/keith/extension.unl.edu.
[00:07:16.629]It needs to be looking for a different site, so we need that https://.
[00:07:24.947]Sometimes when I'm working on a page, I don't necessarily know where a link is
[00:07:29.478]supposed to link to.
[00:07:31.505]In this third line here we have a paragraph, here's the link, link closes,
[00:07:37.956]paragraph closes.
[00:07:39.650]You'll see too I have these <!--. That's an opening 'comment' tag.
[00:07:47.942]Then here is the closing comment tag, -->.
[00:07:50.721]What this does, is tells the browser, 'Don't display this.'
[00:07:55.740]I've done the same thing on the end tag here.
[00:07:58.799]So when we look at our page, we'll see 'Check out our student resources' -
[00:08:02.104]'student resources' will not be a link because I've commented out the link
[00:08:07.603]HTML code, and then closed the paragraph.
[00:08:14.658]So if I ever send you a page that I've been working on and I say there's a
[00:08:18.017]broken link here, I've commented out the code, this is what I've done.
[00:08:21.764]This is also useful if you find a page is broken, you're not sure where it's
[00:08:25.367]supposed to go, but you don't want to have a broken link on your page in the
[00:08:27.942]meantime.
[00:08:29.942]I'm going to go ahead and save this page.
[00:08:35.993]Let's test these links. I'm going to open them in new tabs.
[00:08:45.192]Alright, 'Image missing alt', that was the first link.
[00:08:48.764]And Nebraska Extension was the second one.
[00:08:51.812]Notice too, 'student resources' here is not a link because I commented out the
[00:08:55.472]code that caused that to be a link.
[00:09:00.913]I'm going to revert this back to an older version.
[00:09:03.946]I'm going to go to 'Revisions', I'm just going to say 'Revert', and 'Revert'.
[00:09:11.470]Now I've got it back to the initial edit of this page.
[00:09:16.115]Let me go into 'Edit'. You'll see, again, we have 'student resources', and
[00:09:19.778]extension.unl.edu.
[00:09:23.001]This was how I fixed it with the HTML editor.
[00:09:26.101]With the WYSIWYG editor, it's very simple.
[00:09:29.588]You'll just highlight the link.
[00:09:33.367]Click on 'Insert/edit link', and edit the link URL here.
[00:09:40.111]Same for this one here.
[00:09:43.279]I'll highlight, add or edit link, include that https://.
[00:09:51.673]Select update and save the page.
[00:10:04.366]It works perfectly.
[00:10:06.996]Alright, let me real quick I'm going to copy this and update the other link using
[00:10:17.425]the WYSIWYG editor.
[00:10:20.692]So I'll highlight. Make sure I have the whole link here. Highlight...and paste
[00:10:32.860]this there.
[00:10:34.820]Update and save.
[00:10:41.478]Just test to make sure that works correctly.
[00:10:44.251]It is. Now I'm going to rerun the scan for this page.
[00:10:49.109]Go to "QA Test" at the bottom.
[00:10:52.781]As I mentioned before, we can start a whole new site scan.
[00:10:56.036]We've only done the one page though, so it's probably more effecient to just
[00:10:58.409]re-scan this page. Say 'okay'.
[00:11:02.861]This will take a minute or two, and then just keep refreshing the page.
[00:11:07.884]It will give you a new 'passing/not passing' and score when the scan is finished.
[00:11:13.947]I have the benefit of video editing on my side, so I'm going to skip ahead
[00:11:17.811]to when the scan is actually complete.
[00:11:24.254]There we go. We have a passing grade on this page.
[00:11:28.735]I'm going to go back to my site.
[00:11:33.123]Let's work on this next one, 'Image missing alts'.
[00:11:38.208]So alternate text is defined by the 'alt' attribute in HTML, and this should
[00:11:43.934]describe the image.
[00:11:46.416]Let's go to "QA Test", the Web Audit score, and see what shows for this.
[00:11:54.839]Here we can see an image must have an alt attribute.
[00:12:00.938]There's also some other issues here that we'll deal with a bit later.
[00:12:06.446]Down here we also have image must have alternate text.
[00:12:10.523]Let's go back to the page.
[00:12:14.975]And edit.
[00:12:17.922]Alright, I'm already in the HTML editor.
[00:12:21.257]Here you can see we have an opening tag, 'a' for a link.
[00:12:25.896]It's referencing this image, images/east campus mall.jpg.
[00:12:31.688]We then have the image tag, which is self-closing, and then the
[00:12:36.185]end of the link.
[00:12:39.186]So this image has an 'src' tag.
[00:12:42.288]That stands for 'source', and that tells the image what to display.
[00:12:47.336]It's missing alternate text, which is the 'alt' tag.
[00:12:51.086]So we'll say 'alt=', then in quotes describe this image.
[00:13:02.541]I'm going to go ahead and save this.
[00:13:09.647]So now we've added an 'alt' attribute to this image so a screen reader,
[00:13:14.609]a web search crawler, knows what this image is.
[00:13:23.309]If you're working in the WYSIWYG editor, you want to highlight the image,
[00:13:29.987]select 'insert/edit image', and make sure this 'Image Description' field is
[00:13:35.384]filled in.
[00:13:42.226]I'm going to go ahead and run this "QA Test", the Web Audit scan,
[00:13:52.816]just to make sure there's no more errors related to the image alt.
[00:14:00.424]Alright we still have a 'no passing' grade, but let's just make sure...
[00:14:06.929]I don't see any errors related to the alt there, and we've update our
[00:14:10.863]aXe Accessibility Metric related to image alts.
[00:14:17.396]This 'bad value' error - I'll go through how to update this in another part of
[00:14:22.985]this video related to spaces within the file name.
[00:14:28.846]Alright, let's go back to the site. Go to site.
[00:14:38.625]Alright, this next one is 'links are missing discernible text.'
[00:14:43.454]I have a page with an image.
[00:14:44.653]Let's see what's going on in our Web Audit report.
[00:14:51.788]Scrolling down here...okay.
[00:14:54.107]This image is missing an 'alt' attribute.
[00:14:56.445]We've learned how to fix that.
[00:14:59.540]We also have two errors down here 'Links must have discernible text',
[00:15:02.994]and again this image is missing alternate text.
[00:15:06.645]If we're not sure what the link is, we can look at this 'fix' option over here.
[00:15:11.446]I'll open it in a new tab, and this should show me what the error is.
[00:15:19.151]Here we can see we have an opening 'a', or link. It points to this web address,
[00:15:26.288]and then it immediately closes.
[00:15:27.888]There's nothing inside this link.
[00:15:31.758]Let me close this and go back to our page.
[00:15:36.949]And let's edit.
[00:15:41.456]Alright, here's that error that we saw on the Web Audit report.
[00:15:46.963]In my experience, an error like this is usually caused by the WYSIWYG editor.
[00:15:51.346]I think it has to do with deleting the text that used to be a link.
[00:15:55.912]The WYSIWYG editor doesn't necessarily also catch the link, it just makes an
[00:16:00.289]empty link.
[00:16:02.436]In this case, since there's nothing within the link, I can go ahead and just
[00:16:06.074]delete this, or, if there's supposed to be text in here, I could add text.
[00:16:16.197]Either way, those are both valid.
[00:16:18.588]I'm going to go ahead and just delete this for my own sake.
[00:16:21.860]We also have an opening 'a' - a link, an anchor.
[00:16:28.440]'href' points to this image.
[00:16:34.066]Then we have an image tag, which self-closes.
[00:16:38.741]And then the closing tag for that link.
[00:16:43.065]But notice, this image has a source attribute - 'src', this is the image
[00:16:50.011]that's displaying - it's missing alternate text.
[00:17:04.787]So I included some text that describes the image, and describes what this link does.
[00:17:28.045]I'm going to go ahead and save. And let's run this scan again.
[00:17:44.755]Alright, it's been a few minutes, let's see if this scan is complete.
[00:17:48.541]Perfect, we have a 'P', which means this page has passed.
[00:17:54.758]Let's go back to our site.
[00:17:58.825]Alright so we just did 'links need discernible text'.
[00:18:02.391]This is what I was talking about earlier, the 'space in an image name'.
[00:18:06.101]Let's view the Web Audit report for this page.
[00:18:14.210]We have 'Bad value for attribute href' on our link.
[00:18:21.849]'Illegal character in path segment: space is not allowed.'
[00:18:26.056]So we need to do something to take care of these spaces within this filename.
[00:18:37.432]Let's edit.
[00:18:40.888]Alright, now I'm already in the HTML editor.
[00:18:45.619]I can see here the errors are here and here.
[00:18:52.349]Best practices for naming images is lowercase, short, descriptive words
[00:18:57.308]separated by hyphens.
[00:18:59.099]Here, we have them separated by spaces.
[00:19:03.761]There's a few things we could do.
[00:19:04.992]One is to say, the code for a space is %20.
[00:19:11.905]I'll copy that, paste it here as well.
[00:19:17.592]And I'll paste it here as well.
[00:19:24.813]This is an alright fix.
[00:19:27.610]Let me go ahead and save and rerun the Web Audit report.
[00:19:40.921]Okay, see, this worked.
[00:19:42.701]I replaced the spaces with '%20', and the page now passes.
[00:19:48.399]That's an okay fix, it's not our preferred fix though.
[00:19:51.345]I'm going to show you how to fix this more correctly.
[00:19:55.388]So the issue is this image was named with spaces.
[00:19:59.476]So I'm going to rename the image first.
[00:20:01.724]I'm going to go to 'Find Content', the 'File Browser', and find this image,
[00:20:08.938]'east campus mall'.
[00:20:11.037]Then I want to rename it.
[00:20:13.754]I'm going to put hyphens in here instead of spaces.
[00:20:18.887]This is best practice for naming an image.
[00:20:21.805]So now I have 'east-campus-mall.jpg',
[00:20:25.956]Instead of 'east campus mall' with spaces.
[00:20:29.976]I'll close this. Coming back here, I'll edit.
[00:20:33.408]And I'll just replace these spaces with hyphens.
[00:20:48.257]Save and rerun this Web Audit report.
[00:21:03.366]Alright, this page is still passing.
[00:21:29.609]Now in the WYSIWYG editor, the way to correct that error is to highlight the
[00:21:35.358]image, 'we'll insert/edit image'.
[00:21:42.913]I already have this renamed, but I could also rename it with the rename option
[00:21:46.794]and then select 'Insert File'.
[00:21:50.924]Make sure this 'Image Description' is filled out.
[00:21:57.972]Say 'Links to larger image.'
[00:22:01.789]And insert.
[00:22:04.126]Then I'll highlight, 'insert/edit link', browse and find that same image.
[00:22:13.780]Insert and save.
[00:22:38.144]That worked as well.
[00:22:43.921]Alright, let's move on to 'Frames Missing Titles.'
[00:22:48.097]So, I have here a Youtube embed for Market Journal.
[00:22:53.347]This embed is in an element called a frame.
[00:22:57.539]Images need alt tags, and frames need titles.
[00:23:00.702]This frame is missing a title. Let's see what's happening in our
[00:23:03.393]Web Audit report.
[00:23:10.288]We can see here, "frameborder is obsolete" and "frames must have a title attribute".
[00:23:18.962]These are both related to the YouTube embed.
[00:23:21.745]So let's see what's happening.
[00:23:24.738]I'll edit. I'm in the HTML editor.
[00:23:31.368]See here we have an iframe, it has attributes of width, height,
[00:23:37.713]source similar to an image this tells is what video to play.
[00:23:44.674]This 'frameborder' was one of the errors on our Web Audit report.
[00:23:48.876]It is obsolete. It's been removed from HTML.
[00:23:54.211]It also has a value of zero, which means it's not giving a border.
[00:23:57.333]We can go ahead and delete this.
[00:24:01.054]These are a few other attributes.
[00:24:04.474]What we're missing, though, is 'title'.
[00:24:07.872]So I'll say "title=", I'm going to say 'Market Journal Episode...
[00:24:18.039]Let's actually do this just to make sure I have the title correct.
[00:24:24.015]Episode August 9th.
[00:24:32.746]Attributes have to end with quotations as well,
[00:24:36.874]and then we have the closing tag for the iframe.
[00:24:40.310]Let's save this.
[00:24:47.357]Alright so we've given this frame a title and removed the frameborder
[00:24:50.648]attribute.
[00:24:52.700]Go to 'QA Test' and re-scan this page.
[00:25:06.809]Alright. This page passes.
[00:25:11.960]Let's go back to the site.
[00:25:17.375]Let's check out our next error, 'no p in scope'.
[00:25:21.571]Okay so here I have a page.
[00:25:23.244]It looks like it has a heading, a paragraph and an unordered list.
[00:25:27.692]Let's take a look at the Web Audit report.
[00:25:37.778]Okay, here under the HTML validator, we can see 'no p in scope but a p
[00:25:42.967]end tag seen'.
[00:25:46.163]Let's go to the page and figure out what's going on.
[00:25:52.576]Alright. I'm in our HTML editor.
[00:25:56.493]I can see here we have a heading, h2, that then closes.
[00:26:03.069]Then we have text, and an end </p> tag.
[00:26:08.148]But notice we don't have the opening <p>, so I'm going to,
[00:26:11.307]in angled brackets, add a p there (<p>).
[00:26:15.695]Looks like we then have a <ul> - an unordered list.
[00:26:18.611]This will give the bullets.
[00:26:20.465]'<ol>' is 'ordered list' which will give 1, 2, 3, 4, etcetera.
[00:26:24.723]A list item that then ends. A list item that then ends.
[00:26:30.612]And the end of that unordered list.
[00:26:32.501]So the issue was this opening <p> was missing, because we had an </p> over here.
[00:26:41.160]I'll save this.
[00:26:48.129]And rerun this Web Audit scan.
[00:26:57.773]Alright, our page is passing now.
[00:27:01.246]This was a fairly simple example.
[00:27:04.212]If you have something more complicated,
[00:27:06.369]I would use a tool like DirtyMarkup.
[00:27:08.786]I'm going to copy this, I have bookmarked here DirtyMarkup.
[00:27:16.882]Paste this here.
[00:27:18.161]In DirtyMarkup, you can see our tags are highlighted a different color.
[00:27:23.371]And if we click on them, we get an underline.
[00:27:26.869]This shows where an element opens and where it closes.
[00:27:31.703]So this <p> closes here and opens here.
[00:27:35.509]This opening tag and end tag are related as well.
[00:27:39.150]If I delete this, you'll notice this </p> has been highlighted by DirtyMarkup.
[00:27:46.687]This tells you that there's something wrong with this closing </p>.
[00:27:51.430]In this case, when I click on it it underlines, there's no <p>.
[00:27:57.369]DirtyMarkup's a very useful tool and I'll include a link to it in the description
[00:28:02.124]of this video as well.
[00:28:04.567]Alright, moving on.
[00:28:12.123]The next error that's pretty common is 'ul is not allowed as a child of ul'.
[00:28:18.767]Here we can see we have a list.
[00:28:21.582]It has sort of a sub-list, and then the list continues.
[00:28:25.869]'ul' is an element that stands for 'unordered list'.
[00:28:29.279]That gives you these bullets, dots.
[00:28:34.631]Another type of list is an 'ol'.
[00:28:36.530]That will give you 1, a, b, c, 2, 3, etcetera.
[00:28:40.406]So let's check out the Web Audit report,
[00:28:43.873]and see how this error looks.
[00:28:47.698]Yeah, here we go.
[00:28:49.236]'Element ul not allowed as a child element of ul in this context.'
[00:28:55.120]This is under the HTML validator.
[00:28:57.261]If we go to the aXe accessibility metric, we also see 'ul and ol must only
[00:29:02.521]contain li, script or template elements'.
[00:29:09.987]So let's go to the page and see what we have going on.
[00:29:16.664]Okay.
[00:29:19.448]We have our opening <ul>, then we have a line item.
[00:29:23.425]That closes.
[00:29:26.259]Another list.
[00:29:29.814]Line items that open and close.
[00:29:32.661]This closing is going to be the closing for this <ul>.
[00:29:38.221]We have more line items, that close.
[00:29:42.686]And then we have this </ul>, which closes out this...
[00:29:46.891]I'm sorry we have this closing tag which closes out this unordered list.
[00:29:52.344]Now, this unordered list is sort of a sub-list of this item.
[00:30:00.536]The issue here is that this line item opens, and then closes immediately.
[00:30:06.947]What we want...
[00:30:09.620]I'm going to cut this and I'm going to put it under the closing tag
[00:30:18.119]for this sub-list.
[00:30:22.583]This tells the HTML that this is indeed a child of this list item.
[00:30:29.540]When making sub-lists you want to keep the list item open,
[00:30:33.268]start another list, then close that list item.
[00:30:41.481]Save.
[00:30:46.624]And I'll rerun this scan.
[00:30:59.804]Alright that page is now passing because we have things nested the correct way.
[00:31:09.040]Again, keep the line item open, start a new list, end the list,
[00:31:16.921]then close the line item.
[00:31:22.496]Alright let's continue.
[00:31:31.686]Type is obsolete.
[00:31:33.315]This is also related to lists.
[00:31:35.360]The attribute 'type' is obsolete.
[00:31:38.148]Let's see what's happening on our 'QA Test'.
[00:31:45.782]Alright.
[00:31:47.024]"The 'type' attribute on the 'ul', unordered list element,
[00:31:50.814]is obsolete. Use CSS instead."
[00:31:54.628]When we looked at our frame earlier, there was a 'frameborder' attribute
[00:31:58.422]that was obsolete.
[00:31:59.871]This is the same type of issue.
[00:32:02.742]Go to the page and edit.
[00:32:07.179]And in our HTML editor, you'll notice we have <ul type="disc">.
[00:32:14.200]Now, I think this is an error that comes up from the WYSIWYG editor.
[00:32:17.785]It automatically includes 'type="disc"'.
[00:32:21.505]"Type" is obsolete and 'disc' is the default anyhow,
[00:32:25.075]so we can go ahead and just delete this.
[00:32:28.149]Looking through, none of these other opening tags have other attributes,
[00:32:33.131]so that must have been the issue.
[00:32:34.675]I'm going to go ahead and save and rerun the Web Audit report.
[00:32:51.750]Alright, this page is now passing.
[00:32:55.548]Let's go back to the site.
[00:33:01.211]Alright, duplicate IDs.
[00:33:04.562]So I have two table here.
[00:33:07.956]Let's see what our Web Audit report is saying.
[00:33:16.936]Alright we have a duplicate ID. A couple of duplicate IDs here.
[00:33:21.367]If we scroll down a bit more, our accessibility metric also shows
[00:33:25.354]the same errors, "id values need to be unique".
[00:33:30.403]So an ID is an attribute on an element.
[00:33:34.264]Let me click this 'fix' and show you real quick...
[00:33:37.623]So here we have a table header, <th>. There's a closing tag for it.
[00:33:43.871]It has an ID attribute.
[00:33:45.956]An ID attribute has to be unique for each page.
[00:33:50.335]You can use the same ID on multiple pages, but per page you can only have
[00:33:54.225]one of that ID.
[00:33:56.410]That's the error that's happening here.
[00:33:58.787]So, let's go back, see what's going on.
[00:34:04.116]Like I said I have two tables.
[00:34:06.274]The way I made this, I used IANR's Responsive Table Generator.
[00:34:12.426]I made this top table, copied and pasted the code below,
[00:34:18.497]and then just updated these headers.
[00:34:22.621]So the issue here is that both tables, table heads and other elements with IDs,
[00:34:30.561]are duplicated.
[00:34:32.672]What I'm going to do...
[00:34:35.030]Here we have the opening of this table, we need to find the closing table tag
[00:34:39.968]for this first table, which is right there.
[00:34:43.917]Now, I'm going to, just real quick, I'm going to copy this entire second
[00:34:51.699]table.
[00:34:54.471]I'm going to open up Notepad.
[00:34:58.292]Paste it here.
[00:35:03.740]This is the ID for the table.
[00:35:06.269]It is also then used as the ID for able heads, and table rows, etcetera.
[00:35:12.428]So, let's copy this here.
[00:35:16.904]Say 'edit' and 'replace'.
[00:35:20.453]This table ID is not necessarily important that it's any specific thing,
[00:35:26.699]so I'm going to just change it to...
[00:35:30.699]I'm just going to add a zero to the end of it and replace all.
[00:35:36.414]I'll select all this and copy.
[00:35:40.658]I'm going to paste it back and save the page.
[00:35:48.795]So now I changed the IDs for this bottom table
[00:35:53.199]with a quick and simple find and replace.
[00:35:58.590]Let me go ahead and rerun this Web Audit scan.
[00:36:08.614]Alright, this page is now passing because we don't have duplicate IDs.
[00:36:13.535]Another way to solve this would be if I came in here and I came through
[00:36:20.853]and just manually said, alright, let's change this to 'table',
[00:36:30.314]let's change this to something else, let's change this to something else...
[00:36:36.158]I find the find and replace method is much quicker than going through
[00:36:41.752]and manually updating every ID for every cell in this table.
[00:36:46.546]Alright, let's continue on.
[00:36:56.089]Another issue with tables... Let's see what's happening in this
[00:36:58.848]Web Audit report.
[00:37:05.178]Alright, 'element thead - table head - is not allowed as an element of table
[00:37:11.720]in this context.'
[00:37:13.237]So something is going on with the table head.
[00:37:17.611]Let's go to the page.
[00:37:20.361]Remember earlier I said that most HTML elements can have other elements
[00:37:25.898]embedded within them.
[00:37:27.539]Sometimes, we need to make sure that those elements are embedded in
[00:37:31.203]the correct way.
[00:37:32.838]So here we have a table.
[00:37:35.020]This is the opening tag for the table.
[00:37:37.265]We have a caption, which is empty.
[00:37:39.548]Then we have a table body followed by a table head.
[00:37:46.399]In this case, the table body needs to follow the table head.
[00:37:50.419]Not the other way around.
[00:37:52.160]So I'm going to go ahead and cut this.
[00:37:55.312]We have our opening table head here.
[00:37:58.248]This is table row, table headers that open and close.
[00:38:03.791]Here's the ending of that table row.
[00:38:06.193]Here's the ending of the table head, and under the ending of the table head
[00:38:10.837]we can insert table body.
[00:38:16.331]We then have rows, headers, table data.
[00:38:22.537]They all open and close in reverse order.
[00:38:27.410]Now we can see the table body closes and the table closes.
[00:38:30.060]So this should be good to go.
[00:38:31.599]Let me go ahead and save.
[00:38:37.921]And run this Web Audit scan one more time.
[00:38:48.418]Alright, by making sure that table body and table head were nested properly,
[00:38:52.863]we now have a passing grade on this Web Audit report.
[00:38:56.679]Let's go back to the site and continue working.
[00:39:03.304]Alright our next error, 'child is not allowed as a child of div'.
[00:39:08.924]Let' see how this looks in our Web Audit report.
[00:39:15.673]Alright so under our HTML validator we can see that 'element style
[00:39:20.259]not allowed as child of element div in this context'.
[00:39:25.556]Let's go back to the page and see what's going on here.
[00:39:29.158]So, I'm looking at the HTML, not the WYSIWYG.
[00:39:35.111]So here we can see we have an opening 'style' tag and a closing 'style' tag.
[00:39:40.630]This whole section is our issue.
[00:39:43.762]Now what's in this style tag is what's called CSS - Cascading Style Sheets.
[00:39:49.427]And it's used to style HTML.
[00:39:51.895]What this is saying here, is that an element with a class of 'background',
[00:39:57.334]should have a background color equal to our Husker red, okay?
[00:40:03.323]So we can see down here this div element should have a background color
[00:40:10.443]of the Husker red.
[00:40:13.666]Then, an element with the class of 'white' should have a text color of white.
[00:40:20.188]So this paragraph element has a class of 'white' which gives it the
[00:40:26.327]white text color.
[00:40:29.081]Let's go back to our page just so you can see how that looks.
[00:40:31.798]Red background, white text color.
[00:40:36.851]There's a few fixes for this.
[00:40:40.774]We can use what's called inline CSS, okay?
[00:40:44.206]So instead of doing a style, defining classes and what those classes do,
[00:40:49.731]we would remove the class from the elements and say 'style=',
[00:40:57.933]and then in quotations put our CSS.
[00:41:10.148]Do the same for this <p> element.
[00:41:13.112]We'll say 'style="color: white;"'.
[00:41:22.058]Then I'll remove the style element.
[00:41:33.797]Okay we can see this paragraph still has the red background color
[00:41:40.512]and the white text.
[00:41:42.953]Let's go ahead and run this Web Audit report again.
[00:41:52.875]Alright, so this fix worked.
[00:41:54.630]Our page is now passing.
[00:41:57.465]However, I want to show you a more appropriate way of fixing this error.
[00:42:02.914]I'm going to go ahead and revert this back to the version
[00:42:06.898]we were using before with the style element included.
[00:42:16.437]And again, this is saying that any element with class 'background' should have
[00:42:21.927]this Husker red background.
[00:42:25.195]And I showed you how to put this in as an inline style.
[00:42:29.222]The Web Developer Network has also made classes,
[00:42:33.473]so if we go to wdn.unl.edu,
[00:42:39.780]documentation, 5.0 Framework.
[00:42:44.570]Go down here to 'CSS Classes'.
[00:42:48.006]And I prefer to look at these on a single page.
[00:42:54.955]Now here, I'm going to control+f, try to find that Husker Red.
[00:43:01.936]So here we have a class, 'unl-bg-scarlet',
[00:43:06.190]that will make the background that same Husker red that this
[00:43:10.086]'background' class is doing.
[00:43:15.699]Go ahead and delete this and update this class to 'unl-bg-scarlet'.
[00:43:25.153]We can do the same for the <p> element.
[00:43:27.248]Instead of using a 'white' class that we've created,
[00:43:30.791]we can say 'class="unl-cream"'.
[00:43:36.148]These classes are part of the framework, so when the browser sees that this <p>
[00:43:41.962]has the class 'unl-cream', it will automatically make this a white color.
[00:43:46.404]Similar with this, when it sees that 'unl-bg-scarlet' is what this
[00:43:50.483]div class is, it will make the background that Husker red.
[00:43:55.320]Go ahead and save this.
[00:44:01.613]There we go.
[00:44:03.120]Let me rescan this page.
[00:44:10.982]And I'll include a link to these CSS classes in the video description
[00:44:15.512]as well.
[00:44:20.169]Alright, this page is now passing.
[00:44:22.795]Let's continue.
[00:44:31.411]Alright, let's talk quickly about color contrast.
[00:44:34.690]Color contrast is a big part of accessibility.
[00:44:37.582]We want to make sure that the foreground text has enough color contrast with the
[00:44:42.446]background so that it's legible.
[00:44:45.441]There's some tools that can help with this, I'll bring one up here quickly
[00:44:48.352]that I found.
[00:44:52.217]Here we can put in the hexadecimal reference for the color and find the
[00:44:59.996]color contrast ratio.
[00:45:02.109]I believe 4.5 is the minimum for the AA standard that we look to hit.
[00:45:12.525]Let me just make sure. Yes, 4.5 is what we're looking for.
[00:45:17.325]We want to hit this passing right here.
[00:45:20.703]As you can see, this text is fairly dark on a pretty dark background.
[00:45:26.226]Also, this grey is going to give us an error with this red for the link.
[00:45:32.993]Let me go ahead and show you what this error looks like in the
[00:45:35.558]Web Audit report.
[00:45:40.565]And this is under the aXe Accessibility Metric.
[00:45:45.054]You can see here we have three errors regarding insufficient color contrast.
[00:45:50.292]If we hit the 'fix' button, 'fix' link, we can see exactly what the issue is.
[00:45:56.295]The foreground has a color of this, let's copy this and put it into our tool
[00:46:02.108]here, the background color, let's copy that, paste it there.
[00:46:14.043]So see this only has a 1.88 color contrast.
[00:46:16.718]That's not nearly enough to be an appropriate amount of color contrast.
[00:46:20.883]So, let's view the page and edit.
[00:46:25.044]Let's see what's going on in here.
[00:46:27.938]Okay, you can see here that we have a paragraph.
[00:46:32.264]This paragraph has a class of 'unl-bg-dark-gray'.
[00:46:38.680]Similar to what I just showed with the 'style' error,
[00:46:44.021]this is a CSS class that's in the framework, and will give this
[00:46:52.452]paragraph a dark gray background.
[00:46:57.099]That's causing issues with the text in this paragraph.
[00:47:04.187]So one thing we can do is just delete this class entirely.
[00:47:08.855]I'll delete this. This should remove that dark gray background.
[00:47:16.904]There we go. That's much more legible.
[00:47:19.553]This next line here, let's take a look.
[00:47:24.360]So we have our <p>, the class of 'unl-bg-light-gray', we then have a link
[00:47:30.988]that opens and closes, then the end of the <p>.
[00:47:35.150]Now, 'unl-bg-light-gray' does not have sufficient color contrast with the red
[00:47:42.150]that's used for a link.
[00:47:44.721]So I'm going to update this to a 'lighter' gray.
[00:47:48.607]This also a class in the framework.
[00:47:50.416]It's a slightly lighter shade of grey.
[00:47:55.263]Save this.
[00:47:58.490]This background's now a bit lighter.
[00:48:01.169]Let's see if we can pass our Web Audit scan.
[00:48:10.305]Alright, looks like we are passing now.
[00:48:14.750]Let's continue on, close these other tabs.
[00:48:23.164]Alright, let's take a look at this Web Audit report.
[00:48:37.726]In the HTML validator we can see 'an end tag main was seen but
[00:48:42.649]there are open elements', and there's an unclosed element 'div'.
[00:48:49.868]Let's take a look at this code and see what's going on.
[00:48:57.767]So what that scan was telling me is that one of these divs is not
[00:49:03.150]closed properly.
[00:49:06.024]I'm going to open another tab and bring up the DirtyMarkup tool that
[00:49:10.735]I showed earlier.
[00:49:14.037]Copy this code. Paste it into DirtyMarkup.
[00:49:20.669]As I said before, we're able to click on an opening tag to see the closing
[00:49:27.119]tag and vice-versa.
[00:49:29.826]So here's the closing tag for this header 3.
[00:49:33.324]Here's the opening tag for the header 3.
[00:49:35.978]The issue is one of these div opening tags is not closed properly.
[00:49:42.849]So this one opens here, closes here.
[00:49:45.454]This one opens up here, closes down here.
[00:49:47.950]This one opens here, and closes down here.
[00:49:49.971]And this one...
[00:49:52.188]Nothing's highlighted so we're missing the closing div.
[00:49:55.236]I'll just add </div>. Close that.
[00:50:02.116]Let's copy this, paste it back into this editor and save the page.
[00:50:27.784]Alright, all our divs are now closed properly so we passed the
[00:50:30.942]Web Audit scan.
[00:50:34.108]Let's continue on.
[00:50:39.657]Alright, our last error was we were missing a closing div.
[00:50:42.822]Sometimes we can have too many closing divs.
[00:50:45.427]Let's see what's going on with this Web Audit report.
[00:50:54.216]Here we have a stray end tag 'div'.
[00:50:57.666]This is similar to the paragraph error we had earlier where there was no <p> tag
[00:51:04.820]in the scope, but an </p> tag seen.
[00:51:10.433]I'm going to edit this page.
[00:51:13.514]I'll highlight everything. Well, I'm just going to select all instead.
[00:51:21.404]Let's copy, let's open up that DirtyMarkup and paste our code in.
[00:51:30.041]And we can see when we pasted, this closing div tag highlighted.
[00:51:36.439]If we click on that we can see the blue underline.
[00:51:38.947]There's no blue underline up above to show what the opening tag for this
[00:51:43.327]end tag is.
[00:51:46.189]This one seems to close the overarching div tag.
[00:51:51.538]I'm just going to go ahead and delete this.
[00:51:54.860]I'll copy this code, and paste it back in here.
[00:52:01.915]Save and rerun the Web Audit report.
[00:52:16.782]I'll wait a few minutes then refresh the page.
[00:52:22.079]Alright and our page is now passing.
[00:52:24.866]Let's continue.
[00:52:34.399]Let's see what's happening in the Web Audit report for this page.
[00:52:41.926]In our HTML validator section we can see there's no space between attributes.
[00:52:46.711]When an element has multiple attributes, those attributes have to be separated
[00:52:51.422]by a space.
[00:52:53.304]Let's click on this 'fix' button.
[00:52:56.039]This should show us exactly what we need.
[00:52:59.138]Okay, so it looks like we have, this is the end of an attribute.
[00:53:03.924]There's no space here before the 'alt' attribute appears.
[00:53:11.623]Let's edit our page.
[00:53:17.149]I can see here image source attribute.
[00:53:21.417]That tells the image what to display.
[00:53:23.981]Alt attribute describes the image,
[00:53:26.306]but there's no space between them.
[00:53:32.120]Save and rescan the page.
[00:53:46.046]Alright adding that space cleared up the error.
[00:53:48.283]This page is now passing.
[00:53:55.422]Finally, sometimes we'll have an error where there's too many quotes within
[00:53:59.820]an attribute.
[00:54:01.135]Let's take a look at this Web Audit report,
[00:54:03.565]see what's going on.
[00:54:06.583]Okay so we have three errors here: 'no space between attributes',
[00:54:11.622]'attribute quotation mark is not allowed on image', and then
[00:54:18.352]'saw quotation mark, but expecting an attribute name.' Probably the issue
[00:54:23.912]is equals sign is missing.
[00:54:26.133]Let's go to this page and see what's going on.
[00:54:30.090]Edit.
[00:54:32.364]Okay here you can see we have a link that opens and a link that closes.
[00:54:39.126]We have one quotation, one quotation.
[00:54:41.096]So that's okay.
[00:54:42.870]Image has a source attribute.
[00:54:47.174]One quotation. One quotation.
[00:54:50.686]Then an alt attribute with a quotation, then we have two quotations here.
[00:54:55.288]So let's make this just one quotation mark and save and rescan.
[00:55:17.185]Alright this page is passing now.
[00:55:19.130]You'll notice that that one typo caused three different errors.
[00:55:23.330]Sometimes that happens with Web Audit just depending on the type of error.
[00:55:29.535]Alright if you have any questions, comments, or concerns,
[00:55:34.339]be sure to check out the Web Resources on the IANR Media webpage.
[00:55:39.482]We do have a whole section for Web Audit that shows common errors and how
[00:55:44.074]to fix them.
[00:55:46.951]And we have some more examples there that give code as well.
[00:55:53.814]You can also contact me directly.
[00:55:55.826]I'm in the directory.
[00:55:57.264]kmcguffey2@unl.edu or give me a call at 472-5629.
[00:56:03.209]Thanks for watching!

The screen size you are trying to search captions on is too small!

You can always jump over to MediaHub and check it out there.

Comments

0 Comments

Web Audit Guide

Description

Searchable Transcript

Comments icon comment

Related Channels

Comments