web accessibility training for content managers
TRANSCRIPT
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
• HTTP://DEV-GRAYS-
COLLEGE.GOTPANTHEON.COM/SITES/
DEFAULT/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
HTTPS://APP.ARTS-PEOPLE.COM/INDEX.PHP?SHOW=57263
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
• HTTP://GHC.EDU
• 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 IMAGEOPTION 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: http://www.ghc.edu/admissions/cost.jpg
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 2013-2014 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 1 Step 2 Step 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 HTTP://WWW.GHC.EDU/CONTENT/DSS-HOMEPAGE”
• 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
H4
H3
USING HEADINGS
1. THE TITLE OF THE
PAGE IS ALREADY
FORMATTED TO BE
HEADING 1.
2. FIND THE FORMAT
DROP DOWN MENU
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 LISTDIRECTIONS TO STORE
1. TURN RIGHT ON BOONE ST.2. BOONE ST. CURVES AND
BECOMES US-1013. TAKE BRIDGE OVER
CHEHALIS RIVER 4. TURN RIGHT ON E. HERRON
ST. 5. PASS HOTEL6. 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. SELECT THE TABLE ICON
2. ENTER THE NUMBER OF
ROWS AND COLUMNS
3. FROM THE HEADERS DROP
DOWN MENU SELECT “BOTH”
4. WRITE A CAPTION WHICH
SHOULD BE THE TITLE OF
THE SURVEY
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 FIELDSETStep 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
http://wave.webaim.org/
Chrome: http://wave.webaim.org/extension/
FireFox: https://wave.webaim.org/toolbar/