Accessible

Web

Design

Technology

Training

MSU IT

DOCUMENT INFORMATION

AUTHOR

Todd Ring – IT Services Technology Training

James Jackson - UARC

Mack George – UARC intern

Phil Deaton – UARC Intern

Jo Silsby – IT Services Technology Training

REVISIONS

Revision 1.0 11/21/2014

Revision 1.1 12/19/2014

Revision 1.2 10/27/2015

Version 1.2 | P a g e 3

TABLE OF CONTENTS

DOCUMENT INFORMATION ................................................................................................................................................. 2

AUTHOR..................................................................................................................................................................................... 2 REVISIONS .................................................................................................................................................................................. 2

ABOUT THIS COURSE ........................................................................................................................................................... 4

COURSE DESCRIPTION .................................................................................................................................................................... 4 COURSE PREREQUSITES ................................................................................................................................................................. 4 COURSE OBJECTIVES ..................................................................................................................................................................... 4

LESSON 1: WCAG 2.0 GUIDELINE OVERVIEW........................................................................................................................ 5

INTRODUCTION ............................................................................................................................................................................ 5 TOPIC A – A LOOK AT PERCEIVABLE ................................................................................................................................................. 6 TOPIC B – A LOOK AT OPERABLE ...................................................................................................................................................... 7 TOPIC C – A LOOK AT UNDERSTANDABLE .......................................................................................................................................... 8 TOPIC D – A LOOK AT ROBUST ....................................................................................................................................................... 9 TOPIC E – A LOOK AT TECHNIQUES ................................................................................................................................................ 10 LESSON WRAP-UP ...................................................................................................................................................................... 12

LESSON 2: DOCUMENT STRUCTURE ................................................................................................................................... 13

INTRODUCTION .......................................................................................................................................................................... 13 TOPIC A – HEADING STRUCTURE ................................................................................................................................................... 14 TOPIC B – FORMS STANDARDS ..................................................................................................................................................... 15 LESSON WRAP-UP ...................................................................................................................................................................... 18

LESSON 3: KEYBOARD ACCESSIBILITY ................................................................................................................................. 19

INTRODUCTION .......................................................................................................................................................................... 19 TOPIC A – KEYBOARD NAVIGATION ................................................................................................................................................ 20 TOPIC B – KEYBOARD TRAPS ........................................................................................................................................................ 22 TOPIC C – IMPROVING KEYBOARD ACCESSIBILITY .............................................................................................................................. 23 LESSON WRAP-UP ...................................................................................................................................................................... 24

LESSON 4: TEXT ALTERNATIVES .......................................................................................................................................... 25

INTRODUCTION .......................................................................................................................................................................... 25 TOPIC A – WORKING WITH IMAGES ................................................................................................................................................ 26 TOPIC B – WORKING WITH VIDEO AND AUDIO .................................................................................................................................. 29 LESSON WRAP-UP ....................................................................................................................................................................... 31

LESSON 5: COLOR AND VISION ........................................................................................................................................... 32

INTRODUCTION .......................................................................................................................................................................... 32 TOPIC A – WORKING WITH COLOR ................................................................................................................................................. 33 TOPIC B – WORKING WITH CONTRAST RATIO .................................................................................................................................... 35 TOPIC C – RESIZING TEXT ............................................................................................................................................................. 36 LESSON WRAP-UP ...................................................................................................................................................................... 37

APPENDIX A – WEBSITE REFERENCE ................................................................................................................................... 39

APPENDIX B – KEYBOARD NAVIGATION ............................................................................................................................. 40

Version 1.2 | P a g e 4

ABOUT THIS COURSE

COURSE DESCRIPTION

This course is designed for individuals who are getting started in the area of accessibility for web design.

This class is designed to be a hands on class with active participation from the students. We will not be creating a web page in this class but we will look at some existing pages to find issues and then look at correct pages and see the difference accessibility makes.

This viewing will be completed with an explanation of different WCAG 2.0 guidelines in the hopes that you will begin to understand how to interpret the guidelines and then apply them to your web site coding. This is not a coding class. We will not be creating web pages or writing code in this class. We will not be covering ARIA (Accessible Rich Internet Applications) but you may hear the term mentioned.

We will also be installing and using a few applications to help us in our quest to test accessibility on some of the pages.

WCAG 2.0 consists of 4 principles, 12 guidelines, and 61 Success Criterial. Of the 61 Success Criteria, there are 38 that are A and AA.

COURSE PREREQUSITES

To get the most out of this class, you should have an understanding of the following

A basic understanding of HTML or HTML5

Introduction to Web Accessibility (online from D2L)

COURSE OBJECTIVES

The course objective that we will accomplish in the course are:

Acquire a basic understanding of the WCAG 2.0 Guidelines

Acquire a basic understanding of using a screen reader (NVDA)

Acquire an understanding of the Color Contrast analyzer tool

Version 1.2 | P a g e 5

LESSON 1: WCAG 2.0 GUIDELINE OVERVIEW

INTRODUCTION

In this lesson we will explore the WCAG 2.0 Guidelines from the W3C web site.

We will look at each of the four principles that are required to be reviewed and adhered to in making sure that your web pages are accessible.

The four principles are broken down using the POUR analogy, which is:

1. Perceivable 2. Operable 3. Understandable 4. Robust 5. Techniques

LESSON TIME

30 minutes

TOPICS TO BE COVERED

What are the four main areas of WCAG 2.0 guidelines

LEARNING OBJECTIVES

Explore the WCAG 2.0 guidelines on the web

Review the requirement criteria

To be able to find how to meet the required criteria

Version 1.2 | P a g e 6

TOPIC A – A LOOK AT PERCEIVABLE

Perceivable is the first principle that we will explore. Perceivable states that information and user interface components must be presented to users in ways they can perceive. So this area is all about perception. Users with impairments must be able to perceive or get as close to the same experience as those without impairments.

Perceivable contains four guidelines. Each of these four guidelines has success criteria. These success criteria total of 22. We will not be looking at all of them in the course, just a few to get you started on your way to accessibility.

Let go to the W3C web site

1. Navigate to the W3C WCAG 2.0 web site at http://www.w3.org/TR/WCAG20/ 2. Scroll down to the Table of Contents 3. Click on Perceivable 4. Read the Principle 1: Perceivable 5. Read Guideline 1.1 6. To the right in the small box click on How to Meet 1.1.1 (right click to open this link in a

new tab) 7. Take a quick view of the information 8. Click on the back button 9. To the right in the small box, click on Understanding 1.1.1 10. Take a quick view of the information 11. Click on the back button

As you scrolled down the web page, you should see all the guidelines and success criteria for principle 1 Perceivable.

You should notice that some of the success criteria state in parenthesis Level A, Level AA, and Level AAA. This is a conformance level for WCAG 2.0. Level A is very minimal requirements while level AAA is maximum. At MSU we are interested in achieving conformance Level AA. This means that we must first meet Level A and then Level AA.

Version 1.2 | P a g e 7

TOPIC B – A LOOK AT OPERABLE

The second principal is Operable. This principal states that the user interface components and navigation must be operable.

This means that we must be able to operate and navigate through the web site without any trouble whether we are using a mouse, keyboard, or some assistive technology device.

Operable has four guidelines with a total of 20 success criteria.

Let’s look at Operable:

1. Scroll further down (or up if necessary) until you see Principle 2: Operable 2. Make note of each of the guidelines 3. Make note of the success criteria 4. Notice that for each guideline and success criteria there is a box to the right with help on

how to meet the guideline and how to understand the guideline 5. Scroll down to Principle 3: Understandable and stop

Version 1.2 | P a g e 8

TOPIC C – A LOOK AT UNDERSTANDABLE

Principle 3 is Understandable. This principle states that information and the operation of the user interface must be understandable. This means that the operation of the interface should make sense to someone on how it is supposed to work.

Have you ever been on a website and thought to yourself, where do I begin? Where is the navigation for this site? Where is the main content? If so, then that site was not understandable.

Understandable has 3 guidelines with a total of 17 success criteria.

Let’s take a look at Understandable

1. Take note of the main white background for the Principle 2. Notice the blue background for each of the main guidelines 3. Notice the separating line within each of the main guidelines. These separation are the

levels of A, AA, and AAA 4. Scroll down to Principle 4: Robust and stop

Version 1.2 | P a g e 9

TOPIC D – A LOOK AT ROBUST

Robust is the fourth and final Principle. It has only one guideline and two success criteria.

Robust is about future proofing you web pages. Making sure that they will work in the future with enhancements in the browsers.

Let’s take a look at Robust

1. Take note that within the text of the success criteria, there are hyperlinks. 2. These hyperlinks will take you to a glossary of terms to better help you understand what

the word or words mean in this context. 3. Stop here but do not close this web page

***** Mention something about ARIA here and that we are not going to look at ARIA in this course

Version 1.2 | P a g e 10

TOPIC E – A LOOK AT TECHNIQUES

Sometimes it may seem like a daunting task to figure out how to make something accessible. The W3C has come up with a list of techniques to help us accomplish that task. These techniques are informative only, which means that they are not required nor should they be used as a standalone document. These techniques are to be used hand in hand with the WCAG 2.0 guidelines. for each success criteria within each guideline, there is a link to "understanding this success criteria" along with a link on "how to meet the success criteria". The techniques are intended to be used along with the information contained in the "how to meet" section of the success criteria.

There are several categories of techniques. These categories are used to group together techniques that will help with the same type of objects. The categories are:

General Techniques (206) HTML and XHTML Techniques (97) CSS Techniques (30) Client-side Scripting Techniques (38) Server-side Scripting Techniques (5) SMIL Techniques (14) Plain Text Techniques (3) ARIA Techniques (21) Flash Techniques (36) Silverlight Techniques (35) PDF Techniques (23)

There is also a list of common failues (93). Let's take a look at this page.

1. Navigate to http://www.w3.org/WAI/GL/WCAG20-TECHS/ 2. Scroll down to the Table of contents 3. Review all the categories first 4. Scroll down to G1, right click and choose open in new tab 5. Notice under the Applicability section, it lists the success criteria and the

"understanding" and "how to meet" links for easy review. 6. Below the Applicability section you have the Definition Section, some

Examples, related techniques and Tests. The tests are designed to make sure that this method is working as it should.

7. Click back to the original techniques tab in the browser. 8. Review a few more techniques from different sections.

Version 1.2 | P a g e 11

Now that we have looked at the techniques W3C provides us to accomplish the accessibility, in the next lesson we will be looking at Document Structure for accessibility.

Version 1.2 | P a g e 12

LESSON WRAP-UP

In this lesson we took a look at the W3C website of the WCAG 2.0 Guidelines.

We explored how to read and get help with understanding each of the guidelines and success criteria.

In the next lesson we will explore in more depth some of the specific success criteria of both Perceivable and Operable.

Version 1.2 | P a g e 13

LESSON 2: DOCUMENT STRUCTURE

INTRODUCTION

In this lesson we will look at three different success criteria that are associated with document

structure. We will also listen to a web page to see how it sounds to someone with low or no

vision. We will use the Assistive Technology tool called NVDA. NVDA stand for NonVisual

Desktop Access.

LESSON TIME

45 minutes

TOPICS TO BE COVERED

Heading structure

Form standards

LEARNING OBJECTIVES

To understand the importance that headings play in the navigation of a document

To understand the importance of form elements having correct syntax and labels

Version 1.2 | P a g e 14

TOPIC A – HEADING STRUCTURE

In working with the heading structure of web documents, today we will look at three relevant success criteria.

1.3.1 Information and Relationships (Level A)

2.4.1 Bypass Blocks (Level A)

2.4.6 Headings and Labels (Level AA)

We will take a look at these standards on the WCAG 2.0 web site, watch a short video, and then see how these success criteria relate.

1. Scroll up until you find Guideline 1.3 2. Read the success criteria for 1.3.1

Let’s watch the video at https://www.youtube.com/watch?v=AmUPhEVWu_E

What does this tell us about the document structure?

Without headings, the page would be harder to navigate

With headings, we can use the H key to move from heading to heading

What is important about headings?

Headings should create a structural outline of the document and the content o Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 3 (h3) Heading 2 (h2)

Heading 3 (h3) Heading 2 (h2) Heading 2 (h2)

Heading 3 (h3)

Every page should have one heading 1’s (h1) in HTML4 and XHTML

If using HTML5 then multiple headings are allowed one for each section or article tag1

This same information applies to Word Documents and PDF’s

In the next section, we will examine success criteria that is relevant to forms.

1 For more information on HTML5 and multiple H1’s read the article The Truth about multiple h1 tags in the HTML5 era. (http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824)

Version 1.2 | P a g e 15

TOPIC B – FORMS STANDARDS

When working with forms on web pages, there are several guidelines and success criteria that apply. We want to make sure that each field on the form is properly related to its label. Also if there are errors, we need to identify them and point it out to the user.

These are some of the relevant success criteria for forms:

1.3.1 Information and Relationships (level A)

3.3.1 Error Identification (Level AA)

3.3.2 Labels or Instructions (Level A)

3.3.3 Error Suggestion (Level AA)

3.3.4 Error Prevention (Level AA)

4.1.2 Name, Role, Value (Level A)

We are going to take a look at a site called Accessible University. This site has two parts to it. An inaccessible page and an accessible page. We are going to look at each one in turn to see how these success criteria make a difference between non-accessible and accessible.

1. Navigate to http://www.washington.edu/accesscomputing/AU/ 2. Look at the inaccessible home page first 3. Start NVDA

a. In the desktop folder open the folder named software b. Double click on NVDA

4. Insert you ear phones into the headphone jack on the computer or listen to the overhead

5. Go back to the Access University inaccessible home page 6. Click in the field that says Name 7. Notice NVDA tells you there is an input box (edit) but does not tell you what field it is 8. Press the tab key and listen to the speech from NVDA 9. Keep pressing the tab key until you get down to the checkboxes 10. Press the tab key again several times and listen to what NVDA is saying 11. You’ll notice it tells you there is a checkbox not checked but again does not tell you

what the checkboxes referring to

Question: What are some of the issues with filling in this form if you have low vision or no vision?

Now let’s take a look at the accessible page and see what a difference it makes

1. Click the back button on the browser 2. Select the accessible home page 3. Click in the name field 4. NVDA should tell you what field it is your filling it 5. Tab through the rest of the fields 6. NVDA tells you the name of each of the fields as you get to them 7. Now tab through the checkboxes 8. NVDA tells you would each of the checkboxes are

Notice the difference between the non-accessible and the accessible pages?

Version 1.2 | P a g e 16

This is why we use proper HTML markup to identify and set labels for each of the input fields.

Some recommendations when creating forms

Use semantically (with meaning) appropriate form elements whenever possible

Use the field set and legend tags to group and label related elements

Don’t rely on symbols and color to communicate meaning

If you need to create custom form elements find a way to effectively communicate their name, role, (e.g., with ARIA)

Let’s look at the code for this form (this is just the form code not the entire page)

<form action="#" method="post" onsubmit="return validate(this)">

<div class="required">

<label for="name">Name: (required)</label><br/>

<input id="name" type="text" name="name" required/>

</div>

<div class="required">

<label for="email">Email: (required)</label><br/>

<input id="email" type="text" name="email" required/>

</div>

<div>

<label for="city">City:</label><br/>

<input type="text" name="city" id="city"/>

</div>

<div>

<label for="state">State/Province:</label><br/>

<input type="text" name="state" id="state"/>

</div>

<div>

<label for="zip">Zip/Postal Code:</label> <br/>

<input type="text" name="zip" id="zip"/>

</div>

<div>

<label for="country">Country:</label><br/>

<input type="text" name="country" id="country"/>

</div>

<fieldset id="majors">

<legend>Desired major(s):</legend>

<div class="major">

<label for="cs">Computer Science</label>

<input type="checkbox" name="major_cs" id="cs"/>

</div>

<div class="major">

<label for="eng">Engineering</label>

<input type="checkbox" name="major_eng" id="eng"/>

</div>

<div class="major">

<label for="eco">Economics</label>

<input type="checkbox" name="major_econ" id="eco"/>

</div>

<div class="major">

<label for="phy">Physics</label>

<input type="checkbox" name="major_phy" id="phy"/>

</div>

<div class="major">

Version 1.2 | P a g e 17

<label for="psy">Psychology</label>

<input type="checkbox" name="major_psy" id="psy"/>

</div>

<div class="major">

<label for="spa">Spanish</label>

<input type="checkbox" name="major_sp" id="spa"/>

</div>

</fieldset>

<div id="captcha">

<h2>Security Question</h2>

<label id="captcha_label" for="captcha_answer"></label>

<input type="text" id="captcha_answer" name="captcha_answer"

required>

</div>

<div>

<input type="submit" name="submit" value="Submit" />

</div>

</form>

Version 1.2 | P a g e 18

LESSON WRAP-UP

In this lesson we looked at the importance of using headings for documents. We also looked at why it is necessary to properly markup a form with the correct semantic elements.

In the next lesson we will look at keyboard accessibility.

Version 1.2 | P a g e 19

LESSON 3: KEYBOARD ACCESSIBILI TY

INTRODUCTION

In this lesson we will examine using the keyboard to navigate around a webpage. We will take a look at what is a keyboard trap. And finally will look at how to improve accessibility in using the keyboard.

LESSON TIME

45 minutes

TOPICS TO BE COVERED

Keyboard navigation

Keyboard traps

Improving accessibility

LEARNING OBJECTIVES

To understand how to navigate a webpage with a keyboard

To have an understanding of what a keyboard trap is

To review ways of improving accessibility

Version 1.2 | P a g e 20

TOPIC A – KEYBOARD NAVIGATION

Keyboard navigation is one way that persons with fine motor disabilities navigate around a webpage. They cannot use a mouse to get around the webpage so they are dependent upon a keyboard or some other assistive technology device. Most all assistive technology devices use the standard keyboard commands.

In this topic we will return to Accessible University and try to navigate around the inaccessible webpage and see what the issues are, then we will use keyboard to navigate around the accessible webpage and see what difference it makes.

Something to note is that only links, buttons, and input fields typically get focus. This means that the tab key will move to the next focusable item.

Let’s get started

1. Go back to the Accessible University web site 2. Go to the inaccessible web page 3. Click in the address bar and press the tab key 4. Where are you? 5. Press the tab key 6. Look in the lower left corner and you will see some of the links to where you are 7. Keep tabbing and you will make it to the form 8. Tab through the form until you get to the submit button

What conclusions can you make of this page?

You can’t tell where you are on the page.

Now let’s look at the accessible page.

1. Switch to the accessible page in the browser window 2. Click in the address bar 3. Press tab 3 times, you should now see that you are in the main navigation 4. Use the down arrow or right arrow to move through the navigation 5. Pressing tab again takes you to the links 6. Continue pressing tab until you get to the submit button

What is different about this page?

The relevant success criteria for navigation using the keyboard are:

2.1.1 Keyboard (Level A)

2.4.3 Focus Order (Level A)

2.4.7 Focus Visible (Level AA)

Version 1.2 | P a g e 21

Success criteria 2.4.7 is focus visible. Recall on the inaccessible page that we could not see where we were each time that we pressed the tab key? On the accessible page we could see each tab stop. This is accomplished by using the focus attribute in the CSS like this:

a:hover, a:focus, a:active { color: white; background-color: black; }

notes on the three attributes2 o hover works for the mouse o focus works for Chrome and Firefox o active works for IE

For information on different version of IE, check out the web site modern.ie at https://www.modern.ie/en-us.

2 Active works for IE 7 and above. Focus doesn’t work for IE 8 but work in IE 9 and Above.

Version 1.2 | P a g e 22

TOPIC B – KEYBOARD TRAPS

In this topic we will discuss the meaning of a keyboard trap and visit a web page that has a keyboard trap to see what it is like.

A keyboard trap is defined in this way. As I am tabbing through the content using the keyboard and suddenly I cannot tab to the next item. This happens frequently with Iframes and video players. Bottom line, if I get stuck in an endless loop and cannot get out, I have fallen into a keyboard trap.

You may notice that in different browsers you will have different results when it comes to keyboard traps. A special note to Firefox is that you can use shift-tab to move backwards and get out of the keyboard trap, however you will not be able to move forward past the trap.

Let’s start by looking at a page that currently has a keyboard trap.

1. Open a new browser window and go to http://4h.msue.msu.edu/ 2. Tab several times to get to the first video under 4-H View 3. Notice how the title is highlighted 4. Then the share is highlighted 5. Then the video to play is highlighted 6. Press enter to play the video or press tab again 7. If you play the video, the controls will show up and you can tab through them 8. If you press the tab again (not playing the video) you will see that as you keep tabbing

the same items are shown again and you do not and cannot move to the next item on the page. If you did play the video you are stuck cycling through the controls and cannot get out or continue on the page

9. This is a keyboard trap

The associated success criteria for keyboard traps is:

2.1.2 No Keyboard Trap (Level A)

Version 1.2 | P a g e 23

TOPIC C – IMPROVING KEYBOARD ACCESSIBILITY

There are several things that we as developers can do to improve keyboard accessibility.

These are:

To use standardized HTML and CSS

Ensure correct document structure

Create tab indexes where necessary – do not overdo it here

By following these simple rules, you will not only improve the use of the keyboard on a web page but you will also improve the general structure of the web page itself.

Version 1.2 | P a g e 24

LESSON WRAP-UP

In this lesson we practiced how to navigate around a web page with a keyboard, discussed and viewed a keyboard trap, and discussed several ways to improve the use of keyboard navigation on a web page.

In the next lesson we will examine Text Alternatives and how they impact accessibility.

Version 1.2 | P a g e 25

LESSON 4: TEXT ALTERNATIVES

INTRODUCTION

In this lesson we will examine text alternatives. A text alternative is a replacement for something that otherwise must be seen to understand. An image or picture is one of the types of objects that would need a text alternative.

Persons with visual impairments cannot see the screen and therefore cannot see a picture or video. This is where the text alternative comes in. It is a way to describe what the picture is or to have text being displayed (that a screen reader can read) displayed on the screen.

LESSON TIME

45 minutes

TOPICS TO BE COVERED

Relevant WCAG 2.0 standards

Working with images

Working with video and audio

LEARNING OBJECTIVES

To understand the guidelines and success criteria related to alternate text

To understand the guidelines and success criteria of captioning

To gain some understanding of what video description is

Version 1.2 | P a g e 26

TOPIC A – WORKING WITH IMAGES

There are two types of images that are placed on a web page. First are those images that are there just for looks. They do not mean anything and just fancy up the web page. The second type is an image that has some meaning associated to it that aligns with the content on the page. When either of these images are present, we must follow the relevant success criteria. These success criteria are:

1.1.1 Non-text Content (Level A)

1.4.5 Images of Text (Level AA)

Let’s review the first one

1. Navigate to http://www.w3.org/TR/WCAG20/#text-equiv 2. Read the 1.1.1 Non-text Content: statement 3. Read the six bullets below it. 4. Click on Understanding 1.1.1 on the right side of the page

Now let’s look at some images and see what the text alternative should be

Image 1

What is a valid alternate text for this image?

A. Image of George Washington B. George Washington, the first president of the United States C. Nothing (empty alt text, alt=””) D. George Washington

The correct answer is D, because this image does not have a label but the following paragraph gives more detail about the context of the image.

The easiest way to meet this requirement is by using the HLTM guide H37. H37 says to use the alt attribute on image elements. i.e. <img src=”” alt=”” />.

Version 1.2 | P a g e 27

Image 2

What is a valid alternate text for this image?

A. George Washington B. Nothing (empty alt text, alt=””) C. Image D. The image does not need an alt attribute

The correct answer is B, because the image here is purely decorative. The paragraph under the image states what the image is. Note D is incorrect because all images need to have an alt attribute.

Image 3

What is a valid alternate text for this image?

A. Products B. Link to Products C. The image doesn’t convey content so alt=”” is sufficient

The correct answer is A because this image is part of a navigation so it contains a link so a simple name for the link is all that would be required of the alt attribute.

Version 1.2 | P a g e 28

Image 4

What is a valid alternate text for this image?

A. Handshake B. Businessmen shake hands to complete a contract C. Not content so alt=”” will suffice D. We guarantee our professional service

The correct answer is C. For this image you have to think about the reason for the image. The paragraph explains what is happening and the image is only for visual candy. Therefore since the image does not add anything additional to the page, alt = “” is what is needed here.

Some things to remember about images:

Image purpose and information should be conveyed through text alternatives

Decorative images should have a null alt attribute (alt=””) or be styled will CSS as a background image

Alt text should not contain redundant information. i.e. do not use “picture of” or “image of” as part of the alt attribute

In the next topic we will take a look at another non-text component that is popular on web pages, video.

Note: If an image is also a link, the alternate text should describe the purpose of the link and not the image itself.

Version 1.2 | P a g e 29

TOPIC B – WORKING WITH VIDEO AND AUDIO

With the popularity of the web being able to do so many thing these days, showing a video or having an audio podcast is quite common. When we have these components on our pages there are some things that we need to keep in mind when it comes to the accessibility portion of those items.

Persons with visual and/or hearing impairments will not be able to view or listen to these components on the web. WCAG 2.0 provides a couple of success criteria that address these components. They can be found at http://www.w3.org/TR/WCAG20/#media-equiv and are:

1.2.1 Audio-only and Video Only (Level A)

1.2.2 Captions (Level A)

1.2.5 Audio Descriptions (Level AA)

Let’s examine these success criteria.

1. In your browser go to http://www.w3.org/TR/WCAG20/#media-equiv 2. Read 1.2.1 and 1.2.2 3. Notice that these rules apply to Prerecorded audio and video only

Let’s watch the beginning of this video with captions

1. Navigate to http://twtcert.tlt.psu.edu/videos/sagarra/ in a new browser window 2. Click on play 3. Towards the right of side of the video on the tool bar click on CC (Closed Caption), this

will turn it on. 4. Turn the volume all the way down 5. Can you still tell what is being said? 6. Just for fun, tab through the controls 7. Can you see a problem with this video?

Captions are an important part of video these days. There are several ways to create captions but we will save that for a later class. For now using a video tool like Camtasia can help create the captioning for you while you are creating your video.

Captions help those with a hearing impairment as they can then see what is being said. What about those with a visual impairment? In this case we need the screen reader to have something to read. This is where a transcript comes into play. If we have another page that has just the text of the transcript then the screen reader has something to read.

Let’s take a look at a transcript

1. Navigate to http://accessibility.psu.edu/transcriptexample 2. Read a few line of this transcript 3. Turn on NVDA and have it read to you

Creating a transcript can be time consuming as can be captioning. A trick to save some time is to create the transcript of what you want to say before you start recording your video or audio.

Version 1.2 | P a g e 30

When you have completed the recording you will have your transcript and the text to add back for the captioning.

The last item to review here is success criteria 1.2.5 audio description level AA. Have you (I know you have) watched a video and nothing was being said but there was lots of action happening? Now imagine if you have a visual impairment and were listening to the audio. How would you know what is happening. This is where audio descriptions come in to play.

Audio description is adding a voice over, if you will, to say what is happening in parts of the video where there is not anything being said. Let’s listen, yes I said listen to a trailer for the movie Frozen. We will do this on the overhead but I have included the link here for future reference if needed. The Frozen trailer without audio description is at http://www.imdb.com/video/imdb/vi3954223385. Now close your eyes.

What was happening?

Now listen to the Frozen trailer with audio description. This video can be found at https://www.youtube.com/watch?v=O7j4_aP8dWA. Close your eyes again.

What is happening?

This work again can be time consuming to fill in the voice over. In many cases you will need to

have someone who is an expert in the topic of the video tell what is happening so that the

audio description is correct.

MSU Teaching and Learning currently has a source for captioning. This is a fee based service.

Information about it can be found at

http://webaccess.msu.edu/Help_and_Resources/captioning-services.html.

Version 1.2 | P a g e 31

LESSON WRAP-UP

In this lesson we reviewed five success criteria that relate to alternate text and captions and audio descriptions. We discussed how these item are crucial to accessibility and how they can help all people not just persons with visual and hearing disabilities.

In our last lesson we will be examining color. We will look at guidelines and success criteria that cover the use of color and contrast of color on web pages.

Version 1.2 | P a g e 32

LESSON 5: COLOR AND VISION

INTRODUCTION

Everybody loves color, but some people cannot see color. There are variations of color blindness. The most common type of color blindness is not being able to distinguish between red and green. Being completely color blind is very rare. Talking about vision, there can also be issues with low vision users or older users. They may need to enlarge the text on the screen to make it easier to read.

In this lesson. We are going to take a look at the use of color on a web page. We will discuss when to not use color and why. We will also discuss color contrast analyzers and how to use them. Lastly we will discuss resizing text and why that can be important.

LESSON TIME

45 minutes

TOPICS TO BE COVERED

Discussion of color blindness

Discussion of using a color contrast analyzer

Discussion of resizing text

LEARNING OBJECTIVES

To gain an basic understanding of color blindness

To understand the need for color contrast on the web page

To understand the need to resize a page of text

Version 1.2 | P a g e 33

TOPIC A – WORKING WITH COLOR

It has been estimated that 5% to 8% of men and 0.5% of women are born color blind (http://colorvisiontesting.com/color2.htm, 2014). They fall into several categories. Protanomaly or red weakness, and Deuteronomaly or green weakness.

We will look at a two pictures to show what it is like for someone to view colors that has this issue.

Let’s compare images, the left is normal vision and the right is a red color deficiency.

These pictures are borrowed from colorvisiontesting.com/color2.htm

So why are we concerned with all of this? Think about a normal web page that you might create. You will have some pictures on it, some links, and perhaps a form. The links are usually colored and underlined. On the form you may designate required fields by the user of a red asterisk.

Now think, is a person with a red color deficiency (about 5 out of 100 people) going to see a red asterisk or just an asterisk.

This brings us to our success criteria on the use of color, 1.4.1 Use of Color (Level A).

Success criteria 1.4.1 says that color is not used as the only visual means of conveying information, indication an action, prompting a response, or distinguishing a visual element. This means that we can use color but not as a standalone visual cue. What does this mean?

Version 1.2 | P a g e 34

This means that we can use color to denote something on the page but it must be accompanied by some other visual cue. For instance, on a form, you would say that everything with an asterisk is a required field, and color the asterisk red. The point is you are not saying a red asterisk.

Take a moment and review the Understand of success Criteria 1.4.1

Looking at success criteria 1.4.1

1. Navigate to http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html

2. Read the Intent of this Success Criterion 3. Read the Examples of Success Criteria 1.4.1

In the next topic we will discuss and review success criteria for color contrast.

Version 1.2 | P a g e 35

TOPIC B – WORKING WITH CONTRAST RATIO

Color contrast or contrast ratio lends itself to color blindness but it also lends itself to good old legibility. Have you ever tried to read something that had a water mark on it and the watermark was so pronounced that it made it very hard to read? This is the point of color contrast.

Color contrast is the ratio of the colors between the foreground and the background. The minimum is 4.5 to 1.

Guideline 1.4 success criteria 1.4.3 states the visual presentation of text and images of text has a contrast ratio of 4.5:1.

Let’s examine success criteria 1.4.3

1. Navigate to http://www.w3.org/TR/WCAG20/#visual-audio-contrast 2. Review the statement and the three exceptions 3. Click on the Understanding 1.4.3 on the right side 4. Read the section Intent of this Success Criterion

One of the best ways to find the color contrast is to use a color contrast analyzer tool. One of the better ones is from the Paciello Group at http://www.paciellogroup.com/resources/contrastanalyser/.

Let’s install this from the desktop folder and examine a web page.

1. From the desktop folder for this class, open the software folder 2. Double click on the color contrast analyzer folder 3. Double click on the color contrast analyzer application

Now let’s look at a page and determine if it meets the success criteria.

1. Go back to your browser or open a new browser window 2. Navigate to http://www.discoverychild.net/ 3. Click on Qualification in the left navigation 4. Using the Color Contrast Analyzer, click on the eye dropper associated with the

foreground color 5. Activate the browser window 6. Hover over and click on the blue in the letter T of the first word in the paragraph 7. Go back to the Color Contrast Analyzer and click on the eye dropper associated with

the background color 8. Activate the browser window 9. Hover over and click on the blue background just above the letter T of the first word in

the first sentence 10. Notice the X marked for failure of the AA a requirement

This test is very easy to accomplish but it is a manual process. There is not any automated tool to check your pages. To learn more about what colors work well together, check out the lighthouse International web site at http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast

In the next topic we will examine the need for increasing the size of text on a web page

Version 1.2 | P a g e 36

TOPIC C – RESIZING TEXT

Many people do not have a vision issue per se. but as we get older we cannot see as well as we used to. On web pages the browser user has the ability to increase the size of the text on a screen. This enables them to see easier without the need for assistive technology.

Guideline 1.4 Success Criteria 1.4.4 says Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA).

This means that the user must be able to resize the test on the page without breaking the page, or the structure changing.

Let’s review the understanding of the success criteria.

1. Open or switch to your browser window 2. Navigate to http://www.w3.org/TR/WCAG20/#visual-audio-contrast 3. Read the test for success criteria 1.4.4 4. Click on the Understanding 1.4.4 on the right side 5. Take a few minutes to read the Intent of this Success Criterion

Try resizing the page.

1. While on the browser window press CTRL and + together 2. This will increase the size of the page. 3. Do this 3 or 4 times. 4. Notice how the test on the page gets larger and wraps the text on the lines differently

but does not make you scroll to the right to read the remainder of the page, but the length of the page increases.

5. Pressing CTRL and – will decrease the size of the text on a page.

Version 1.2 | P a g e 37

LESSON WRAP-UP

In this lesson we review three of the success criteria for Guideline 1.4

1.4.1 Use of color (level A)

1.4.3 Contrast (Level AA)

1.4.4 Resize Text (Level AA)

We looked at an example of each of these criteria and read the intent of why they need to be met.

Version 1.2 | P a g e 39

APPENDIX A – WEBSITE REFERENCE

WCAG 2.0 Guidelines - http://www.w3.org/TR/WCAG20/

Lighthouse International - http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast/

Paciello Group Color Contrast analyzer - http://www.paciellogroup.com/resources/contrastanalyser/

MSU Web Access – http://webaccess.msu.edu

World wide Web Consortium – http://w3c.org

Web Accessibility in Mind – http://webaim.org

JAWS Trial - http://www.freedomscientific.com/Downloads/ProductDemos/#JAWS

NVDA - http://www.nvaccess.org/download/

Version 1.2 | P a g e 40

APPENDIX B – KEYBOARD NAVIGATION

Movement Key

Move Forward Tab

Move Backwards Shift + Tab

Select Buttons Space Bar

Navigate and Select Radio Buttons Arrow

Select / Deselect boxes Spacebar

Open List box ALT + Down Arrow

Go to Top of Page CTRL + Home

Go to Bottom of Page CTRL + End

Refresh the screen F5

Go Back a Page ALT + Left Arrow

Go Forward a Page ALT + Right Arrow

Version 1.2 | P a g e 41