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

Contacts Mandy Thomas Webmaster mthomas@chapman.edu Craig Williams Accessibility Technology Analyst cwilliam@chapman.edu

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

What?

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

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

Why?

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

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

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

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

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

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

Who?

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

Types of Disabilities to Consider Visual Auditory Motor Cognitive

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

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

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

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

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

Good Accessibility Benefits Everyone Compare… Webpage with only text https://www.chapman.edu/admission/undergraduate/visit-without-markup.aspx Webpage with accessible headings and links https://www.chapman.edu/admission/undergraduate/visit-with-markup.aspx Webpage using template widgets https://www.chapman.edu/admission/undergraduate/visit.aspx

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

How?

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

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

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

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

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

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” https://brand.chapman.edu/?p=4124 Provide services to scan published webpages

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

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

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 http://www.chapman.edu/student-conduct-code

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!

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

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

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…

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

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

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

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

HTML: Sub-headings H2 Headings in Cascade widgets

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:

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

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

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

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

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

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 https://brand.chapman.edu/?p=4094

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

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

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

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”>

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

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

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

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 https://brand.chapman.edu/?p=4091

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

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 https://brand.chapman.edu/?p=4108

Check and Measure

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

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

Check Content & Submit First screen is spell checker

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

Check Your Page Use the WAVE tool to check your live page Check a single page at http://wave.webaim.org/ Add WAVE to Chrome or Firefox toolbar http://wave.webaim.org/extension/ Look at both Errors and Alerts Review alternate text of your images

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

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

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