Embedded Files
Create Accessibility with Catapult
Create Accessibility with Catapult
The Web Content Accessibility Guidelines (WCAG) 2.0 outline standards to make your online content accessible to people with disabilities. Let's see how your current site measures up against WCAG2.0 standards.
- Installing the WAVE Evaluation Tool Chrome Extension.
- Using Chrome, Navigate to your Department, School, or Class Webpage.
- Click on the WAVE Extension. Make a note of the number of Errors, Alerts, and Contrast Errors.
We will revisit this tool at the end of today's training to measure our progress towards creating accessibility.
Adding Alt Text
Adding Alt Text
Alt Text stands for alternative text that is added to images so they are accessible to individuals using screen readers. Alt text needs to communicate the purpose of the image.
This is a picture of my cat, Maggie.
- If she was on a webpage about different household pets, my alt text may read "cat."
- If she was on a webpage about different types of cats, my alt text my read "black and white long-haired cat."
- If she was part of creative writing story, my alt text may read "green-eyed cat peering straight ahead."
Your alt text depends on the context and purpose of your image.
Alt Text Tips:
Alt Text Tips:
- Keep it short.
- No need to add words like image, icon, or link to as part of your alt text.
- Non-Examples: "Image of a cat" or "Cat icon" "link to Cat Website"
Adding Alt Text in Catapult
Adding Alt Text in Catapult
- Login to CatapultCMS
- Double Click on your page to edit
- Click on edit pencil to edit container with images
- Click on the wheelchair Icon
- Type your Alt Text > Save
Do I need to add a caption?
Not necessarily. Add a caption in addition to the alt text only if you want a caption to appear under your image similar to a magazine or newspaper.
Color Contrast
Color Contrast
- Using Chrome, Install Color Contrast Analyzer Extension
- Navigate to your Department, School, or Class Website.
- Click on the Extension, wait for it to analyze your page.
- Once done, any content on your page that doesn't have white lines around it, does not meet WCAG 2.0 Color Contrast Guidelines and needs to be changed.
Template features, such as menus and title appearance are controlled by the template and are being corrected by developers at Catapult. Content that you have added to the page, such as images or embedded documents, need to meet these color contrast guidelines.
This is also something to consider when creating any digital content beyond the website as well as your email appearance. Please remove any background images you may be using in your email or different color fonts.
PDFs
PDFs
PDF files posted online are often not accessible for screen readers.
To quickly test for accessibility.
To quickly test for accessibility.
- Click on your linked pdf document to open in Chrome.
- Can you highlight text in pdf document? Yes. It's probably accessible. No. It's NOT accessible.
- Make a note of your current inaccessible pdf documents.
How to begin creating more accessible pdfs.
How to begin creating more accessible pdfs.
- If using Google or Word > download as .pdf, these are accessible.
- If using Adobe products and save as .pdf, these are accessible.
- If you scan something to save as .pdf, these are NOT accessible.
- If it's not possible to make your current documents accessible using one of the methods above, install Snapverter for Chrome
- Upload inaccessible .pdf to Google Drive and place in Drop Here to Convert File Folder within Snapverter. Wait. Check the Finished Folder for an accessible pdf.
Melissa is available to work with departments to determine best practices and workflows for converting currently inaccessible pdfs and ensuring the creation of accessible pdfs int he future.
Additional Introduction Training Materials:
Additional Introduction Training Materials:
Report abuse