A Deep Dive into Making Still Images Accessible in your Brightspace Courses - webinar for the Brightspace Teaching & Learning Community. March 8, 2016, with Karen Sorensen, Accessibility Advocate at Portland Community College

1. A Deep diveInto
Image Accessibility

2. Who am I?
Me : Karen Sorensen
• Passionate about using technology for good.
Work: Portland Community College (PCC)
• Accessibility advocate/Online development facilitator in DL (2011-
• Web developer for college (2005-2011)
Education:
• Masters of Science in Education: Policy, Foundations and Admin.
• Multimedia Certificate from PCC
• Bachelors of Arts in Philosophy

3. WCAG 2.0: Perceivable
Guideline 1.1 Text Alternatives: Provide text
alternatives for any non-text content so that
it can be changed into other forms people
need, such as large print, braille, speech,
symbols or simpler language.

4. What Alternative (Alt) Text Is:
A text description of an image that presents
the Content and the Function of the image
for the benefit of those who can’t see the
image.

5. Demo: Screen Reader Reading Alt Text

6. What Alternative (Alt) Text Isn’t:
Alt text is not the same as a tooltip or title attribute which
is what you sometimes see when you hover over an
image.
• Tooltips/Title attributes are not usually read by a screen reader.
• Tooltips/Title attributes cannot be enlarged for low vision users

7. Types of Alternative Text for Web pages
• An HTML alt text attribute
• An image caption
• Null text for decorative images that aren’t
important
• A description in the surrounding paragraph text.
…as long as they describe the content and the
function of the image.

8. Alternative Text in Word
• Same rules apply: Description should include the
Content & Function of the image
• No null alt text attribute

9. Alternative Text in PowerPoint
• Same rules apply: Description should include the
Content & Function of the image
• No null alt text attribute
• Long descriptions can go in the Notes section
• Trick: Place invisible text on the slide

10. Other things to consider…
• Color contrast in the image
• Not using color alone to convey meaning
• Avoid flashing/blinking, bright light in
animated images and videos

11. Poll! History Class
George Washington
Because of his role as the Commander in Chief of American
forces in the Revolutionary War, and, later, the first President of
the United States, George Washington is often called the "Father
of his Country".
Cited from: http://webaim.org/techniques/alttext/
• What would be the appropriate alt attribute for the image
above?
a) "George Washington"
b) An empty alt attribute (alt="")
c) "Image"
d) The image does not need an alt attribute.

12. Poll! Geography Class
• What would be the appropriate alt
attribute for the image above?
a) “Map of North and South America"
b) An empty alt attribute (alt="")
c) The image does not need an alt
attribute.
d) Tabular data of the languages
spoken in different countries in
North and South America

13. Poll! Chemistry
H H
O
O
O
C
How would you best
describe this image?
1. A 3d model
2. It doesn’t need alt text
3. CO2 + H2O = H2CO3

14. When to use a tactile
When the spatial proximity in the image is important and
difficult to describe in text, use a tactile image or a model.
• Maps
• Diagrams
• Graphs
• Other suggestions?

15. Sources for Tactiles
• American Printing House for the Blind
• http://imagelibrary.aph.org/aphb/index.jsp
• Princeton Braillists
• http://princetonbraillists.org/international-and-us-maps/
• NASA
• http://amazingspace.org/tactile-astronomy/

16. Creating Tactiles
• Braille Printers
• 3D Printing
• Free 3D printable files on Thingiverse.org

17. Adding Audio to Tactiles
• IVEO System from ViewPlus
• Livescribe recordings coupled with tactile
printouts

18. Other areas of research
• Sonification
• http://diagramcenter.org/samplebook/03b-
Quadratic.xhtml#sonification
• http://blogs.scientificamerican.com/voices/making-astronomy-
accessible-for-the-visually-impaired/
• Haptic devices
• http://diagramcenter.org/samplebook/09-Haptics.xhtml
• PCC’s Subject Area Accessibility Studies

19. Resources
WebAIM.org
Guidelines for Describing STEM (Science Technology Engineering and Math) images
• http://ncam.wgbh.org/experience_learn/educational_media/stemdx/guidelines
How Do We Access Meaning in Art? (Describing art images in alt text)
• http://www.artbeyondsight.org/handbook/acs-onlinetraining.shtml
• http://www.artbeyondsight.org/mei/institute-publications/
Open University's Guidelines for describing visual teaching materials
• http://kn.open.ac.uk/public/workspace.cfm?wpid=2709
Diagram Center's Accessible Image Guidelines
• http://diagramcenter.org/table-of-contents-2.html