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

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

ADA Compliant Websites & Documents What the heck am I supposed to do?
Adapting Technology Changing Lives Web accessibility Web accessibility and Disability A Practical introduction Robin Christopherson and Curt Holst AbilityNet.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ADOBE® ACCESSIBILITY Achieving Accessibility with PDF Greg Pisocky Accessibility Specialist.
Basic Accessible PDF Document Training Adobe Acrobat Professional 11.
XX/XX/XX Presenter names Position Title Accessibility “How to”
Accessible PDF Creation using Adobe Acrobat Professional 11.
Creating Accessible Instructional Materials
Adobe Reader and Acrobat Professional Adobe LiveCycle Designer Microsoft Office Word PowerPoint.
Accessibility Tools in Microsoft Office 2010 and 2013 ADA Conference 2014 Norah Sinclair Tessa Greenleaf.
Creating and publishing accessible course materials Practical advise you can replicate.
Accessible Word Document Training Microsoft Word 2010.
May 5, 2015 Allison Kidd, ATRC. Direct Services for CSU Students & Employees with Disabilities Ensure Equal Access to Technology & Electronic Information.
 What is web accessibility? ture=relatedhttp://
Electronic Communication and Web Accessibility Workshop.
Debi Orton, Co-Chair NYS Forum IT Accessibility Committee.
Assistive Technology and Web Accessibility University of Hawaii Information Technology Services Jon Nakasone.
Technology for Students with Special Needs E.Brown Forward.
Web Accessibility PRESENTED BY CINDY BARRY, LITS.
How People with Disabilities Access the Web Web Design – Sec 2-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design.
Daniel Njuguna – IT Officer/ Adaptive Technology Trainer Kenya Society For The Blind Accessibility in ICT’s.
WEB ACCESSIBILITY TRAINING FOR CONTENT MANAGERS.
Creating Accessible Presentations Richard Steinberg Texas Department of Assistive and Rehabilitative Services (DARS)
+ Accessible Document Basics Cindy Compeán Accessibility/Assistive Technology Specialist
A centre of expertise in digital information managementwww.ukoln.ac.uk Accessibility and Usability For Web Sites: An Introduction to Web Accessibility.
Accessible PDF Creation using Adobe Acrobat Professional 11.
COMP 143 Web Development with Adobe Dreamweaver CC.
 Accessibility & Information Architecture Presented by Liz Molleur INF385E April 5 th, 2009.
Making the Most of PDFs PDF (portable document format) is a file format developed by Adobe Systems. PDFs make it possible to send documents with original.
Accessibility and Teaching Online Beth Case Program Manager for Digital, Emerging, and Assistive Technologies University of Louisville, Delphi Center.
Creating Inclusive Classrooms in Online Courses using Universal Design for Learning (UDL) Principles Pamela T. Dunning, Ph.D. Troy University
Creating Section 508 Compliant Documents & Presentations
Making videos accessible – Mandatory guidelines
County Website Content Management System
Web & accessibility resources
Section 508 At long last, two of the most looming accessibility questions in the United States have been answered.
Making the Web Accessible to Impaired Users
Pamela T. Dunning, Ph.D. Troy University
Creating an Accessible Document
Creating Accessible PDFs from Word Docs
Information Architecture and Design I
Creating ADA Compliant Resources
Microsoft Word Accessibility
Introduction to Accessibility
Creating Accessible Electronic Content
Creating ADA Compliant Resources
Financial Aid: ATRC Services & Intro to Accessibility
MS PowerPoint Accessibility Tutorial
Creating Accessible Content in WordPress
Web Accessibility Allison Kidd, Accessibility Specialist
Creating Section 508 Compliant Documents & Presentations
Web Content Accessibility Beata M. Ofianewska (DG COMM) 7 December 2006 December 2006 COMM C2.
Creating Accessible PowerPoint Slides
Lakeshore Public Schools
Creating Section 508 Compliant Documents & Presentations
Disability Resource Center
Information Architecture and Design I
ADA Compliant Website & Documents
Building your class website
Introduction to Web Accessibility
Web Standards and Accessible Design.
Creating Accessible Documents
Web content management
Accessibility Guide.
Accessible Design Top 10 List
Accessibility and oer design
Accessibility Evaluation
Correct document structure Easy for authors and accessible to readers
Accessibility.
Making Documents Accessible
Presentation transcript:

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