Return to Video

Using AChecker to Evaluate Web Accessibility

  • 0:02 - 0:08
    In this video you'll see how to use AChecker to check the accessibility of a Web page.
  • 0:08 - 0:13
    So to begin with go to achecker.ca
  • 0:13 - 0:21
    and click on the login link to login to the system or click on register to create an account first.
  • 0:21 - 0:27
    Enter your login information into the login form. Press the Login button.
  • 0:27 - 0:34
    Then in the Address field, enter the URL to the page that you want to evaluate.
  • 0:34 - 0:40
    Below that select from the available options, those you want to use for this evaluation.
  • 0:40 - 0:47
    You have the option to validate the HTML or the style sheets associated with the page while you're accessibility
  • 0:47 - 0:58
    evaluation is ongoing. You can also choose to show the source of the HTML along with the accessibility report.
  • 0:58 - 1:05
    You can choose to display the report guideline by guideline or line number by line number.
  • 1:05 - 1:11
    If you choose Guideline you can only choose one of the guidelines to evaluate against.
  • 1:11 - 1:20
    if you choose line number you can potentially choose multiple guidelines and combine them into a single report.
  • 1:20 - 1:28
    So in this case we'll choose view by guideline, and we'll select the default which is WCAG 2 level AA.
  • 1:28 - 1:34
    I'm going to evaluate the atutor.ca site, which is already pretty accessible.
  • 1:34 - 1:43
    I've purposely removed the alt text associated with the ATutor logo up here in the top left corner.
  • 1:43 - 1:51
    So if we click on "Check It", it grabs the HTML of that page, runs it through the evaluator
  • 1:51 - 1:55
    and generates a report that looks something like this.
  • 1:55 - 1:58
    So as you can see it's identified one known problem.
  • 1:58 - 2:10
    And that known problem is "Image used as an anchor is missing valid alt text. "
  • 2:10 - 2:20
    So this is the ATutor logo, as you can see there is no alt text associated with it.
  • 2:20 - 2:26
    So to fix known problems, you have to actually edit the HTML of the page that's been evaluated.
  • 2:26 - 2:32
    So we'll do that. We'll go to our HTML, this is it here.
  • 2:32 - 2:40
    We see that there is the alt attribute for the image that it's referring to.
  • 2:40 - 2:47
    So we can enter the word ATutor as alt text.
  • 2:47 - 2:50
    and save that.
  • 2:50 - 2:59
    and now we go back to the evaluation and we run it again. So in this case it will come back with all of
  • 2:59 - 3:03
    the known problems now resolved.
  • 3:03 - 3:12
    so now we need to look at the likely and potential problems, so these require a human to make a decisions,
  • 3:12 - 3:18
    because AChecker can't determine with certainty whether they're actual problems or not. So we click
  • 3:18 - 3:27
    on likely problems, and we see that it's identified that there's a paragraph element that
  • 3:27 - 3:34
    might be misused, that might be being used to produce a header.
  • 3:34 - 3:41
    So you answer the question, "Should this text be marked up as a header. " You look over the HTML
  • 3:41 - 3:49
    that it's identified as a potential problem. And you see that these are all date, so none of them actually
  • 3:49 - 3:57
    require a header. So to pass can we answer "Text is not a header, current markup is okay?"
  • 3:57 - 4:05
    Yes we can. So we choose pass for all of those. and click on "Make Decisions."
  • 4:05 - 4:11
    So that saved successfully. Now you can see that there are no known problem, and no likely problems.
  • 4:11 - 4:17
    Finally we need to resolve the potential problems.
  • 4:17 - 4:21
    So we have two potential problems listed here. There are actually many more than that
  • 4:21 - 4:27
    that we have to go through and confirm that they are not actually barriers.
  • 4:27 - 4:32
    So I've done those ahead of time here. In this case we've got two images that
  • 4:32 - 4:37
    it's identified as potentially needing a long description.
  • 4:37 - 4:43
    So the question it asks, "Does this image require a long description, and if so is the long description
  • 4:43 - 4:47
    properly marked." So looking at these images, these are two fairly small images.
  • 4:47 - 4:52
    First one ATutor logo is fine with just a single word "ATutor"
  • 4:52 - 5:03
    The second one which is the RSS feeds logo, has short alt text here which sufficiently describes it.
  • 5:03 - 5:11
    so it doesn't need a long description either. So to pass, "Image does not require a long description
  • 5:11 - 5:14
    or the long description has been provided."
  • 5:14 - 5:18
    So we'll choose pass, and resolve those.
  • 5:18 - 5:27
    And now you can see that there are no known, likely or potential problems remaining.
  • 5:27 - 5:35
    So, you can also see that it's generated the seal to confirm that the site conforms with WCAG 2 level AA.
  • 5:35 - 5:46
    You can now take the HTML that's generated, copy it. And, paste it into the page that you evaluated.
  • 5:46 - 5:50
    So in this case we're going to open up the footer of that particular page,
  • 5:50 - 6:01
    and we're going to paste that right at the very bottom of the page. And we will save that.
  • 6:01 - 6:13
    And if we go back to ATutor now, you'll see down at the bottom of the page, right about here
  • 6:13 - 6:20
    the seal will be inserted... there you go.
  • 6:20 - 6:27
    But what happens is because the page has now changed, and there's some new HTML inserted, it's going to
  • 6:27 - 6:35
    cause AChecker to recognize that and ask you to answer a couple more questions
  • 6:35 - 6:39
    to ensure that what you just inserted is also accessible.
  • 6:39 - 6:47
    So as you can see there are 7 potential problems because of the change in the HTML.
  • 6:47 - 6:53
    So you need to go through and resolve those. So in this case again, does it need a long description,
  • 6:53 - 7:02
    No... and so on. I'll just go through these quickly and resolve them all.
  • 7:05 - 7:07
    three
  • 7:08 - 7:09
    four
  • 7:11 - 7:14
    five
  • 7:23 - 7:24
    six
  • 7:29 - 7:30
    and seven
  • 7:30 - 7:37
    and we make those decision, and now you can see that the conformance seal has been reissued again.
  • 7:37 - 7:45
    So now the evaluation is complete. We can logout.
  • 7:45 - 7:52
    And if we go back to our page that we evaluated and reload it.
  • 7:52 - 7:59
    Now the AChecker logo can be clicked on to bring up the original review, so that when people
  • 7:59 - 8:05
    come to your web site they can see that the accessibility of the site has been reviewed.
  • 8:05 - 8:10
    So there you go. There's the conformance seal that was issued.
  • 8:10 - 8:17
    If they wish they can go through the likely problems and see the decisions that were made.
  • 8:17 - 8:19
    like that
  • 8:22 - 8:30
    So this can also be used by site developers, to help monitor web sites as content changes.
  • 8:30 - 8:37
    As new content or information is entered into the page, they can just click on the logo at the bottom
  • 8:37 - 8:45
    of it to be sure that is hasn't introduce any new accessibility barriers.
  • 8:45 - 8:51
    So those are the basics of doing an accessibility evaluation using AChecker.
Title:
Using AChecker to Evaluate Web Accessibility
Description:

AChecker can be used to test Web pages to ensure they conform with various international accessibility standards, and that pages are accessible to people with disabilities. This video describes how to evaluate the accessibility of a Web page.
more » « less
Video Language:
English
Duration:
08:52

English subtitles

Revisions Compare revisions

Our website uses cookies for analysis purposes.