A Deep dive Into Image Accessibility

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

WCAG 2.0: PerceivableGuideline 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.

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.

Demo: Screen Reader Reading Alt Text

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

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.

Alternative Text in Word

• Same rules apply: Description should include the Content & Function of the image

• No null alt text attribute

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

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

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.

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

Poll! Chemistry

H HO

O

OC

How would you best describe this image?1. A 3d model2. It doesn’t need alt

text3. CO2 + H2O = H2CO3

When to use a tactileWhen 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?

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/

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

Adding Audio to Tactiles• IVEO System from ViewPlus• Livescribe recordings coupled with

tactile printouts

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

ResourcesWebAIM.orgGuidelines for Describing STEM (Science Technology Engineering and Math) images • http://

ncam.wgbh.org/experience_learn/educational_media/stemdx/guidelinesHow 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=2709Diagram Center's Accessible Image Guidelines• http://diagramcenter.org/table-of-contents-2.html