WEB ACCESSIBILITY TRAINING FOR CONTENT MANAGERS

MULTIMEDIA ACCESSIBILITY AUDIO CONTENT (E.G. PODCAST) TRANSCRIPTS VIDEO ONLY CONTENT (CHOOSE ONE) AUDIO TRACK DESCRIBING VIDEO TEXTUAL DESCRIPTION MULTIMEDIA (AUDIO AND VISUAL) CAPTIONS DESCRIPTION OF CONTENT IF CAPTIONS ALONE DO NOT SUFFICE CONTROLLING CONTENT START, STOP, DISABLE (BYPASS) CONTENT

ALTERNATIVE TEXT FOR PICTURES ALTERNATIVE TEXT PROVIDES SCREEN READERS USERS WITH ACCESS TO ALL OF THE NON-TEXT INFORMATION WITHOUT ALT TEXT COLLEGE.GOTPANTHEON.COM/SITES/DEFA ULT/FILES/IMCE/IMAGES/100_1935.JPG WITH ALT TEXT 143 STAIRS LEADING UP TO 2000 BUILDING

IMAGE WITH TEXT IMAGES THAT CONTAIN TEXT SHOULD GENERALLY BE CODED TO JUST INCLUDE THE TEXT AS THE ALT TEXT. WITHOUT ALT TEXT WITH ALT TEXT SPAMALOT SHOWING AT THE BISHOP CENTER JULY 23 THRU JULY 26

LINKED IMAGES IMAGES THAT SERVE AS LINKS SHOULD INCLUDE BOTH THE DESCRIPTION OF THE IMAGE AND WHERE THE LINK NAVIGATES TO WITHOUT ALT TEXT WITH ALT TEXT GRAYS HARBOR COLLEGE HOMEPAGE

DECORATIVE IMAGES DON’T USE THEM CREATE SOME MEANINGFUL ALT TEXT EXAMPLE: GHC STUDENTS WITH AND WITHOUT DISABILITIES STUDYING IN GHC’S COMMONS

COMPLEX IMAGE OPTION 1: THOROUGH DESCRIPTION IN THE CONTENT OF THE PAGE OPTION 2: CREATE ANOTHER WEB PAGE WITH JUST DESCRIPTION AND LINK IT NEAR IMAGE OPTION 3 (LONG DESCRIPTION): LINK WITHIN THE IMAGE TO ANOTHER PAGE WITH JUST THE DESCRIPTION

Without Alt Text: With Alt Text: Comparison of GHC costs versus 4 year and online colleges Linked Page with Content: The chart above shows the estimated cost and comparison of attending nine colleges in academic year for three quarters.  Grays Harbor College tuition and fees are $4350  Eastern Washington University tuition and fees are $7433  The Evergreen State College tuition and fees are $8299  Central Washington University tuition and fees are $8973  University of Phoenix tuition and fees are $10,200  Washington State University, Pullman tuition and fees are $12,300  University of Washington, Seattle tuition and fees are $12,383  Pacific Lutheran University tuition and fees are $32,800  University of Puget Sound tuition and fees are $40,250 EXAMPLE

ADDING ALT TEST PRACTICE Step 1Step 2Step 3 if Necessary 1. SELECT THE IMAGE ICON 2. ENTER BRIEF DESCRIPTION IN ALT TEXT BOX 3. NEW PAGE CREATED WITH DESCRIPTION AND URL PASTED IN LONG DESCRIPTION BOX

COLOR DO NOT RELY ON COLOR ALONE TO CONVEY THE MEANING OF CONTENT

COLOR BLINDNESS Protanopia TritanopiaDeuteranopia

Protanopia Lens

CONTRAST This sentence is an example of poor color contrast. This sentence is an example of good color contrast. This sentence is an example of great color contrast.

ACCESSIBLE FORM THIS FORM REQUIRES USERS TO FILL OUT AT LEAST THE ITEMS MARKED AS REQUIRED * THIS WOULD ALLOW EVERYONE THE ABILITY TO INTERACT WITH THE FORM. * REQUIRED FIELD

SHAPES INCLUDE ALTERNATIVE TEXT OF AN IMAGE THAT MATCHES THE DESIRED MEANING DO NOT RELY ON ONE SENSORY CHARACTERISTIC ALONE TO CONVEY MEANING MAKE CONTENT WORK FOR THE WIDEST POSSIBLE AUDIENCE

IMAGES USE AN ALTERNATIVE TEXT OF THE IMAGE THAT MATCHES THE MEANING AVOID USING INSTRUCTIONS THAT RELY ON PERCEPTION OF SHAPE, COLOR OR LOCATION ALONE INCORRECT THE UP ARROW WILL TAKE YOU BACK TO THE TOP OF THE PAGE CORRECT THE UP ARROW LABELED "TOP OF PAGE" WILL TAKE YOU BACK TO THE TOP

DESCRIPTIVE LINKS PROVIDE PROPER CONTEXT OF WHERE CLICKING THE LINK WILL TAKE USER SCREEN READER USERS OFTEN NAVIGATE WEBSITES GOING LINK TO LINK PROVIDING LINKS THAT MAKE SENSE IS VITALLY IMPORTANT FOR SCREEN READERS SCREEN READER SOFTWARE ANNOUNCES THE PRESENCE OF LINKS EXAMPLE NO -- “LINK NO -- “LINK CLICK HERE” YES -- LEARN MORE BY VISITING “LINK DISABILITY SUPPORT SERVICES” HOMEPAGE

WRITING DESCRIPTIVE LINK TEXT AVOID USING “CLICK HERE” OR “MORE” AS THEY DO NOT IDENTIFY WHAT THE LINK IS FOR BE SURE: DESCRIPTION MAKES SENSE WHEN READ OUT OF CONTEXT INCLUDE UNIQUE DESCRIPTIONS FOR EACH UNIQUE HYPERLINK DESCRIBES DESTINATION (WEBSITE OR DOCUMENT TITLE)

EXAMPLE What’s Wrong with this Descriptive Link?

HEADINGS STRUCTURE – CORRECT SEMANTIC STRUCTURE ALLOWS SCREEN READER TO NAVIGATE PAGE IN PROPER ORDER SCREEN READER USERS CAN UNDERSTAND THE RELATIVE IMPORTANCE OF HEADING H1 H2 H3 H4 H3

USING HEADINGS 1. 1.THE TITLE OF THE PAGE IS ALREADY FORMATTED TO BE HEADING FIND THE FORMAT DROP DOWN MENU 3. 3.IF THERE ARE SECTIONS INCLUDED ON THE PAGE START WITH HEADING 2 AND SO ON

LIST LIST PROVIDE STRUCTURE ORDER IN A LINEAR FASHION FOR SCREEN READERS LIST ARE RECOMMENDED FOR SIMPLE TABLES TABLES CAN BE MORE DIFFICULT TO NAVIGATE NEVER RELY ON INDENTATION TO PROVIDE A VISUAL LIST

UNORDERED LIST GROCERIES ONION RED PEPPER BLACK BEANS CORN OLIVE OIL

ORDERED LIST DIRECTIONS TO STORE 1. 1.TURN RIGHT ON BOONE ST BOONE ST. CURVES AND BECOMES US TAKE BRIDGE OVER CHEHALIS RIVER 4. 4.TURN RIGHT ON E. HERRON ST PASS HOTEL 6. 6.TURN RIGHT INTO PARKING LOT BEFORE MOBILE STATION

TABLES NOT NATURALLY LINEAR CODED PROPERLY A SCREEN READER WILL BE ABLE TO SCAN THROUGH TABLE AND UNDERSTAND IT SCREEN READER WILL ANNOUNCE THAT THERE IS A TABLE

CREATING AN ACCESSIBLE TABLE 1. 1.SELECT THE TABLE ICON 2. 2.ENTER THE NUMBER OF ROWS AND COLUMNS 3. 3.FROM THE HEADERS DROP DOWN MENU SELECT “BOTH” 4. 4.WRITE A CAPTION WHICH SHOULD BE THE TITLE OF THE SURVEY 5. 5.WRITE A SUMMARY

TABLES STEP 6: UNDER ADVANCE TAB SELECT LANGUAGE DIRECTION

FORMS SCREEN READER WILL LINEARIZE A PAGE UNLESS TOLD OTHERWISE

FIELDSET

CREATING FIELDSET Step 1: In Web form create a new component and select “Fieldset” Step 2: Drag the component with “Select Options” underneath the Fieldset Component Step 3: Edit the “Select Options” component and select “None” under Label Display Step 4: Call Rich, Jon, or Holly for help if you are not sure

Chrome: nsion/ FireFox: olbar/