Drexel University
Office of Information Resources and Technology presents:
Institute on Innovation in Training and Teaching
Please note: if you are viewing this page in the Opera browser, you can see it in slide format by hitting your F11 key.
That cell phone thing…
Please turn them off or set them to vibrate.
Thanks!
Objectives
By the end of this presentation, you should
- Understand the meaning of "accessibility"
- Be able to define the types of disabilities Web users might have
- Understand basic concepts in creating accessible Web content
- Have a basic understanding of the laws and standards guiding Web accessibility
- Know where to go for additional information and resources
Agenda
- Define "accessibility"
- Identify the types of disabilities users might have
- Discuss how we can accommodate users with disabilities using the POUR model (Perceivable, Operable, Understandable, Robust)
- Review the laws concerning accessibility (Section 508, ADA, etc.)
- Provide additional resources
- Q and A
Our approach
What we can't do in three hours
- Teach you HTML, CSS, advanced web design/development techniques
- Cover every issue and concept involved in accessible design
Our approach
What we can do
Provide you with general concepts so that
- If you are the person creating websites you will understand how to make them accessible, or know where to go to find the necessary information
- If you are the person overseeing the design or maintenance of websites, you will know how to direct the designers on your expectations for accessible content
- You will be able to discuss the topic meaningfully and spread the word
Group Discussion
- Form into groups or pairs (depending on size of group)
- Introduce yourself
- Someone will head each group
- Topic: describe an occasion when you wanted to accomplish something online and became frustrated
- How did you feel?
- Did you blame yourself?
- Did you blame the website?
- Entire group discussion
Web accessibility, a definition
…Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.
— Web Accessibility Initiative (WAI)
Some things to remember…
- Close to twenty percent of Web users have some form of disability
- Accommodating disabled users allows them to participate in society to a greater extent than ever before
- Accommodating disabled users allows them to contribute to society to a greater extent than ever before
- All of us are aging, and as we do, are abilities to use the Web become more limited
- By creating websites that are more accessible to users with special needs, we create websites that are more usable for all users
Types of Disabilities
- Visual
- Auditory
- Motor
- Cognitive
- Seizure
Visual Disabilities
- Blindness
- Low vision
- Macular degeneration
- Glaucoma
- Diabetic retinopathy
- Cataract
- Color blindness
How the Visually Disabled Access the Web
- Screen readers
- Screen magnifiers
- With a keyboard rather than a mouse
- Adjusting browser preferences to enlarge text
- Adjusting browser preferences to enhance contrast
Accessing the Web with Auditory Disabilities
- Pretty much the way most of us do, through a browser
- Rely on text equivalents for auditory content
Motor Disabilities
- Traumatic Injuries
- Spinal cord injury
- Loss or damage of limb
- Diseases and Congenital Conditions
- Cerebral palsy
- Muscular dystrophy
- Multiple sclerosis
- Spina bifida
- ALS (Lou Gehrig's Disease)
- Arthritis
- Parkinson's disease
Accessing the Web with Motor Disabilities
- With the keyboard rather than the mouse
- With the aid of assistive technology
- Modified mouse
- Head wands
- Mouth sticks
- Sip and puff switch
Cognitive Disabilities
Includes users who have difficulty with:
- Memory
- Problem-solving
- Attention
- Reading, linguistic, and verbal comprehension
- Math comprehension
- Visual comprehension
These are functional rather than clinical designations.
Seizure Disorders
- Refers to users with photosensitive epilepsy
- Seizures can be triggered by content that flashes 3 times per second or faster
Break
Please be back in 10 minutes
About WCAG and POUR
- WCAG stands for Web Content Accessibility Guidelines
- WCAG is within the World Wide Web Consortium (W3C)
- "The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web" (from Wikipedia)
- POUR stands for Perceivable, Operable, Understandable, Robust
Why POUR?
- Focuses on the person rather than the technology
- WCAG 1 is outdated
- Section 508 is outdated and does not address cognitive disabilities
POUR at a Glance
Perceivable
- Provide text alternatives for non-text content
- provide captions and alternatives for multimedia
- Make information adaptable and available
- Use sufficient contrast
Operable
- Make all functionality keyboard accessible
- Give users enough time to read and use content
- Do not use content known to cause seizures
- Help users navigate and find content
POUR at a Glance, cont.
Understandable
- Make text readable and understandable
- Make context appear and operate in predictable ways
- Help users avoid and correct mistakes
Robust
- Maximize compatibility with current and future technologies
Perceivable: provide text alternatives
- Always add alt attribute to any image that conveys information
- Always use empty alt attributes for images that do not convey information (i.e. purely decorative)
Always add alt attribute to any image that conveys information
- Alt stands for "alternative"
Alt attributes are read by screen readers used by the blind, but does not appear on screen- Use the
alt attribute for all images that convey meaning
- This is especially important for images serving as navigational elements
- Use empty
alt attributes for images that are purely decorative or convey no meaning
More than half the battle
The importance of making absolutely all the images on your Website accessible cannot be underestimated. This simple action alone gets you more than halfway toward an accessible site. You have to do it correctly, but even if you skip every other accessibility step, your sites immediately become fundamentally accessible.
— Joe Clark, Building Accessible Websites
What does the alt attribute look like?
For example:
The code that places this image on the page looks like this:
Now imagine this...
What if the navigation elements show here were images that did not have alt attributes?
This site would not be usable to anyone with a screen reader.
Empty alt attributes
Use when an image conveys no meaning, and is only decorative or controls visual layout.
The red bar in the example below is purely decorative.
The code should look like this:
Perceivable: provide captions and alternatives for multimedia
- Provide text version of audio content
- Provide synchronous captioning for audio with video
- Provide audio or text with video that does not have audio
- Media Access Generator (MAGpie) is a free program for creating captions in multimedia: http://ncam.wgbh.org/webaccess/magpie/
Why synchronous?
Because so much is conveyed by facial expression, gestures and posture, which a transcription separate from the visual presentation would lose.
A little more about MAGpie…
- While the process of creating captions is time consuming, MAGpie is fairly easy to use
- Allows you to create captions for most popular multimedia programs such as
- Quicktime
- RealPlayer
- Windows Media Player.
Perceivable: make information adaptable and available to assistive technologies
Properly mark up tables and forms
- Tables and forms will not make sense when read by a screen reader unless properly marked up
- In tables, use proper code to associate headings with data
- In forms, use proper code to associate text with form controls, such as text fields, buttons, or check boxes
- There is a bit of a learning curve with this one; at this point, let's focus more on the concept rather than the code necessary to achieve it
A typical example of a table…
How far is it from York to Altoona?
Now let's imagine you can't see the table…
If you had the flowing read aloud to you…
Philadelphia, Lancaster, York, Harrisburg, Altoona, Pittsburgh, Philadelphia, 0, 79, 101, 105, 236, 305, Lancaster, 79, 0, 25, 41, 173, 241, York, 101, 25, 0, 24, 153, 221, Harrisburg, 105, 41, 24, 0, 135, 203…
How far is it from Lancaster to Pittsburgh?
This is what you would here from a screen reader if the table were not properly marked up.
Let's try this again…
If you had the following read aloud to you…
…Lancaster, Philadelphia, 79, Lancaster, Lancaster, 0, Lancaster, York, 25, Lancaster, Harrisburg, 41, Lancaster, Altoona, 173, Lancaster, Pittsburgh, 241…
Again, how far is it from Lancaster to Pittsburgh?
This is what you would here from a screen reader if the table were properly marked up.
And what is a properly marked up table?
- Headers
are designated for rows and columns using the header tag: <th>
- In our example, the names of the cities, which appear visually in bold, are the headers
- Associate the headers with the content in the data cells
<td> using the <scope> attribute
- In our example, the mileage between cities is the content in the data cells
Let's take a look at the table and the code behind it.
A typical example of a form…
Associate related elements with each other
As with tables, related elements need to be associated with each other for screen readers to make sense of them. In the case of forms, labels such as "First Name" must be associated with the corresponding text fields.
For example…
The for attribute of the label tag and the id attribute of the input tag associate the two elements with each other.
Perceivable: use sufficient contrast
- Text is distinguishable from background
- Information is not conveyed solely through the use of color
Text is distinguishable from background
- If possible, look at your site in black and white to see if text is still legible
- Set you monitor to monochromatic, or
- Take a screen capture and check in an image editor after changing to black and white
- Beware of textured or patterned backgrounds on websites
- Check visited link text to make sure it is still legible
Do not convey information solely through the use of color
- Using color is okay, and can often enhance usability
- But color cannot be the sole method of conveying meaning
- Effects users who are blind, suffer from low vision, and who are color blind
Example of what not to do
Example of what not to do
Example of what to do
Example of what to do
Operable: keyboard accessibility
- Navigation through the site is possible with a keyboard
- Interaction with elements on the page are possible with a keyboard
Navigation through the site is possible with a keyboard
- Let's see an example of what this means: http://www.drexel.edu
- We were able to tab through and navigate the site without the use of a mouse
Operable: do not use content know to cause seizures
- Do not use content that flashes more than three times per second
Avoid unnecessary animation
- Do not use content that flashes more than three times per second
- Animation can also cause a distraction for users with cognitive challenges (And the rest of us, too!)
- However, animation used selectively can also help users with cognitive disabilities by providing information for learners who are visually oriented
An example of content flashing more than three times per second
An example of useful animation
Operable: help users navigate and find content
- Use "skip navigation" or "skip to main content" links
- Use a persistent navigation scheme across all pages of the website
- Use intuitive link text that makes sense out of context
- Use page titles that describe content
Use "Skip Navigation" links
- Skip Navigation links allow users to bypass navigational elements and go directly to content
- Aids blind users as well as users with motor disabilities
- Should be visible
- Should be first element on the page
- Also useful to anyone using a small screen
Skip Navigation example
Webaim.org
Skip Navigation example
Target.com
Persistent navigation: good example
Notice how you can quickly see where you are from one page to the next.
Persistent navigation: bad example
Amazon's home page. Let's select books…
Persistent navigation: bad example
Where are we? How do we get to other categories? Where did the Electronics link go, for example?
Use intuitive link text
- Screen readers can scan web pages for link text
- Also helpful to users with cognitive challenges (and pretty much everyone else too!)
- Link text should make sense out of context
- Click here is evil
- So is More
Which is more user friendly?
Understandable: make text readable and understandable
- Use headings and subheadings
- Write in a journalistic style: make your point and then explain it
- Make one point per paragraph
- Use short line lengths: seven to ten words per line
- Use plain language whenever possible
- Use bulleted lists
- Write with an active voice
- Avoid unnecessary jargon and slang, which can increase the user’s cognitive load
Where I got this list…
A List Apart, Deafness and the User Experience, by Lisa Herrod.
Herrod is writing specifically about accommodating Deaf users in her article, but these rules apply to users with cognitive challenges, and to Blind users as well. Actually, they apply to all users.
Understandable: make content appear and operate predictably
- Avoid opening new windows as much as possible
- Warn users if selecting a link will open a new window
- Warn users if selecting a link will launch PDF, Word Doc, PPT, etc.
What's wrong with opening new windows?
- Screen readers may not noticed that they have opened
- If unpredicted, can pose a cognitive challenge
- Users often don't see that a new window has opened
- The Back button on the new window will not work
Limit use of PDF, PPT, Doc files
- Poses challenges to blind users, as well as users with cognitive and motor disabilities
- Can be made accessible to screen readers, but it takes work
- If possible, use HTML instead
- learn how to properly structure information in Word documents
- Warn users with an icon or text
- Provide a link to plug in
Understandable: help users avoid and correct mistakes
- Alert users when a form field is filled out incorrectly
- Indicate the correct format for dates, phone numbers, etc., on forms
Indicate the correct format for dates, phone numbers, etc., on forms
Break
Please be back in 10 minutes
Robust: maximize compatibility with various technologies
- Separate content from presentation
- Use proper markup
A short history lesson…
- HTML was designed to logically mark up information; not to control visual display
- When the Web became part of popular culture, commercial designers were concerned with visual presentation rather than logical markup
- Browser wars: proprietary tags developed that only worked in certain browsers
- Advent of CSS: markup and visual display could be separated from each other
- Today: getting Web designers and developers onboard
Create Websites According to "Web Standards"
- Key concept: marking up content logically, semantically
- Key concept: separating content (HTML) from presentation (CSS)
- The Web Standards Project agitated to get various browser makers to accept standard markup
- Do not use "deprecated" markup
- Benefit: one content source can be accessed and repurposed via various technologies including screen readers
- Benefit: content can be readily adapted for special needs
Separating markup from presentation
By using CSS to create the visual presentation, we allow the HTML to do it's job, which is structuring content.
HTML documents can have multiple CSS documents attached to them, allowing the content to be used and displayed for various purposes.
Good verses bad markup
This example of a web page could be achieved by using either good or bad markup.
Good markup
Good markup creates a logical structure for the information, and is separate from presentation.
Bad markup
Bad markup mixes structural and presentational information together. In the example below, the content is "told" how to look, but has no informational hierarchy.
And how does this aid accessibility?
- Site content can be repurposed for various displays
- Larger type
- Stronger contrast
- Simpler layout
- Screen readers can scan content much more easily
Some pretty cool examples of the power of web standards design…
The following examples illustrate the power of proper markup and visual presentations created in CSS:
Glaucoma Research Foundation
The various style sheets allow users to control contrast, type size, and layout according to their needs and preferences.
http://www.glaucoma.org
css Zen Garden
A nifty experiment — one HTML file (which may not be altered by participants) and over 200 different style sheets, each by a different designer, and each creating a unique presentation. Proves that Web standard design can also be visually exciting.
http://www.csszengarden.com/
Opera Show
Opera Show is not a website, but a feature of the Opera browser. It allows users to create a style sheet that formats the content into "slides" similar in appearance to a PowerPoint presentation. This web page is an example, and also is linked to a style sheet that controls its layout and appearance when printed.
How good is your HTML and CSS?
Find out with the W3C's online validation services.
Accessibility Laws and Standards
- Section 508
- Americans with Disabilities Act (ADA)
- Web Content Accessibility Guidelines (WCAG)
Section 508
- Part of the Reauthorized Rehabilitation Act of 1998
- Provides specific standards for Web accessibility
- Standards are required for all Federal websites
- Many states have adopted Section 508 as their standard
- Therefore, state institutions, including universities, would be required to adhere to the standards
Americans with Disabilities Act (ADA)
- Is not a set of specific standards
- Became law in 1990 — prior to expansion of the Web into popular consciousness
- Therefore, application of ADA to website accessibility has not been definitively decided
- Interpretation hinges on "place of public accommodation"
- Keep an eye out for NFB verses Target
Web Content Accessibility Guidelines (WCAG)
- Developed by Web Accessibility Initiative (WAI)
- Not regulations, but guidelines
- WCAG 2 has reached "Candidate Recommendation" stage
Hands on activity: WAVE
- Sponsored by WebAim.org
- Excellent resource for a first pass on assessing accessibility
- However, cannot guarantee that a website is accessible (No Web accessibility tool can!)
- Can download it as a toolbar on the Firefox browser
Hands on activity: Fangs
- Downloadable to Firefox browser as a tool
- Sponsored by Standards Schmandards
- Emulates in text what a screen reader reads
- Useful for getting an idea of how your website content in interpreted by screen readers
Some Closing Thoughts
- It's much more cost effective to design a site for accessibility than to retro-fit it
- Accessibility issues can't be solved by technology alone
- Accessible design doesn't have to be boring design
Objectives Revisited
- Do we Understand the meaning of "accessibility"
- Are we able to define the types of disabilities Web users might have
- Do we understand basic concepts in creating accessible Web content
- Do we have a basic understanding of the laws and standards guiding Web accessibility
Web Accessibility and You
- What would you like to discuss?
- Problems
- Solutions
- Personal experience
- Questions?
Resources
Evaluation tools
Resources
Laws and standards
Thank You!
Our contact information:
Drexel University
Online Learning Team
Korman 109
215-895-1224
olt@drexel.edu
