Making Your School Website ADA Compliant

Things to think about! Slide Deck link

History of ADA (Americans with Disabilities Act)

• The Americans with Disabilities Act is a law passed in 1990 to avoid discrimination against people with physical limitations.
• It is imperative for every public sector business to make their services/products compatible and accessible for people with disabilities.
• In 2010, the Americans for Disabilities Act Standards for Accessible Design was passed, making it necessary for websites to be easily accessible for the disabled.
• DOJ 2022 - Guidance on Web Accessibility and the ADA�Resource - https://www.biztechcs.com/blog/ada-compliant-website/

Why should your website be ADA compliant?

• Increases target audience
• About 26 percent of the population has one or more disability.
• Improves SEO (search engine optimization) efforts
• WCAG (Website Content Accessibility Guidelines) provides accessibility to screen readers, and these readers crawl your website pages similarly to search engines.
• Better usability
• With quick navigation and easy access, everyone, impaired or not, will be able to find the information easily.
• Avoid Penalties - It’s the Law
• If you want to avoid the legal expenses of having an OCR non-compliant complaint,�it is better to make the appropriate improvements to your website now.

Resource - https://www.biztechcs.com/blog/ada-compliant-website/

Types of disabilities

• Visual
• Blindness, low vision, color-blindness
• Auditory
• Deafness, hard-of-hearing
• Motor
• Inability to use a mouse, slow response time, limited fine motor control
• Cognitive
• Learning disability, distractibility, inability to�remember or focus on large amounts of information

What Makes a Website Compatible?

• Keeping navigation consistent
• Design for different devices, views, and screens
• Don’t rely on color for emphasis
• Color contrast ratio
• No mouse, no problem - keyboard navigation
• “Alt” (alternative text) tags for all images
• Hyperlinks with descriptive text (not just “Click Here”)
• Proper heading tags (H1, H2, H3)
• Tables are not for formatting (they need a description and header cells)
• PDF files made accessible (not scanned)
• Audio and video files captioned or text alternative
• Have a website accessibility disclaimer page
• Have easily locatable contact information to allow users to request accessibility information�Resource - https://siteimprove.com/en-us/accessibility/ada-compliance-website/

How to test your site

• Test your website accessibility according to the Website Content Accessibility Guidelines (WCAG)
• Website Checkers
• WAVE by WebAIM
• Web Accessibility by Level Access
• SortSite by PowerMapper
• Siteimprove - Chrome plugin

How to test your site

• Test your website accessibility according to the Website Content Accessibility Guidelines (WCAG)
• Color Contrast Checkers
• WebAIM Contrast Checker
• Tanaguru Contrast Finder
• WCAG Color Contrast Checker - Chrome plugin

Accessibility Checklists

• WebAIM’s WCAG 2 Checklist is divided into four sections.
• Perceivable
• Users can consume content via the senses - sight, hearing, and/or touch
• Operable
• Users can operate a website with the controls they normally use
• Understandable
• Websites and user interfaces are comprehensible to users
• Robust
• Websites should work cross-browser and cross-platform

Accessibility Checklists

• Tips to Make Your Website Accessible - Resource - Government of Western Australia
• Web Accessibility Checklist - Resource - Fuzzy Math
• A Web Accessibility Checklist to Make Your Content 100% Compliant - Resource - HubSpot
• IT Accessibility Checklist - Resource - University of Washington

Examples - Contrast and Color

• Contrast Ratio between text and its background must be:
• 4.5:1 for normal (body) text
• 3:1 for large text
• Never use color alone to present content or instructions.�Resource - Texas A&M University

​

​

​

Examples - Alt Text

• Visitors with a visual impairment use screen readers to understand what’s on a web page.
• Adding textual descriptions to your images helps make your website accessible to all types of users, allowing them to browse your website and enjoy it freely.�Resource - WiX Photography

Examples - Descriptive Hyperlinks

• Descriptive links are weblinks disguised as descriptive text that is clicked on to go to the place described.
• Descriptive hyperlinks are especially important for people with visual impairments using screen reading software.
• Constructing Accessible Website vs
• https://www.worldcat.org/title/constructing-accessible-web-sites/oclc/263579159?referer=di&ht=edition�Resource - Colorado Virtual Library

Not descriptive

Click HERE for information on upcoming events.

Descriptive

Our calendar has information on upcoming events

Examples - Color for Emphasis

• Don't rely on color alone to convey information, as colorblind people may not be able to make the distinction.
• As an example, the UK Government Digital Service deliberately created an inaccessible website.�Resource - HubSpot

​

Examples - Cosmetic

• Bold and italic are not read any differently by screen readers.
• Below is an example of a supply list that would be very confusing for anyone using a screen reader.

School Supplies

The bold items are required.

• 200 sheets of lined paper
• 12 #2 pencils
• 1 three-ring binder
• Pack of 8 colored markers
• 3 glue sticks
• 1 pair of safety scissors

Examples - Accessible PDFs

• Make an accessible document first - Word, Google Docs
• Save as a PDF (do not scan a document to PDF)
• Use Adobe Acrobat Pro to run an Accessibility Check
• Make sure your PDF has:
• Title
• Language set
• Heading structure (H1, H2, H3)
• PDF tagged correctly
• Alt text
• Descriptive links
• Logical reading order
• No images of text

Examples - ADA Policy

A simple statement that you are aware of accessibility issues and working on them can go a long way towards avoiding lawsuits and OCR complaints. Your accessibility statement should include:

• A commitment to making all website content accessible to all visitors regardless of ability/disability.
• A commitment to following ADA and Section 508 requirements for digital content accessibility and any future laws that may be established.
• An explanation of and/or link to the standards or guidelines you will follow in creating content (probably W3C WCAG 2.0 or updated equivalents).
• The procedure visitors should follow if they have a question or complaint related to school website accessibility or have a problem with a specific section of your website
• An explanation of how grievances will be addressed

If your website is not currently 100% compliant, make sure your statement indicates that all new content moving forward will be compliant and you are taking steps to address legacy content.�Resource - eChalk

Chisago Lakes Compliance Disclaimer draft

​

Questions?

Contact Information

​

Mark F. Johnson

District Technology Support/Integration Specialist

Chisago Lakes Schools

mjohnson@isd2144.org

651.213.2424 (office)

651.796.8669 (cell)

Slide Deck link