1. Creating Accessible Webpages For Web Content Authors Using Cascade CMS templates
Last Updated 01/16/2019

2. Contacts
Mandy Thomas Webmaster Craig Williams Accessibility Technology Analyst

3. Training Goals WHAT: Define accessibility
WHY: Compassion for our diverse audiences
WHO: Expand your understanding
HOW: Tips to creating accessible content

4. What?

5. What is Digital Accessibility?
No hindrances to getting important information or access to services
People with disabilities aren’t at a significant disadvantage

6. What is Digital Accessibility?
More than one way to…
Read content
Interact with forms
Navigate menus
Recognize links

7. Why?

8. Why?
The internet is a crucial part of modern life… Gives access to information, services, social interaction, and commerce we might not be able to get any other way

9. People Browse Differently
Zoom-in
Turn off images
Modify colors
Can’t use mouse, just keyboard

10. Some People Use Alternates to Browser
Assistive Technologies
Audible read of content
Braille keyboard
Mouth stick, eye-tracking device…
May allow user to
Scan page’s headings
Scan page’s links
Read out description of images
Read out captions of videos

11. Good Accessibility Benefits Everyone
In physical world…
Audible crosswalks benefit:
blind
small children
seniors with low vision
non-English speaker

12. Compliance
Private universities need to meet federal accessibility guidelines Section 504 Title III of American Disabilities Act (ADA)

13. The Right Approach
considering needs of a diverse human population… rather than accommodating needs of people with disabilities

14. Who?

15. Expand Your Definition of Accessibility
Permanent medical conditions
Temporary difficulties
Changing circumstances eg. age
English isn’t first language
Noisy or Quiet Environment

16. Types of Disabilities to Consider
Visual
Auditory
Motor
Cognitive

17. Types of Disabilities to Consider
Visual Impairments
Color Blindness
Need high contrast and good color choices
Need additional indication of link, not just color
May override default colors
Poor Eyesight, from age or medical issue
Need clear labels and appropriate font sizes
May zoom-in up to 400%
Blindness
Need text descriptions of images
Need transcripts for videos
Need correct heading structure

18. Types of Disabilities to Consider
Auditory Impairments
Deaf or Hard-of-Hearing
Need audio alternatives to video
Closed caption
Transcripts
Work in loud environments or quiet-zones
Need ability to control volume or audio alternatives

19. Types of Disabilities to Consider
Motor Impairments
Temporary or Permanent Medical conditions
Keyboard only – no mouse
Fine motor movements difficult
Need large, clickable areas for buttons
Need to be able to tab through menus and forms

20. Types of Disabilities to Consider
Cognitive Impairments
Memory, attention, problem-solving issues
Need to easily identify where in site they are
Need text broken into chunks
Need alternates to icons

21. Other Audiences to Consider
Literacy
low reading levels
non-English speakers
unfamiliarity with icons and idioms
Poverty
slow network connection
old browsers
Environment
noisy environments
quiet-zones

22. Good Accessibility Benefits Everyone
Compare…
Webpage with only text
Webpage with accessible headings and links
Webpage using template widgets

23. Good Accessibility Benefits Everyone
Why are some versions better, even for sighted user?
Easier to scan headings
Less reading required
Easier to keep place on page
Easier to identify links

24. How?

25. What Makes a Website Accessible?
Can use without a mouse
Navigation menus are tab-able
Form fields are tab-able

26. What Makes a Website Accessible?
Easy to read
Links are identifiable in 2 ways (color and underline)
Link text makes sense out of context
Text uses correct headings
Fonts have good contrast with background
Content is easy to understand

27. What Makes a Website Accessible?
Alternative Ways to Get Information
Images have descriptive text
Videos are captioned or have transcripts
Audio has transcript

28. Templates and widgets are only part of the answer You are the rest
What Can We Do?
Content
Authors
Rule!
Templates and widgets are only part of the answer You are the rest

29. What are we doing at Chapman?
Design compliant navigation and layout through templates
Use sitewide stylesheets to standardize colors and fonts
Build widgets that write compliant html
Limit use of free-form, rich-text editor

30. What are we doing at Chapman?
(continued)
Train web content authors
Provide tools for authors to detect errors before submitting
Create checklists for publishers to do a “human review”
Provide services to scan published webpages

31. HTML: Links Identifiable in multiple ways
At Chapman we standardize on red color and dotted underline
Should not open a new browser
Can be disorienting to some users

32. HTML: Link Text Link text should be unique
Avoid multiple “Learn More” on same page
Should make sense out of context
Assistive Technologies allow all links read out independently of surrounding text

33. HTML: Link Text Good Link Text
Read the policy in our Student Conduct Code.
Poor Link Text
To read more about the policy in our Student Conduct Code, click here.
To read more about the policy in our Student Conduct Code go to

34. HTML: Main Heading One “Heading 1”, or <H1>, heading per page
Describe concisely what’s on page
Assistive technologies will read it out loud
Bonus: Good headings help your search engine results!

35. HTML: Main Heading In Cascade <H1> heading = “Page Title” field
Office of Admission, for example

36. HTML: Sub-headings
Each major topic should be preceded by headings (H2 – H6)
Creates a content outline
Assistive technologies allow blind user to scan through all headings

37. HTML: Sub-headings Don’t simply bold the text
Never use H2-H6 just to make larger text
Heading levels must be in order and nested…

38. HTML: Nesting Sub-headings
Each new, major category is an H2. Sub-topics are H3.
Major Topic (H2)
Minor Topics (H3)
Minor Topic (H4)

39. HTML: Sub-headings In Text Editor widget
Heading orders is responsibility of the content author
Be especially aware of the rest of the page when using Text Editor within another widget eg. Collapsables

40. HTML: Sub-headings Using the Text Editor widget in Cascade CMS
Highlight text
Format menu
choose Heading 2

41. HTML: Sub-headings Cascade widgets build H2 tags automatically
Collapsible Regions
Tabs
Headings in Callout Boxes

42. HTML: Sub-headings
H2 Headings in Cascade widgets

43. HTML: Sub-headings
Collapsible widget regions are H2 if optional Heading field blank:
If Heading filled-in it becomes H2, and region headings drop to H3 automatically:

44. HTML: Images Shouldn’t contain text (ideally)
Important information must also be in text of page
Don’t use images for buttons

45. HTML: Image Alternative Text
Descriptions are required
Used by assistive technologies and read aloud
Seen if images disabled in browser by user

46. HTML: Image Alternative Text
Concisely describe the content and function
Don’t say Image of.. or Photo of..
Poor examples:
students
chapman-campus-56
Good example:
students enjoying a sunny day on lawn at Chapman University

47. HTML: Image Alternative Text
If the person or place in the photo is integral to content on the page, say so

48. HTML: Create Accessible Content
Write Well
Avoid long sentences
Keep paragraphs to about 5 sentences
Avoid idioms and jargon
Spell out acronyms on first use
Page Scannability – break up page content
Use headings
Use lists
Use Cascade widgets

49. HTML: Tables For data only Avoid tables if possible
Don’t use to line up text and images
Avoid tables if possible
Not good on mobile
Can be tricky to make accessible if complex
Read more at in the KB at

50. HTML: Tables Header row (or column) must use <th> tag
<caption> tag
Not required if explain table in text above it
identifies the overall topic of the table (like a title)
Useful to screen readers because helps find a table and understand what it’s about
Summary attribute in <table> tag
Not required
Provides navigation hints if a complex set of headers
Would need to code in source code manually

51. HTML: Tables Header Can be the first row or the first column or both
Use the Table Row properties to set selected row/column as Header

52. HTML: Tables Caption tag visible on page 2-step process
In Table Properties check Caption
In editor window enter a title into the new row above headers

53. HTML: Tables Summary attribute in <table> tag
Is not visible on page
Describes how to navigate headings if complex
Can add to html source manually by clicking on the <> icon in the editor bar
Example:
<table summary="headers are in first column for each row”>

54. HTML: Multimedia Videos and Audio Recording should have alternatives
Closed Captions
Transcript
Description

55. HTML: Videos Closed Captioning
Words seen at the same time as spoken in the video
Includes audio cues (eg “doorbell rings”)
Required for all videos

56. HTML: Videos Transcripts Text-equivalent of entire content
Link to separate document
Required for Audio
Not required for video
some exceptions eg highly-visible videos, or highly-important concepts where CC is not sufficient
Create
Manually
Using speech-to-text software
Pay a service

57. HTML: Videos Closed Captioning
YouTube has free, auto-captioning option
Vimeo does not (create and upload yourself)
Auto-captioning could be inaccurate if
Lots of background noise
Multiple microphones
Speaker has a thick accent
May need to edit to correct
Read how-to in our KB at

58. HTML: Documents Documents must be accessible PDFs Word documents
Excel spreadsheets
PowerPoint presentations
PDFs are preferable over Word

59. HTML: Documents Should follow similar principles
Proper use of H1-H6 headings
Good color choices and contrast for text and links
Tables should include descriptions
Images need alternate descriptions
Word documents must be converted to PDF correctly
MS Word and Adobe Acrobat have built-in checker tools
Read how-to in our KB at

60. Check and Measure

61. Check and Measure Cascade’s Content Checker when submitting changes
WAVE tool in browser for live page
Siteimprove for overhaul health report

62. Check Content & Submit Use Cascade’s Check Content & Submit option
Spell checker
Accessibility issues
Broken links [disabled]

63. Check Content & Submit
First screen is spell checker

64. Check Content & Submit Second screen is accessibility checker
Only checks content in the Text Editor field(s)

65. Check Your Page Use the WAVE tool to check your live page
Check a single page at
Add WAVE to Chrome or Firefox toolbar
Look at both Errors and Alerts
Review alternate text of your images

66. Check Your Site Siteimprove Scan & Reports Scans site every 5 days
Summary reports ed
Login to view full reports
Filter by error type, sort by page title, etc.
Free webinars available

67. In Summary
Compassion: Right thing to do; no different from other inclusion and diversity issues on campus
Competitive Edge : Will build better brand loyalty and serve a wider, more diverse audience of prospective students, job seekers, etc.
Compliance: with federal guidelines

68. In Summary Accessibility is an on-going effort
Chapman’s website can only be accessible if we all do our part