Creating Accessible Content

Ryan Vernon and Stephen Blaeser

BC College and Institute Library Services (CILS)

Definitions

Accessibility
The degree to which a product, device, service, or environment is available to as many people as possible.

From en.wikipedia.org/wiki/Accessibility

Universal design

A printed sign that has been corrected in pen

An approach to the design of all products and environments to be as usable as possible by as many people as possible regardless of age, ability, or situation.

From www.udeducation.org

Why bother with accessibility?

Legal duty to accommodate:

Section 2 of the Canadian Human Rights Act:

The purpose of this Act is to extend the laws in Canada to give effect, within the purview of matters coming within the legislative authority of Parliament, to the principle that all individuals should have an opportunity equal with other individuals to make for themselves the lives that they are able and wish to have and to have their needs accommodated, consistent with their duties and obligations as members of society, without being hindered in or prevented from doing so by discriminatory practices based on race, national or ethnic origin, colour, religion, age, sex, sexual orientation, marital status, family status, disability or conviction for an offence for which a pardon has been granted.

Why bother with accessibility 2

Moral duty to accommodate:

We need to accommodate to meet the needs of our students.

Why bother with accessibility 3


In all areas, but especially in education, the provision of accessible material is simply best practice.

Perceptual Disability

"Perceptual disability" means a disability that prevents or inhibits a person from reading or hearing a literary, musical, dramatic or artistic work in its original format, and includes such a disability resulting from
(a) severe or total impairment of sight or hearing or the inability to focus or move one's eyes,
(b) the inability to hold or manipulate a book, or
(c) an impairment relating to comprehension;

Definition from the Canadian Copyright Act

What the eye sees

In this exercise elements may appear:
Reversed,
Inverted
Transposed
Spelling may appear inconsistent

What the eye sees 2

Theqo ypro bqep th eboqc orno nth eflo or. Arew egoi ng toe at bodc orn th ats qee no nth efl oor? Itt ook th emalo ng timet odic kupth e qbbco rn. All th echilb rentho ughtth at saw thedes tthin gtopo.

What the eye sees 3

Theqo ypro bqep th eboqc orno nth eflo or. Arew egoi ng toe at bodc orn th ats qee no nth efl oor? Itt ook th emalo ng timet odic kupth e qbbco rn. All th echilb rentho ughtth at saw thedes tthin gtopo.

The boy dropped the popcorn on the floor. Are we going to eat popcorn that’s been on the floor? It took them a long time to pick up the popcorn. All the children thought that was the best thing to do.

What the eye sees 4

This exercise is from: Black, Nancy. “What the Eye Sees.” PowerPoint presentation for CLA Conference, 2008. http://www.cla.ca/conference/2008/postcon.htm. Used with permission.

How accessible are the following?

Websites
Google reader / Google reader text only
CBC.ca
Kamloops Daily News
BlazerHockey.com
Buildings
Kamloops Cineplex
TRU Campus Activity Centre
Devices
iPod Touch / iPhone
Amazon Kindle

Standards and guides

Web Content Accessibility Guidelines (WCAG)
Guidelines published by the W3C's Web Accessibility Initiative.
Section 508
Section 508 Amendment to the American Rehabilitation Act of 1973. Requires Federal agencies to make their electronic information accessible to people with disabilities.

Standards and guides 2

WebAIM
WebAIM is an organization based at Utah State University. They offer accessibility training, tools and guides, much of which can be accessed for free on their website.
Government of Canada Treasury Board CLF 2.0 Standard on the Accessibility, Interoperability and Usability of Web Sites.
Web accessibility guidelines for federal websites.

Standards vs. principles

Standards
prescriptive
provide a set of rules that must be followed
Principles
descriptive
express outcomes, but don't necessarily stipulate how those outcomes are to be executed

Standards vs. principles 2

Both standards and principles are useful
Standards provide advice on how to solve specific problems
Principles define a result or effect, but not necessarily how that result or effect might be achieved.

Accessibility principles 3

  • Use structured content
  • Use textual equivalents for all non-textual elements
  • Use text with consideration
  • Be aware of context / avoid surprises
  • Verify accessibility
    •

    Use structured content

    Structure allows user to navigate effectively using a text-to-speech or screen reader interface.

    Use structured content 2

    Examples of structure include
    Heading levels in HTML or MS Word
    CSS in web design
    Styles in MS Word
    Tags in PDFs

    Use structured content 3

    Use structured content 4

    Structure also allows you to quickly change the look and feel of content, and ultimately adds value beyond accessibility.

    Use structured content 6

    Things to Avoid
    WYSIWYG design
    The use of non-structural components for design

    Use textual equivalents

    Multimedia elements, images and other figures such as graphs require description so that they can be parsed by individuals using a text-to-speech or screen reader interface.

    Use textual equivalents 2

    Examples
    Alt text
    Video caption
    Text only alternate version
    Figure description (figure only / figure with description)

    Use text with consideration

    For example
    Avoid low contrast color schemes
    Avoid blinking or flashing elements
    Choose readable fonts

    Be aware of context

    Avoid surprises: Use descriptive language and avoid pop-ups and links to files. Elements not situated in context can be annoying to all users, but this is especially true for individuals using a text-to-speech or screen reader interface.

    Verify accessibility

    No matter how mindful you are of accessibility, it’s possible that you’ve missed something. This is why it’s good to use accessibility testing tools and consult users.

    Verify accessibility 2

    Cynthia Says
    "A web content accessibility validation solution."
    Wave
    "WAVE is a free web accessibility evaluation tool provided by WebAIM." A Firefox toolbar is also available.
    W3C Markup Validation Service
    "Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc."

    Web accessibility

    Layout:
    Use headings to structure document
    Use descriptive page titles
    Use CSS (Cascading Style Sheets), but ensure that pages are readable without the associated CSS
    Maintain white space between columns
    Avoid the use of frames

    Web accessibility 2

    Text presentation:
    Use a high contrast font / background
    Use larger font sizes (12 point or above
    Use fonts consistently
    Use sans-serif fonts (Verdana, Ariel or Calibri)
    Don’t convey meaning only through colour (ie "click the red link")

    Web accessibility 3

    Multimedia presentation:
    Use textual equivalents for all graphic elements
    Summarize graphs and charts; use the “longdesc” attribute
    Use the “alt” attribute to describe the function of images and animations
    Provide captions or transcripts for audio content and descriptions for video
    Screen readers may not be able to parse flash, scripts and plug-ins: provide alternate content

    Web accessibility 4

    Tables:
    Use tables only for tabular data
    List row and column
    Ensure coherency of line-by-line reading

    Word documents

    Layout:
    Use headings to structure document
    Maintain white space between columns
    Use numbered and bulleted lists

    Word documents 2

    Structure:
    Avoid WYSIWYG design
    Use "Styles and formatting."
    Don’t skip heading levels

    Word documents 3

    Images:
    Avoid using several images on one page
    Explain or caption graphic elements
    Use the "alt text" feature

    Word documents 4

    Example of inaccessible Word document

    Example of accessible Word document

    PDF types

    Image Only PDF

    "Image only" PDFs are a simple scan or image of a print page and do not contain text. This type of PDF is inaccessible to individuals using a screen reader or other text-to-speech solution, but may be useful to individuals using the PDF for either print or on-screen enlargement.

    PDF types 2

    In addition to scanned images, "text readable" PDFs contain text, which is typically generated through OCR or from an electronic source document, such as a word processor file. "Text readable" PDFs are not necessarily “accessible,” however, because they lack structure and tagging.

    PDF types 3

    Accessible PDF

    “Accessible” PDFs contain additional structure and content that allow users to navigate within the document. To be” accessible,” a PDF must have

    1. Tagging: metadata labels, or tags, define document structure such as heading levels and column order;
    2. Alt-text: textual description of non-textual elements, such as images and links; and
    3. Navigation features: a table of contents and a heading structure.

    PDF creation

    • Specific techniques of accessible PDF authoring depends on the software used to create the PDF.
    • PDFs captured via OCR may need significant intervention to make them accessible.
    • PDF accessibility is a function of structure added in the authoring tool.

    Conclusion

    • Keep your user in mind
    • Use principles that account for user experience
    • Pay attention to relevant standards
    • Test. Test. Test.

    Questions?


    Don't stop questioning

    Thank you

    Photo Credits