Over the years Maine CITE has offered a number of training workshops on Accessible Web Design (AWD) and we built this site as a support to those events. But the materials have become rather popular so we’ve kept them here and invite you to feel free to poke around and use what you find. Please also check out the jebswebs blog for more information about this topic.
- Webinar: Making Podcasts and Videos Accessible…
- Webinar: What You Need to Know To Make Sure Your Website Is Accessible To All
- Resources on Accessible Digital Documents
Below are some articles and resources discovered over the past few years related to AWD that are some of the better resources:
Universal Design: 11 Practical Tips to Make Your Sites and Apps More Accessible
An article from Shopify discusses how Accessibility has come a long way over the last few years. Practical actions/tips are provided to make you content accessible to all. Read/view “Universal Design: 11 Practical Tips to Make Your Sites and Apps More Accessible.”
Some Accessibility Resources
Freelancer Scott O’Hara who frequently blogs about about UX development with a focus on accessibility has published a list of 13 resources that might be useful to folks wanting to learn more about Accessible Web Design. Read/view “Some Accessibility Resources.”
Tips for Getting Started Developing for Web Accessibility
This page introduces some basic considerations to help you get started developing web content that is more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to the related WCAG requirements, detailed background in the “Understanding” document, guidance from Tutorials, user stories, and more. Read/view “Tips for Getting Started Developing for Web Accessibility.”
Color accessibility: tools and resources to help you design inclusive products
Good summary of the reasons to be concerned about color usage and accessibility in web design plus a number of tests that can be use to assess you design. Read/view Color Accessibility: Tools and Resources…
Tips for making interactive elements accessible on mobile devices
WCAG was recently updated to version 2.1, which includes a whole new section on guidelines for mobile accessibility. There are several new mobile-specific rules, such as rule 1.3.4, that “content should not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.” This article covers some of the new guidelines that relate to interactive elements on a web page. Read/view “Tips for making interactive elements accessible on mobile devices.”
Assistive technology tools you can test with at no cost
Here’s some advice on what free assistive technology tools are available. Testing on these technologies does not replace an accessibility audit, but by testing early on you can spot potential issues, improve your service and save money. Read/view “Assistive Technology Tools You Can Test with at no Cost.”
Accessibility is Not What You Think
Accessibility is about designing for everybody, not the few. It is not about designing just for the disabled. It is about designing for every one of us…. Read/view “Accessibility if not What You Think.”
Designing UI with Color Blind Users in Mind
While the science behind color blindness is pretty complex, the gist of it is that color blind people have difficulty seeing color clearly or differentiating between some colors. With this in mind, in this article, we’ll share some tips on how you can improve your site’s accessibility and the experience it delivers for color blind people. Read/view “Designing UI with Color Blind Users in Mind.”
A Toolkit for Digital Accessibility
In this webinar, Jack Nicolai, Accessibility Product Manager at Adobe, shares tools, techniques, and best practices to integrate accessibility requirements into your web development and technology projects. Included are: Best practices for documenting accessible workflows; ARIA attributes and content specifically targeting assistive technology, and; Validating accessibility during testing. Read/view “A Toolkit for Digital Accessibility.”
Which accessibility testing tool should you use?
Good article from Paul Stanton in which he tests the major “automatic” web accessibility tools: aXe, SiteImprove, Tenon, WAVE, Lighthouse. He ranks them in order of preference based upon the results generated on a specific page. Read “Which accessibility testing tool should you use?”
Alt-texts: The Ultimate Guide
Recent article that covers all the bases on how and why you need to use Alternative Descriptions for images in digital documents (including the web) and lots of good do’s and don’ts. Read “Alt-Text: The Ultimate Guide”…
The Many Meanings of Headings
Interesting blog post from css-tricks talking about the use of Headings and the debate surrounding. This section, “The Many Meanings of Headings” is part of a larger article called, “The Document Outline Dilemma” which discussed the debate and some of the history. Warning, this is not for newbies! Read “The Many Meanings of Headings”…
Web Accessibility: Tools and Considerations
Nice article by Shaumik Daityai summarizing the “whys” and “whatnots” of Accessible Web Design. Easy to read and full of great screen shots. Check out Web Accessibility: Tools and Considerations…
24 ways to impress your friends
- Tips for Getting Started Developing for Web Accessibility – W3C-WAI.
- Accessibility for Teams – A ‘quick-start’ guide for embedding accessibility and inclusive design practices into your team’s workflow – GSA
- A11y.me – “a11y” is shorthand for accessibility: starts with an “a,” ends with a “y,” 11 letters in-between.
- Myths About Accessible Web Design (an oldie but goodie).
- AIS Web Accessibility Toolbar (still a nice resource, but I believe it still only works with Internet Explorer).
- W3C – WAI – WCAG v 2.0 Quick Reference.
- Section 508 (US Gov site).
- Section 508 (WebAIM site).
- Maine State WAP.
- WebAIM – Web Accessibility in Mind articles.
- Adobe Accessibility.
- Apple Accessibility.
- Microsoft Accessibility.
- HP Accessibility.
- IBM Accessibility.
- Google Accessibility.
- Google Developers: Web Essentials: Accessibility.
- WordPress Accessibility.
- Facebook Accessibility.
- US Dept of Justice – ADA – Web Access Suggestions.
- Twitter – search using #a11y hashtag
General Web Design Resources
See also the Links to Accessible Web and Universal Design found here on the Maine CITE web.
- Links to CSS Resources (UMN).
- Links to Dreamweaver Resources (UMN).
- Link to Accessibility Resources (UMN).
- Links on Usability and Liquid Design (UMN).
- WAI Resources for Evaluating Web Accessibility.
- Resources on Using Color and Contrast issues (UMN).
- All Things Web.
- University of Washington – DO-IT.
- Accessible Webpage Design: Resources (The motherload of resources and links).
- Joe Dolson’s AWD Blog.
- The Accessibility Project.
- Inclusive Design Principles
- Accessibility (#a11y) Rules podcasts
- A11Y Talks on Twitter
- The A11Y Project
- Web Accessibility Tutorials from WAI-W3C
- Accessibility Reviews
Content Management Systems
- Word Press Accessibility
- Drupal Accessibility
- Joomla Accessibility
Listservs and Groups
- LinkedIn Web Accessibility – Join LinkedIn and search for “Accessibility” groups.
- A11y Weekly – Accessibility Weekly News
Section 508 – Access Board Resources
- Federal Social Media Accessibility Toolkit Hackpad
- 508 Accessible Videos—Why (and How) to Make Them
- HHS Guidance for Audio Description (AD)
- Section 508 webinars
Below we have provided a set of websites that provide a full range of free instructional content on web design and related topics. Exploring these sites is a great way to extend the content of this curriculum, particularly for advanced students. Many of these sites are additionally linked throughout the curriculum produced for the AccessIT Web Design and Development Course.
- WDG Guide to Cascading Style Sheets.
- WDG List of CSS Properties.
- CSS Zen Garden.
- Web Design Group (WDG): Linking Style Sheets to HTML.
- Listamatic2 (sample stylized lists).
- WebAIM CSS page.
- Eric Meyer.
- Accessible Dropdown Menus by Terrill Thomas.
- HTML 5 – proposed standards .
- HTML 4.01 Specification.
- CSS 2 Specification.
- XML 1.0 Specification.
- XHTML 1.0 Specification.
Usability and Accessibility
- Information and Communication Technology (ICT) Accessibility Resource Roundup – from AT3
- Usability 101, by Jakob Nielsen.
- Jakob Nielsen: Ten Usability Heuristics.
- AskTOG: First Principles of Interaction Design.
- Web Pages That Suck.
- AccessIT – includes a searchable Knowledge Base of accessible technology questions and answers.
- Videos from DO-IT.
- WebAIM home page – articles and tutorials on all aspects of accessible web design.
- WebAIM Color Contrast Checker.
- Check my Colors.
- Dithering, from Web Style Guide.
- WebAIM on Color Blindness.
- Wellstyled Color Scheme Generator.
- VisiBone Color Chart.
- Visibone Webmaster’s Color Lab.
- Visicheck – Check your website for colorblindess issues.
- Designing UI with Color Blind Users in Mind
Graphics & Copyright
- “Graphics and Accessibility,” Yale University Web Style Guide, 2nd edition.
- What is copyright?
- 10 Big Myths about copyright explained.
- Stanford University Copyright and Fair Use Overview.
- United States Copyright Office – Questions and Answers: Copyright and Fair Use.
- “Graphics and Network Bandwidth,” Web Style Guide, 2nd Edition.
Accessibility Validators and Tools
- A nice List of Accessibility Testing Tools from The Paciello Group
- HTML Codesniffer by SQUIZ.
- W3C HTML Validator – also validates for HTML standards.
- W3C CSS Validator.
- WAVE Web Accessibility Tool.
- WAVE Toolbar Extension for Chrome.
- AIS Web Accessibility Toolbar.
- Cynthia Says.
- AC Checker.
- Web Site Accessibility Testing Tool from PowerMapper – trial issue with scan a whole site up to ten pages.
- A-Tester by Evaluera.
- a11yTools Extension for Safari macOS.
- CKEditor Accessibility Checker – plugin for CKEditor Text Editor used with many CMSs including WordPress.
- Accessibility Developer Tools – Chrome plugin that works with Chrome Developer Tools.
- ARIA Validator – Chrome plugin to assess WAI-ARIA implementation issues.
- Functional Accessibility Evaluator (FAE) – from University of Illinois – requires creating free account.
- The Accessibility Cheatsheet – bitsofcode.
- Tota11y – helps visualize how your site performs with assistive technologies. Check out the announcement blog post.
- Eiii Page Checker – European Internet Inclusion Initiative.
- ANDI (Accessible Name & Description Inspector) is a free tool from Social Security Administration.
- SortSite – Accessibility Checker and Validator – from PowerMapper.
- Pa11y – has a variety of accessibility testing tools for different situations.
There are a number of additional on-line tools available on Web Accessibility Evaluation Tools List published by the WAI. Tools include those that specifically evaluate PDFs, code for mobile devices, color contrast, and readability. Visit the Web Accessibility Evaluation Tools List…
- Heading Structure For Accessibility – by Rakesh Paladugula.
- Heading Tags (H1, H2, H3, P) in HTML – from Penn State.
- Semantic Structure – from WebAIM.
- WCAG Success Criteria.
- Accessible HTML Headings.
- WebAIM – Appropriate use of alternative text.
- Creating Accessible SVGs
- Wikipedia – Alternative text for images.
- Jim Thatcher – text alternatives for images.
- Webcredible – Writing effective ALT text for images.
- Web Design Group (WDG) – Use of ALT texts in IMGs (Warning: this is long, complicated, and a bit dated).
- WebAIM – Creating Accessible Tables.
- Jim Thatcher – Accessible tables.
- Accessify – Accessible Table Builder (actually builds the code for you).
- WebAIM – Creating Accessible Forms.
- Web Standards Project – Accessible HTML/XHTML Forms: Beginner Level.
- Jim Thatcher – Accessible Forms.
- HTML Dog – Accessible Forms.
- A List Apart – Prettier Accessible Forms (lots of CSS if you are interested).
- Creating accessible menus-Part 1
- Creating accessible menus-Part 2
- W3C – WAI – Menu tutorial
- GreyGhost – Accessible DropDown Menu
- Inclusive Components – Menus and Menu Buttons
Accessible Audio and Video Content
- “Captioning Video” resource – revised to include “description” for video content and transcripts for podcasts.
TOOLS AND RESOURCES – PODCASTS
- Semi-automated podcast transcription.
- 5 Free Transcription Software for Triumphant Transcripts.
- Do It Yourself Transcripts and Captions.
- Diverse and Accessible Podcasts.
- Scribie – Free Podcast Transcription – Note: long waiting list.
- 10 Essential Tools to Record, Edit, Transcribe and Share Podcasts.
- Sonix for Podcasters.
- The Importance of Including Transcripts with your Podcasts. And a swift solution.
RESOURCES AND TOOLS – VIDEO CAPTIONING
- WebAIM – Captions, Transcripts, and Audio Descriptions
- Open vs Closed Captioning
- Captioning Your Own Video for Free
- NCDAE – Captioning YouTube Videos
- YouTube – Add your own subtitles & closed captions
- Canvas LMS
- BlackBoard LMS
- Zoom – Getting Started With Closed Captioning
- Microsoft – Add subtitles or captions to a video in Office 365 Video
- Captioning video on Facebook
RESOURCES – DESCRIPTION
- 3 Play Media
- AST Caption Synch
- Audio Description Project – American Council of the Blind
- How JW Player Approaches Video Player Accessibility – 3Play Media
- Audio Description Associates – Joel Snyder
- 508 Accessible Videos – How to Make Audio Descriptions
- Audio Description from Perkins Learning
- Audio Description Resource Guide – National Library Service
PDF CONVERSION TOOLS/SERVICES
Below we have pulled together list of some “tools and services” that can assist in the process of converting PDFs into accessible digital documents. Thanks to Jiatyan Chen of Stanford University, Damian Sian of Princeton University and Tristan Price of Mt. Hood Community College who generated the initial list.
EnablePDF – Open Access Technologies – This remediation service is delivered via the internet. They take example documents from clients, perform compliance analysis against the WCAG 2 and PDF/UA standards, and re-mediate the files to meet those standards. Clients will able to submit similar PDF documents in bulk to the service, which will make them accessible and return them to the client.
SensusAccess – SensusAccess is a self-service, alternate media solution for educational institutions. SensusAccess allows students, faculty, staff and alumni to automatically convert documents into a range of alternate media including audio books (MP3 and DAISY), e-books (EPUB, EPUB3 and Mobi) and digital Braille. The service can also be used to convert inaccessible documents such as image-only PDF files, JPG pictures and Microsoft PowerPoint presentations into more accessible and less tricky formats.
CommonLook – NetCentric Technologies, a global leader in document accessibility, provides software products and professional services enabling faster, more cost-efficient, and more reliable processes for achieving compliance with the leading PDF and document accessibility standards, including WCAG, PDF/UA, and Section 508. CommonLook software makes the creation, remediation, and management of accessible PDF and Microsoft Office documents easier than ever before.
247 Accessible Documents – On-demand Accessible Documents – Upload a Document and receive an Accessible PDF, Accessible Word Document or an Accessible PowerPoint that meets Accessibility Standards & Guidelines 2.0 in 5 days.
inclüd – Accessible content conversion, creation, and consulting services, inclüd provides institutions with a path to accessible information, ensuring that those with exceptional needs can access content tailor made for them.
Equidox – Equidox is an automated solution that simplifies the process of discovering, converting, and publishing PDF documents to WCAG 2.0 compliant HTML. Manual PDF to HTML conversion requires a significant amount of time and extensive HTML knowledge. Not only is manual HTML conversion less efficient, but it can also introduce errors.
Equidox automates the conversion process, and saves organizations time and money.
BrailleWorks – Braille Works is a solution for repair or remediation of your documents so organizations can meet WCAG and 508 compliance standards. WCAG and Section 508 document compliance can be difficult and navigating these waters is not a job for the inexperienced. Elements of a document such as paragraph structure, tables, charts, lists etc, need to be properly organized and tagged to provide true accessibility.
Adobe Acrobat Pro DC – The defacto PDF conversion tool. Includes an Accessibilty Checker to assess your PDF files.
axaio MadeToTag – axaio MadeToTag is an Adobe InDesign CS6 to CC plug-in to properly prepare InDesign documents for export as accessible, tagged PDF file – much more easier, faster and more reliable. The tagged PDF complies with the terms of the PDF/UA-Standard, the international standard for universally accessible PDF. PDF/UA is important to all organizations and companies delivering documents which have to be conform to regulations requiring accessible electronic content including WCAG 2.0, Section 508 in the US.
PDF Accessibility Checker (PAC 2) – PAC 2 quickly tests PDF files for accessibility. PAC 2 is used to support expert and affected tests during assessment. NOTE: The company offering this software, Access for All, is based in Switzerland, you may need to use translation to understand the content.
Grackle Docs – Grackle is a cloud-based service that can convert Google Doc, Sheet, PDF and Slide into an accessible PDF. Used with Grackle’s Accessibility Checkers, Grackle Docs brings compliance, remediation and version control under one roof.
Legal references regarding web accessibility
The following are on-line resources that have listed and documented historic information about legal issues related to web accessibility. Resources include references to legal cases and rule interpretations.
World Wide Web Consortium (W3C) – Web Accessibility Laws and Policies – lists United States and international governmental policies related to web accessibility, although it is not a comprehensive or definitive listing.
Law Office of Lainey Feingold – Legal Updates – The articles listed on this page are about legal developments related to web, mobile (digital), technology and information accessibility. These articles include advocacy initiatives by the Law Office of Lainey Feingold and her co-counsel and clients, and also by other lawyers, organizations, and government agencies.
Resources primarily focused on institutions of higher education
ATHEN – Legal news – Focused on Office for Civil Rights (OCR) complaints and resolutions in that have occurred in higher education.
Karl Groves – List of Web Accessibility-Related Litigation and Settlements – last updated 2015.
University of Washington – Legal Cases by Issue – Recent legal actions against higher education institutions related to the inaccessibility of information technology (IT).
University of Minnesota – Higher Ed Accessibility Lawsuits, Complaints, and Settlements – List of higher educational institutions face liability for inaccessible web content and technologies.
last updated: 07/10/2019