Welcome SASIMC attendees!
Sources referenced in my session, along with some related resources, are listed here. They are also available via the Diigo collaborative bookmarking site: mbfortson’s library tagged sasimc_a11y.
A pdf of my slide deck is available here: Accessible Marketing and Communications for Higher Education. If this document is not accessible to you, please contact me so I can get it to you in a format that is.
Thanks for visiting!
The case for accessibility
Accessibility – W3C
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Convention on the Rights of Persons with Disabilities
“To enable persons with disabilities to live independently and participate fully in all aspects of life, States Parties shall take appropriate measures to ensure to persons with disabilities access, on an equal basis with others… to information and communications, including information and communications technologies and systems.”
Who are we leaving out?
Disability Statistics from the 2013 American Community Survey (ACS)
“In the year 2013, an estimated 12.6 percent (plus or minus 0.05 percentage points) of non-institutionalized, male or female, all ages, all races, regardless of ethnicity, with all education levels in the United States reported a disability.”
Table 311.10. Number and percentage distribution of students enrolled in postsecondary institutions, by level, disability status, and selected student characteristics: 2007-08 and 2011-12
From the National Center for Education Statistics Digest of Education Statistics, 2013.
WHO Director-General Dr Margaret Chan’s message on the International Day of Persons with Disabilities 2014 (IDPD, 2014)
“A billion people in the world, 15% of the population, have a disability severe enough that it limits their participation in family, community and political life.”
Designing for accessibility benefits everyone
Shared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilities
“People with disabilities using computers have similar interaction limitations as people without disabilities who are using mobile devices. Both experience similar barriers when interacting with websites and web applications. There is also significant overlap between the design solutions for both.”
Financial Factors in Developing a Web Accessibility Business Case for Your Organization
“Web accessibility can make it easier for people to find a website, access it, and use it successfully, thus resulting in increased audience (more users) and increased effectiveness (more use).”
Official Google Webmaster Central Blog: Helping users find mobile-friendly pages
“A page is eligible for the “mobile-friendly” label if it meets the following criteria as detected by Googlebot:
- Avoids software that is not common on mobile devices, like Flash
- Uses text that is readable without zooming
- Sizes content to the screen so users don’t have to scroll horizontally or zoom
- Places links far enough apart so that the correct one can be easily tapped”
Applicable laws and requirements
In the United States
WebAIM: United States Laws – Introduction to US Laws
“The following sections cover key US laws pertinent to web accessibility. This information will help you understand the conditions under which you must create web content that is accessible to individuals with disabilities under US law.”
In higher education
Carrots and Sticks: Making the Case for Accessibility – HighEdWeb Alabama
“Institutions have a legal and ethical responsibility to make technology more accessible to everyone, but many struggle with making a commitment to address this need. This session will present some of the “carrots” we get from a focus on accessibility, including better designed sites, positive PR, and reaching more users. We will also look at the “sticks”: law suits, civil rights reviews, and neglecting our users’ needs. This session shares ways to make the case for accessibility to executives and other stakeholders, gives a template for a campus technology accessibility plan, and offers suggestions to foster a culture of inclusion throughout the campus.”
Joint – Dear Colleague Letter: Electronic Book Readers
“As officials of the agencies charged with enforcement and interpretation of the ADA and Section 504, we ask that you take steps to ensure that your college or university refrains from requiring the use of any electronic book reader, or other similar technology, in a teaching or classroom environment as long as the device remains inaccessible to individuals who are blind or have low vision. It is unacceptable for universities to use emerging technology without insisting that this technology be accessible to all students.”
Around the world
WebAIM: World Laws – Introduction to Laws Throughout the World
“The following sections of this article cover key laws, documents, and events that relate to web accessibility in many countries and regions throughout the world.”
Standards and guidelines
WebAIM: Introduction to Web Accessibility
“This introduction should help you understand how people with disabilities use the web, the frustrations they feel when they cannot access the web, and what you can do to make your sites more accessible.” This excellent resource is also referenced throughout the remaining sections of the presentation.
WebAIM: Section 508 Checklist
“The following standards are excerpted from Section 508 of the Rehabilitation Act, §1194.22. The pass/fail criteria in this document represent an interpretation of Section 508 web standards.”
Designing for accessibility
How people with disabilities use the web – Office of Marketing and Communications – The University of Queensland, Australia
“Understanding how people with disabilities use the web can help us understand how to improve accessibility. However, the abilities and requirements of people with disabilities vary widely, and each person with a disability will have their own combination of techniques and technology.”
Marketing Without Barriers: Considering Digital Accessibility for Customers and Prospects with Disabilities
“What is Digital Accessibility? Designing and developing your website and digital marketing materials so that people with disabilities can perceive, understand, navigate, interact and contribute.”
Web and document a11y
Headings and lists
Headings * Page Structure * WAI Web Accessibility Tutorials
“Headings add structure and meaning to pages by labeling each content part and indicating the relative importance of those parts.
Assistive technologies and some browsers provide mechanisms to present a list of headings to the user that allows users to jump to individual headings. Headings also provide visual clues that help to skim the page or find a specific section, this is especially useful for people that are easily distracted.”
WebAIM: Microsoft Word
“Microsoft Word is currently the most common word processor on the market. Because it is so common, the .doc (and to a lesser extent, .docx) format has become the de facto format for text documents. Word is often used to create files that end up in PDF and HTML. This article will cover several things that you can do to make web content created in Word more accessible.”
WebAIM: Semantic Structure
“As with the original intention of the web, screen readers and other assistive technologies largely ignore visual styling and focus primarily on semantics and structure.”
Text equivalents for images
WebAIM: Alternative Text
“Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text.”
Alt Text in Word: Title vs Description | Terrill Thompson
“So, which field(s) should you use? Answer: It depends…”
Add alternative text to a shape, picture, chart, table, SmartArt graphic, or other object – Office Support
“You can create alternative text (alt text or Alt Text) for shapes, pictures, charts, tables, SmartArt graphics, or other objects in your Office document. Alternative text helps people with screen readers understand the content of pictures. When you use a screen reader to view your document, or save it to a file format such as HTML or DAISY (Digital Accessible Information System), alternative text appears when you move the pointer over a picture in most browsers.
This article discusses adding alternative text to a shape, picture, chart, table, SmartArt graphic, or other object and shows you how you can make the Alt Text command always available.”
WebAIM: Visual Disabilities – Color-blindness
“When designing web content for people who are color-blind you do NOT have to convert all of your images to black and white or get rid of your images entirely. In fact, you may not have to change any of your images at all. Here is the key: Make sure that colors are not your only method of conveying important information.”
WebAIM: Color Contrast Checker
“Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity.
WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger). Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.”
WebAIM: Links and Hypertext – Introduction to Links and Hypertext
“Hypertext links are one of the most basic elements of HTML, as its name implies (HTML stands for HyperText Markup Language). As such, making hypertext links accessible is one of the most basic and most important aspects of web accessibility.”
Captions, transcripts, and audio description for multimedia
WebAIM: Captions, Transcripts, and Audio Descriptions
Captions “are text versions of the spoken word presented within multimedia.”
Transcripts “provide a textual version of the content that can be accessed by anyone.”
Audio descriptions “provide additional information about what is visible on the screen…If web video is produced with accessibility in mind, then audio descriptions are often unnecessary, as long as visual elements within the video are described in the audio.”
Captioning guidelines and preferred techniques from the Described and Captioned Media Program.
How-To Guides for Video Captions, Subtitles, Transcripts
Step-by-step instructions on how to add captions to Adobe, Apple, Blackboard, Camtasia, Facebook, Tegrity, Vimeo, Windows Media, YouTube and other projects.
Creating Closed Captions with Amara and Overstream
“Amara.org and Overstream.net are two websites that offer free applications through which users can subtitle or closed caption other users’ videos uploaded to YouTube and Vimeo. ”
Add subtitles & closed captions – YouTube Help
“Subtitles and closed captions open up your content to a larger audience, including deaf or hard of hearing viewers or those who speak languages besides the one spoken in your video.”
Common accessibility issues:
- Lack of headings
- Poor color contrast
- Missing text equivalents for images
- Videos lacking captioning
Accessibility in Social Media – SSB BART Group
“I believe that we (the community of PwD) are finding our voices via social media; however, there are some significant accessibility issues that should be addressed.”
Federal Social Media Accessibility Toolkit Hackpad | DigitalGov
“This Toolkit is your guide to Improving the Accessibility of Social Media in Government. Created with the input of social media leaders and users across government and the private sector, this living document contains helpful tips, real-life examples and best practices to ensure that your social media content is usable and accessible to all citizens, including those with disabilities.”
The Official CAPTCHA Site
“A CAPTCHA is a program that protects websites against bots by generating and grading tests that humans can pass but current computer programs cannot.”
Captcha SUCKS! | IceflowStudios – YouTube
“One of my biggest peeves online: Captcha. It’s completely useless! Judge for yourself!”
The accessibility of Google’s No CAPTCHA » Simply Accessible
“Google has released a game-changing version of its reCAPTCHA. They’ve called it No CAPTCHA and it makes some pretty significant steps forward to removing barriers for people with disabilities and still defending against bots.”
Facebook mobile site
Many assistive technology users prefer to use Facebook’s mobile site, even on a desktop.
Facebook Accessibility’s Photos – Facebook Accessibility
You can provide text equivalents for images by including an image description when you post a picture or editing the post to include a description. Here’s an example from the page for Facebook’s accessibility team.
How do I add captions to my video? | Facebook Help Center
“You can include captions with your video by uploading a SubRip (.srt) file with it. To add captions in other languages, you can edit your video and upload an additional SubRip file for each new language.”
Accessibility for People with Disabilities | Facebook Help Center
“Facebook is committed to creating a great experience for all people. Learn about the built-in features and technologies that help people with disabilities, like vision loss and deafness, to get the most out of Facebook.”
“News and updates from the Facebook Accessibility team.”
Twitter (Accidentally) Takes Step Toward Accessible Images | Adrian Roselli
“Twitter has officially released its new-ish tweet quoting feature. Since at least last June, if a user included the URL of a tweet within a new tweet, it would present viewers with the full body (albeit smaller) of the referenced tweet within the new tweet.”
“alt=” from:mbfortson – Twitter Search
You can provide image descriptions in context by adding alt= or image description: to your tweet.
“Tommy Edison, who has been blind since birth, demonstrates how to use Instagram on the iPhone 4S. He uses the Accessibility setting on the phone which allows him to navigate the touch-screen and some applications.”
“Tommy Edison, who has been blind since birth, demonstrates how he reads comments that are posted on his Instagram account. He uses the iPhone’s Accessibility option called VoiceOver which allows him to read incoming notifications.”
Instagram image description examples:
- Childrens Museum of Pittsburgh on Instagram: “Sssssending good vibes on this sssssunny Tuesday morning!”
- Childrens Museum of Pittsburgh on Instagram: “Just caught up with Harold the Sheep…”
- Alastair Somerville on Instagram: “Paper prototype of tactile map for an Oxford #museum. Maybe #3dprint? #a11y #access”
I’ll be adding some information about and resources for usability testing with people with disabilities here.
Accessibility Evaluation Tools
WebAIM: Accessibility Evaluation Tools
“Many web designers, developers, and evaluators are introduced to web access through accessibility tools. All accessibility tools perform automated checks of web pages for accessibility issues and all generally have additional features, but each tool targets different audiences. In order to help web designers, developers, and evaluators choose an appropriate tool for their purposes, this article discusses the general types or classifications of accessibility tools.”
Web Accessibility Evaluation Tools List
“Web accessibility evaluation tools are software programs or online services that help you determine if web content meets accessibility guidelines. This page provides a list of evaluation tools that you can filter to find ones that match your particular needs. To determine what kind of tool you need and how they are able to assist you, see Selecting Web Accessibility Evaluation Tools.”
Strengths and Limitations of Automated Tools
Strengths and limitations of automated accessibility tools, from the University of Minnesota Duluth.
Writing effective ALT text – University of Leicester
An accessibility checker can tell you whether or not alt text is present, but it can’t tell if the description it contains is meaningful.
WAVE Web Accessibility Tool
“WAVE is developed and made available as a free community service by WebAIM. Originally launched in 2001, WAVE has been used to evaluate the accessibility of millions of web pages.” See also WAVE Help http://wave.webaim.org/help
Accessible University Demo Site – Inaccessible Version
“Accessible University (AU) is a fictional university, and this is its fictional home page. This page is designed to demonstrate a variety of common web design problems that result in visitors with disabilities being unable to access the content or features of a web page. Although the heading at the top of this section of the page suggests that AU may be a welcoming institution, the inaccessible design of this page sends the opposite message.”
This page is an improved version, with 18 accessibility issues corrected: Accessible University Demo Site – Accessible Version
WebAIM Color Contrast Checker
WebAIM: Color Contrast Checker
“Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity.”
ColorZilla for Chrome and Firefox
WebAIM suggests using these tools to get color values to input in the Color Contrast Checker.
Microsoft Office Accessibility Checker
Check for accessibility issues – Office Support
“Like the spelling checker tells you about possible spelling errors, Accessibility Checker in Word, Excel, and PowerPoint tells you about possible accessibility issues in your Office file so you can fix these issues so someone with a disability can read and get to your content.”
Rules used by the Accessibility Checker – Office Support
“To make sure that everyone can read your file, run Accessibility Checker. It flags issues and provides instructions for fixing them. Accessibility Checker tests content for factors that affect accessibility in three categories:
Errors, Warnings, Tips.”
Adobe Acrobat accessibility tools
Using the Acrobat Pro DC Accessibility Checker
“The accessibility checking tools in Adobe Acrobat Pro DC – Accessibility Checker (Full Check) and the Make Accessible action wizard – can identify many issues in PDF documents that may be in conflict with Adobe’s interpretations of the accessibility guidelines referenced in the application and its documentation.”
Convention on the Rights of Persons with Disabilities
“Disability results from the interaction between persons with impairments and attitudinal and environmental barriers that hinders their full and effective participation in society on an equal basis with others.”
Redefining Disability according to the World Health Organization
Valerie Fletcher on redefining disability: “Disability is a phenomenon of the experience that occurs by the individual intersecting with the environment, including physical, information, communication, social and policy environments.”
Let’s create accessibility.