Accessibility Workshop for CCNY: Evaluate for Accessibility

Website Evaluation Tools

WAVE

• Use the WAVE tool to check for various accessibility issues on your site.
• You can use the WAVE browser plug-in  to check your site, or you can go to the WAVE website and put in the url of your page to have it checked.
• The WAVE tool tells you what errors it finds and provides links to additional information on the issues it finds.
• The WAVE tool does Color Contrast checking

Tota11y

• tota11y browswer plug-in helps visualize how your site performs with assistive technologies.

HeadingsMap

• Use the HeadingsMap browser plug-in to visually see the heading structure of the webpage.

Evaluation Bookmarklets

Images Bookmarklet

• Drag this Images Bookmarklet link  to your toolbar to install this bookmarklet.
• This bookmarklet when clicked, created by Paul J. Adams , inserts a green dashed outline around images that have alt values and a red solid outline around images with no alt attribute.
• Alt attribute values are displayed in black on yellow text on top of the images. Images with empty alt values, <img alt=""> are shown as alt="".

Headings Bookmarklet

• Drag this Headings Bookmarklet link  to your toolbar to install this bookmarklet.
• This bookmarklet, also created by Paul J. Adams, when clicked, inserts heading information around all the headers on your page so you can check the headings level.
• The headings values are displayed in black text on yellow background.

Color Evaluation

WCAG Contrast Checker

• WCAG Contrast Checker is a Firefox browser plug-in.
• This plug-in checks the compliance of contrast levels of foreground and background color combinations based on the requirements of WCAG 2.1.

Color Contrast Analyzer

• Color Contrast Analyzer is a Chrome browser plug-in.
• This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.

A11Y Color Blindness Empathy Test

• Use this browser add-on to see what you site looks like to people with various types of color blindness and vision loss.

Word Document Evaluation

• Use the "Accessibility Checker" to evaluate your word document.
• Here are step by step word accessibility checker instructions.

PDF Evaluation

• Use Adobe Acrobat Pro DC "Accessibility Checker" to evaluate your pdf.
• Here are step by step PDF accessibility checker instructions.