Video-Based Resources/Evaluation Introduction

From Education & Outreach

Purpose

  1. Introduce the core concepts of web accessibility evaluation
  2. Introduce different audiences to the most relevant WAI resources for them
  3. Help these audiences find the relevant resources on the WAI website

Objectives

  • Overall: Provide a succinct introduction and overview in video format
  • Video 1 Eval Overview: Introduce the topic and resources on accessibility evaluation
  • Video 2 Preliminary Eval (Easy Checks): Introduce how people can do preliminary evaluations themselves
  • Video 3 Selecting & Using Tools: Introduce evaluation tools and considerations for selection
  • Video 4 Comprehensive Eval: Introduce resources for comprehensive (conformance) evaluation
  • Video 5 Involving Users: Emphasize the benefits of involving users with disabilities

Primary Audience

  • Video 1 Eval Overview: Everyone interested in web accessibility evaluation
  • Video 2 Preliminary Eval (Easy Checks): People interested in doing preliminary evaluation themselves
  • Video 3 Selecting & Using Tools: People wanting to know about tools and which ones to use
  • Video 4 Comprehensive Eval: People looking for guidance on comprehensive evaluation
  • Video 5 Involving Users: Everyone involved who has not yet heard this message

Approach

Animated videos (e.g., whiteboard with concepts appearing as they are explained, illustrations of main concepts, keywords being emphasized, etc.).

All videos are relying primarily on the audio, with the visuals being only illustrative to support comprehension. As the visuals do not add more information than what is already in the audio, audio-described versions of the videos will not be needed.

Note: Colors used in illustrations need to ensure sufficient contrast

Outline (~10 minutes total)

  • Video 1: sets the overall scene and refers to other videos
    • Video 2: (Easy Checks) refers to easy (preliminary) checks
    • Video 3: (Tools) refers to tools list and selecting tools
    • Video 4: (Comprehensive) refers to WCAG-EM and Report Tool
    • Video 5: (Involving) refers to involving users in evaluation

Video 1: Evaluation Overview (~2 minutes)

This video introduces the resource Evaluating Web Accessibility Overview

Seq. Time Audio Visual
1 1-4 Evaluating web accessibility: resources overview [text on the screen] Evaluating Web Accessibility: Resources Overview
2 4-10 Evaluation helps you ensure that your websites and applications meet accessibility requirements. The word 'evaluation' appears on a plain background. We zoom out and see that the word is actually the headline of a paragraph of text (the text will not be legible to avoid distraction). The paragraph is on a web page, which we see through a magnifying glass on a computer screen. On the web page we see other components - outlines of text, images, code, etc. (similar to components illustration). The web page is one of many staggered behind, to illustrate website.
3 10-20 Ideally you evaluate regularly throughout the design and development process. This way you find errors early and avoid costly repairs later in the process. The components on the web page are moving round and change contrast (not too much movement to avoid distraction). They stop moving when they are in a position that is a 'good design' (eg. sufficient spacing and headings structure similar to design tips illustration) and the contrast makes them stand out from the background (none of the text will be legible, only outlines).
4 20-29 The W3C Web Accessibility Initiative, W-A-I, or WAI, provides free resources to help you with your evaluation. The "W3C Web Accessibility Initiative" logo appears on the screen to replace the previous 'website'.
5 29-35 "Easy Checks - A First Review of Web Accessibility" explains how you can do some checks yourself. A text box with "Easy Checks - A First Review of Web Accessibility" appears (all resource titles will be in text boxes that look similar to ensure the viewer realizes they are linked). Underneath it we see a person in front of their computer. Next to their head a light bulb pops up.
6 35-43 Even if you are new to web accessibility and not technical, these checks give you a rough idea of the accessibility of any web page. The light bulb disappears and a document appears to the side of the person. The document has the title 'checks' and a number of tiles on it (with lines indicating text instead of icons). Some of the tiles contain more text than others. As each tile is highlighted, an error icon or a checkmark icon pops up on screen.
7 43-50 WAI also maintains a "Web Accessibility Evaluation Tools List" that you can filter. A text box with "List of Web Accessibility Evaluation Tools" appears (all resource titles will be in text boxes that look similar to ensure the viewer realizes they are linked). Underneath it we see a list with icons of tools appear.
8 50-55 "Selecting Web Accessibility Evaluation Tools" explains what tools can and cannot do. A text box with "Selecting Web Accessibility Evaluation Tools" appears (all resource titles will be in text boxes that look similar to ensure the viewer realizes they are linked). Underneath it we see a computer with icons of tools (from the previous list).
9 55-66 For more experienced evaluators, WAI provides "WCAG-EM", the "Website Accessibility Conformance Evaluation Methodology". A person in front of their computer. A simplified version of the page loads, and a text box with the words "WCAG-EM - Website Accessibility Conformance Evaluation Methodology" appears in the middle of the screen. (all resource titles will be in text boxes that look similar to ensure the viewer realizes they are linked)
10 66-73 The "WCAG-EM Report Tool" helps you record the findings as you follow the methodology. We zoom closer in and see the title "WCAG-EM Report Tool" appear (all resource titles will be in text boxes that look similar to ensure the viewer realizes they are linked). Underneath it the progress bar (from the Report Tool but the text is not legible) with the various stages being highlighted.
11 73-85 To help you better understand how different users experience your website and applications, WAI provides guidance in "Involving Users in Web Projects for Better, Easier Accessibility" A screen split into 12 fields. In each field is a different colored person in front of the computer. A text box pops up that says "Involving Users in Web Projects for Better, Easier Accessibility" (all resource titles will be in text boxes that look similar to ensure the viewer realizes they are linked).
12 85-89 (continued sentence)

and "Involving Users in Evaluating Web Accessibility".

The text box is replaced by one that says "Involving Users in Evaluating Web Accessibility" (all resource titles will be in text boxes that look similar to ensure the viewer realizes they are linked).
13 89-97 With all these resources, you can learn how to check your website for accessibility and prioritize the issues you need to address first. The text box disappears, we zoom into one of the 12 fields to focus on one computer with an open website. The magnifying glass comes in over the website. We can read the text "check for accessibility". The magnifying glass disappears, and a to do list (no check boxes) appears in front of the computer. The items on the list are being moved into a different order.
14 97-102 Web accessibility: essential for some, useful for all. A computer. Round icons representing different types of disabilities jump out from the middle and arrange themselves in a semicircle above the computer.
15 102-111 For resources on evaluating web accessibility, visit w3.o-r-g/W-A-I/evaluation. [text on the screen] w3.org/WAI/evaluation Evaluating Web Accessibility (on two lines, with logos of W3C and WAI).

Video 2: Preliminary Evaluation (~1.5 minutes)

This video introduces the resource Easy Checks - A First Review of Web Accessibility.

Seq. Time Audio Visual
1 1-3 Easy checks for web accessibility. [text on the screen] Easy Checks for Web Accessibility
2 3-10 Even if you are new to web accessibility and not technical, you can check some aspects of accessibility yourself. A person sat in front of the computer with a web page open. A floating label 'new' and underneath 'not technical' appears above their head. It disappears. Some objects on the web page have a check and others a cross next to them. The icons from sequence 14 of video 1 (representing different disabilities) jump out of the computer and float above it.
3 10-20 "Easy Checks - A First Review of Web Accessibility" gives you step-by-step instructions to get a rough idea of the accessibility of any web page. The text box "Easy Checks - A First Review of Web Accessibility" comes in. An arrow comes in from the left, we follow the arrow, past the resources text box (which disappears out of the frame), until we reach a tile menu.
4 20-27 For example, a web page from your own website, from your competitor, or from suppliers you might want to work with. New scene: on the left a website appears, then another one in the middle and a third one on the right, each looking different (in terms of colors they use, layout, etc.).
5 27-36 It is not a complete evaluation of accessibility. More assessment by professionals is needed for a definitive and comprehensive evaluation. The tile menu slides to the right side of the screen. A computer appears to the left of the tile menu. On the screen is a website with several greyed out error and check mark items. As item after item is crossed out on the tile menu, the error/check mark icons turn from grey to red (error icon) or green (check mark icon). In the end everything on the tile menu is crossed out, but there are still a couple of grey error/check mark icons on the website.
6 36-41 Sometimes doing just a few of these checks can give you an indication of the overall accessibility. The red error and green check mark icons are highlighted on the website (maybe pulsate slightly in size), while other ones remain grayed out.
7 41-47 Some checks are simple. For example, looking at the title of the web page displayed in the browser window. Illustration of 'web browser' (web page in a computer window). Zoom-in and highlight the page title area of the browser title bar (with no legible text but the title area is emphasized visually).
8 47-55 You can do most of the checks using any web browser. Some checks are easier using an extension for your browser. [continuing from previous sequence] Zoom-out again to see the whole web page and the computer. A round sticker label comes in and sits at the top right corner of the computer. It reads 'any web browser'. A new icon (extension icon) appears with a loading download bar underneath it. When it is downloaded a tick appears.
9 55-60 Start your accessibility journey right now by doing some Easy Checks. The Easy Checks text box appears. Underneath, a map with a cross on the left side appears. A flag with the word "accessibility" is at the end. A dotted line starts connecting the cross with the flag.
10 60-65 Web accessibility: essential for some, useful for all. A computer. Round icons representing different types of disability jump out from the middle and arrange themselves in a semicircle above the computer.
11 65-74 For information on easy checks for web accessibility, visit w3.o-r-g/W-A-I/evaluation. [text on the screen] Visit w3.org/WAI/evaluation for more information on Easy Checks for Web Accessibility (with logos of W3C and WAI, same style as Perspectives Videos (see sequence 15 of Video 1).

Video 3: Selecting and Using Tools (~2 minutes)

This video introduces the resource Evaluation Tools Overview

Seq. Time Audio Visual
1 1-4 Tools for evaluating web accessibility [text on the screen] Tools for Evaluating Web Accessibility
2 4-10 There are software programs and online services to help you identify accessibility barriers. A box with an icon on it: tools (spanner or similar) in front of a computer. Out of the box comes a magnifying glass that moves up. As the box disappears down out of shot, a computer screen appears from above. The magnifying glass moves over the website and we can make out the word "accessibility".
3 10-17 They can save you lots of time and effort on evaluation, and can help you avoid creating new accessibility barriers. A text box is appears like a sticker that is being stuck on over the previous scene. It reads "save time". Another text box appears that reads "and effort". And finally a third one that reads "prevent accessibility barriers".
4 17-25 However, tools can't do it all. Some accessibility checks just cannot be automated and require manual intervention. Zoom in on a box. A large tool is floating out of a tool box. It looks like a more complicated device with a magnifying glass attached to it (for example with a little lamp stuck to it and a shutter). It only starts working once a person starts operating it. (as the representation of 'person' is abstract, the interaction is indicated by some semi-circles like in a wifi signal going from the person to the device).
5 25-30 Some tools guide you through the checks that cannot be automated. The scene from before with the device. A manual (or leaflet) comes out of the tool box - it says "guidance" on there.
6 30-36 Some tools check one page at a time, while others can scan entire websites. Web page being "scanned" (a red line running across the page) with bugs popping up as it is being scanned. Then a split screen and whilst we continue to see the one page scanner on the left side, on the right side the scanner bar stays stationary but numerous different looking websites flick through.
7 36-48 Tools can be integrated into different work environments. For example, into your web browser, content management system (C-M-S), and your development and deployment tools. The icon with the tool/screen in the middle. In a semi circle around it, circles pop up. One of them reads "web browser", another one "CMS", a third one "Deployment".
8 48-57 They support different roles in a project team, such as content authors, code developers, designers, and product owners. The circles disappear and new icons appear: a pen, a coding icon, a paintbrush icon and a key in front of a person icon.
9 57-60 Note that in some cases tools can provide inaccurate results. The magnifying glass from earlier over the website. The magnifying reveals a triangular exclamation mark sign.
10 60-69 So avoid relying too much on what tools say over addressing the real-life experience of website users. A number of magnifying glasses come in over the screen and obstruct the view onto the screen. There is a 'person' positioned in front of the computer. They slump a little as they visibly become disheartened.
11 69-77 "Selecting Web Accessibility Evaluation Tools" explains what tools can and cannot do, and what to look for in tools that meet your needs. The resource text box "Selecting Web Accessibility Evaluation Tools" comes in in front of a backdrop of a box labelled with the 'web tools' icon from earlier. A sign post icon comes in followed by a binoculars icon.
12 77-85 The list of web accessibility evaluation tools has filters to help you find the right tool for your particular situation. A document with the title "evaluation tools" fills the screen. As we 'scroll down', we get to the bottom of the document and see a filter icon.
13 85-93 Equipped with tools and knowledge on how to use them, you are in good shape to find accessibility barriers more efficiently. The 'person' is in view again. On one side of them, a tools icon pops up and on the other side a light bulb. The two icons merge together and as they do this form the glass of a magnifying glass. The words "accessibility barriers" are visible.
14 93-97 Web accessibility: essential for some, useful for all. A computer. Round icons representing different types of disability jump out from the middle and arrange themselves in a semicircle above the computer.
15 97-108 For information on tools for evaluating web accessibility, visit w3.o-r-g/W-A-I/evaluation. [text on the screen] Visit w3.org/WAI/evaluation for more information on tools for evaluating web accessibility (with logos of W3C and WAI, same style as Perspectives Videos (see sequence 15 of Video 1).

Video 4: Comprehensive Evaluation (~2 minutes)

This video introduces the resource Conformance Evaluation Overview

Seq. Time Audio Visual
1 1-4 Web accessibility conformance evaluation. [text on the screen] Web Accessibility Conformance Evaluation
2 4-16 Conformance evaluation determines how well your content meets specific accessibility standards, such as the "W3C Web Content Accessibility Guidelines", or "WCAG" for short. A headline "conformance evaluation". Underneath a number of bars popping up (like in an animated bar chart). When they have reached their final height, they change color - the low ones turn red, the medium ones orange, and the high ones green. We zoom in on one as it rises high and turns green. When it reaches its highest position the text "WCAG" pops up above it.
3 16-34 Often you'll want to do conformance evaluation:
  • as a final check before releasing a product
  • in order to provide information to potential purchasers of your product
  • to regularly monitor the accessibility of your website
  • before procuring a product
 The headline remains and the bars disappear. Icons pop up on screen:
  • An open box with a check mark on it
  • a round ‘i’ icon
  • a magnifying glass over a computer
  • a shopping trolley
4 34-41 (continued list)
  • and when getting started with implementing accessibility, to get a list of accessibility issues that you need to address.
 icon play button, and from there a transition to a document: a list with the title "accessibility issues" with a number of lines underneath.
5 41-54 To do effective conformance evaluation, you need expertise in:
  • accessibility standards
  • accessible web design and development
  • assistive technologies
  • and how people with disabilities use the Web.
 The words "conformance evaluation" are on a text circle in the middle of the screen. The circle 'flips around' and is now blank. It fills itself with an icon of an award ribbon. The circle flips again, and we see a paint brush and a coding icon (from sequence 8 of video 3). It flips again, and we see the disability icons. It flips a last time, we see several 'person' figures.
6 54-59 You'll probably also want to use evaluation tools to be more efficient. A box with an icon 'tools in front of a computer' (from sequence 2 of video 3). The box turns around and on the other side of the box we see a gauge. The needle moves up to the top value.
7 59-69 "WCAG-EM", the "Website Accessibility Conformance Evaluation Methodology", provides a structure for your evaluation process. A text box with the words "W3C Website Accessibility Conformance Evaluation Methodology" appears. The letters "WCAG-EM" move forward, the other letters disappear.
8 69-84 It describes a process to:
  • define the scope of your evaluation
  • explore your website assets
  • select a representative sample of web pages from your website
  • evaluate the selected sample
  • and report your evaluation findings.
 Arrows around a cogwheel (but without the clock hands in the middle). Text box elements appear one after the other. Each new one replaces the previous one:
  1. define scope
  2. explore assets
  3. select sample
  4. evaluate sample
  5. report findings
9 84-95 WCAG-EM also recommends involving real users with disabilities during evaluation, to help you address the real-life experience of your website users. A person in front of a computer. The disability icons appear one by one over the person.
10 95-104 The open source WCAG-EM Report Tool helps you follow the methodology, record the outcomes, and download a report of your evaluation. Numbered arrows, a little bit like in the Report Tool but without legible text. Then a new image: a pencil in front of a document. Finally an icon of a document being downloaded.
11 104-109 Web accessibility: essential for some, useful for all. A computer. Round icons representing different types of disability jump out from the middle and arrange themselves in a semicircle above the computer.
12 109-120 For information on web accessibility conformance evaluation, visit w3.o-r-g/W-A-I/evaluation. [text on the screen] Visit w3.org/WAI/evaluation for more information on conformance evaluation of web accessibility (with logos of W3C and WAI, same style as Perspectives Videos (see sequence 15 of video 1).

Video 5: Involving Users (~2 minutes)

This video introduces the resources Involving Users in Web Projects for Better, Easier Accessibility and Involving Users in Evaluating Web Accessibility

Seq. Time Audio Visual
1 1-4 Involving users in web accessibility. [text on the screen] Involving Users in Web Accessibility
2 4-13 Accessibility is about making your websites and applications usable by people with disabilities. That includes your customers, clients, employees, students, and others. This segment is mostly unchanged from the current video except for a minor tweak noted below.

The word "accessibility" in the middle of the screen. It fades out and in fades a computer with a website on its screen. A person is in front of the computer.

Next to the computer, the following words appear as they are spoken out:

  • customers
  • clients
  • employees
  • students

Note: the top edge of the text is aligned with the top edge of the computer.

3 13-24 Unfortunately many approach accessibility just as a checklist. This risks missing the real purpose of accessibility - the user experience. A check list moves in to the right of the screen, ‘pushing’ the person and the text next to the computer out of the picture. When we hear ‘this risks missing...’, the website on the screen crumbles and falls into a pile. This is mostly similar to the current video only with the checklist replacing the person more clearly, without the post-it sticker ‘accessibility’, and with better timing to have the crumbling happen while we hear ‘checklist’.

As we hear ‘the user experience’, we pan to the left so that the check list and computer are no longer visible (they disappear to the right), and we see 4 people (each differently colored).

4 24-42 Involving people with disabilities throughout your design and development process can be more effective and yield better results:
  • designers and developers learn how people with disabilities use the web, and understand assistive technologies and adaptive strategies they use;
 The group of people becomes smaller and is placed in center of the screen. A circle of gray icons forms around the pawns, made up of four alternating icons: a pen, a coding icon, a paintbrush icon, and a magnifying glass icon. Squiggly arrows appear and link the icons, pointing clockwise. These icons are not rotating or moving like in the current video.
circle/process in orange (before involving users).

The people ‘send out’ smaller versions of themselves towards the black arrows. The original people remain in the center of the circle. As the small versions reach the arrows, the color of the 4 icons in the cyclic process changes from gray to green and the squiggly arrows straighten out. This is synchronized with hearing ‘...more effective and yield better results’.

circle/process in blue (enriched with users is now more effective).

The circle with the icons remains on the screen without zooming in. The people in the middle (and the small versions floating into the black arrows) disappear and are replaced with a mortarboard when the word ‘learn’ is mentioned’. The mortarboard disappears and a light bulb comes in when the word ‘understand’ is mentioned.

5 41-47 (continued list)
  • the project team is more motivated when they understand how their work impacts people's lives;
 The circle of icons remains. The light bulb in the center disappears. A barometer gauge with the word ‘motivation’ written at the bottom appears. The barometer needle goes from left to right, to reach the highest level. Initially the bars on the meter are gray but turn to green when the needle passes them.
circle/process in blue with gauge labeled "motivation".
6 47-56 (continued list)
  • development is more efficient, and your products work better for more people, with and without disability;
 The barometer fades out, and an upward moving arrow (like you would see in a business presentation to indicate growth) appears.
Arrow moving exponentially upwards on x-y coordinates.

The arrow stops growing when it has reached the top of the y-axis, as the narration completes to say "more efficient".

It then fades out, and people start to appear from the center as we narrations continues to say "and your products work better ...".

People start appearing from the center of the circle towards the edges in a fluid motion.

As the narration continues, the people continue to get more (in a smooth growth, not individuals popping up randomly) and the circle of icons representing the process slowly fades away.

Number of people continue to increase in a fluid motion towards the edges, and the circle fades away.
7 56-65 (continued list)
  • your resulting products are more inclusive and reach a bigger audience, have higher customer satisfaction, and demonstrate social responsibility.
 Number of people continue to increase in a fluid motion towards the edges as the narration continues to say "... reach a bigger audience".

As the narration continues to say "have higher customer satisfaction", a five-star rating (looks like a typical widget used on many websites to rate and review things) appears above the people. The stars get filled as the narration speaks, and there is a visual emphasis when the five stars are filled.

Five-star rating appears and gets filled.

The star-rating widget disappears again, and only the crowd of many people are visible. As the narration continues to say "and demonstrate social responsibility", the group of people transition to become a globe with a heart on it.

Circular illustration of Earth/world with heart in the center.
8 65-75 "Involving Users in Web Projects for Better, Easier Accessibility" provides guidance on project planning, and throughout the design and development process. The world/heart disappears. A text box with "Involving Users in Web Projects for Better, Easier Accessibility" appears and remains while the title is being read aloud. It then moves up, like in the current video, and the design and development cycle from earlier (circular with the four icons) appears below (instead of the step-process in the current video). The process is in the color blue and includes the small people in the center, as in segment 4 (before they are replaced by the mortarboard etc.).
9 75-82 "Involving Users in Evaluating Web Accessibility" provides more specific guidance on the evaluation stage of the process. The text box disappears. A new text box with "Involving Users in Evaluating Web Accessibility" appears above the circle of icons. The next text box replaces the previous text box like in the current video, only with different visuals below. The circle of icons remains unchanged from the previous segment.

After the title is read aloud and we start hearing ‘provides more specific guidance’, we zoom into the magnifying glass icon of the process/circle.

10 82-90 Together these resources help you focus on accessibility for your website users rather than focusing on technical requirements only. Cut. The remaining part is the same as in the current video with the minor edits requested (noted below). The two text boxes with the resource names appear again (with "Web Project" appearing above "Evaluating". They merge and then reveal a person in front of the computer. On the screen, a number of green check icons and red error icons appear.

Note: the person will be in the same position as in the beginning of the video (segment 2), not touching the computer as is currently the case. The checkmarks will be adjusted in color to ensure better contrast, in line with video 4 and subsequently the other videos.

11 90-95 Web accessibility: essential for some, useful for all A computer. Round icons representing different types of disability jump out from the middle and arrange themselves in a semicircle above the computer.
12 95-106 For information on involving users in web accessibility, visit w3.o-r-g/W-A-I/involve-users. [text on the screen] Visit w3.org/WAI/involve-users for more information on involving users in web accessibility (with logos of W3C and WAI, same style as Perspectives Videos (see sequence 15 of Video 1).

Notes

  • Videos should relate to each other but not be dependent
  • Easy Checks, WCAG-EM Report Tool, and BAD are scheduled for revisions
  • Make sure screen grabs of resources can be easily replaced later on

/descriptive_transcripts

Assistive Technology Icons

Context

These icons will be shown together for a very short time, in Video 4, sequence 5 above where it says: "To do effective conformance evaluation, you need expertise in: ..., ..., assistive technologies...". (Maybe also in Video 5.) For example, here's a previous screen grab with old draft icons:

A circle with 5 icons in it.

AT1: Closed Captions

The letters "CC" in a thick square box, all in blue.

AT2: Text Resize

The letters "AA" in a tick square box, all in blue; the first "A" is slightly smaller in size and partially overlaps with the other "A".

AT3: Braille

A hand with stretched four fingers hovering over some dots, all in blue; the dots are fairly large in relation to the hand.

AT4: Keyboard

Keyboard with non-standard looking keys and wifi-type signals coming out of it, all in blue

AT5: Text Telephone

Old-style telephone receiver over a keyboard, all in blue.

AT6: Volume Control

Loudspeaker with wifi-type signals coming out of it, all in blue.

End Plate

"Evaluation Resources" centered near top in big and bold blue font; "w3.org/WAI/evaluation" center of the screen in smaller blue font; "W3C Web Accessibility Initiative" logo centered near the bottom.

Acknowledgements

This work is supported by the EC-funded WAI-Guide Project.

Retrieved from "https://www.w3.org/WAI/EO/wiki/index.php?title=Video-Based_Resources/Evaluation_Introduction&oldid=30241"