Designing accessible college web pages
1 / 59

Designing Accessible - PowerPoint PPT Presentation

  • Updated On :

Designing Accessible College Web Pages. By Rachel Kessel, Project Manager for WAOL at CIS & Kayeri Akweks, Manager of Online Student Services, SBCTC Summer 2005 Presentation at the YVCC Distance Learning Seminar.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Designing Accessible ' - PamelaLan

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Designing accessible college web pages l.jpg

Designing Accessible College Web Pages

By Rachel Kessel, Project Manager for WAOL at CIS & Kayeri Akweks, Manager of Online Student Services, SBCTC

Summer 2005 Presentation at the YVCC Distance Learning Seminar

Creating accessible web pages ensures that ALL persons who visit your web sitehave the SAME information available.

Visually impaired low vision students use screen enlargement technology l.jpg

Visually impaired/low vision students use screen enlargement technology.

Consistent layout

Logical organization of material

Make life much easier for this population.

Screen magnifiers l.jpg
Screen Magnifiers technology.

  • Screen magnification systems enlarge portions of the screen to provide easier access for learners with limited vision.

  • May be accompanied by audio output to assist in accessing the information and navigation through the course material.

Screen readers l.jpg
Screen Readers technology.

  • This software, used by learners who are blind, allows web page text to be read out by a voice synthesizer.

  • A web site is navigated using keyboard access only. For example, Tab moves the focus sequentially through the hyperlinks on a given page, while up and down arrows are used to review drop down menus.

Screen readers read text however they l.jpg

Screen readers read text, however, they: technology.

pronounce words phonetically without comprehension of the meaning of words, sentences or graphical layouts

do not read content in order, all links on a page are read first, followed by static content.

do not read color, layout, pictures, movies, sound files, animations, etc.

take time and effort to learn how to use

provide students with a limited amount of web-based course material, or no ability to participate in class discussions because they are held in a Java-applet chat room

Students with limited upper body mobility l.jpg
Students with limited technology.upper-body mobility

Use alternative non traditional computer input device technology such as l.jpg

Use alternative/non-traditional computer input device technology, such as:

large trackballs

sip-and-puff devices

head-controlled mouse

and other adaptive technologies

Alternative technologies l.jpg
Alternative Technologies technology, such as:

  • Alternative keyboards - These keyboards offer larger or smaller target

    areas for users with loss of gross or fine motor control. They may feature

    mouse emulation mode so that the arrow keys or numeric keypad of the

    same keyboard are used for mouse movements.

  • On-screen keyboards - This software provides an image of a keyboard on the monitor, which can then be accessed using a switch, trackball or other pointing device. Features may include scanning, dwell selection and word prediction for text. Input occurs using alternative input methods to select on-screen keys or buttons.

  • Voice recognition - The user speaks into a microphone to navigate web pages or input text. Voice commands may be used to execute customized macro sequences for specific frequent tasks.

  • Text-to-speech - Users with print processing impairments will often use text-to-speech technology to select blocks of text which are then read back to them by a voice synthesizer. The creation of audible speech output from computer readable text reinforces the visual reading process, or may be the preferred modality.

Screen magnifiers11 l.jpg
Screen Magnifiers technology, such as:

  • ZoomText Demo


  • Microsoft XP Screen Magnifier Tutorial


The law for public institutions l.jpg
THE LAW for Public Institutions technology, such as:

  • ADA Title II - the regulation requires that a public entity, such as a community college, take appropriate steps to ensure that communications with persons with disabilities are as effective as communications with others.

The law for public institutions13 l.jpg
THE LAW for Public Institutions technology, such as:

Section 504 Of The Rehabilitation Act* Title 29, Chapter 31

  • There needs to be assistive technology/ies to help those with disabilities access information.

  • Electronic information needs to be put into an accessible form so assistive technologies will work.

The law for public institutions14 l.jpg
THE LAW technology, such as:for Public Institutions

Section 508 of The Rehabilitation Act of 1973

  • In 1998, an amendment was signed into law requiring that electronic and information technology – including websites and online courses – developed or purchased by the U.S. federal government be accessible by people with disabilities.

    (Referred to as "Section 508," this was passed as part of the WorkForce Rehabilitation Act of 1973.)

Washington state law for public institutions l.jpg
Washington State LAW technology, such as:for Public Institutions

Applicable to everyone

  • 1. What is a disability?

    The rules of the Washington State Law Against Discrimination (RCW 49.60) define a disability as any abnormal sensory, mental or physical condition that:

    • Is medically cognizable or diagnosable

    • Exists as a record or history

    • Is perceived to exist

  • 2. Is the federal law different?

    Yes. The biggest difference is that federal law requires the medical condition to be permanent or long lasting. Federal law also requires the disability to have an impact on a major life function. State law covers medical conditions that are temporary or have short duration. State law also applies to permanent or long-term conditions.


World wide web consortium w3c l.jpg
World Wide Web Consortium (W3C) technology, such as:

  • Agency that leads the way to set the standards for Accessibility Implementation

  • Goals include making the web accessible to all

  • Developing a set of guidelines explaining how to make web content more accessible to people with disabilities, and, as a result, to all users.

World wide web consortium user considerations l.jpg
World Wide Web Consortium technology, such as:User Considerations

  • May not be able to see, hear, move, or process some types of information easily or at all

  • May have difficulty reading or comprehending text

  • May not have or be able to use a keyboard or mouse

  • May have a text-only screen, a small screen, or a slow Internet connection

W3c user considerations l.jpg
W3C User Considerations technology, such as:

  • May not speak or understand fluently the language in which the document is written

  • May be in a situation in which their eyes, ears, or hands are busy, or there is an interference (e.g., driving to work, working in a loud environment, etc.)

  • May have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

Universal design l.jpg
Universal Design technology, such as:

  • Accessible, intuitive, simplified.

    • Useable design does what a user expects it to do

    • Navigation, design and content that are as easy to find and use as possible.

    • If something is easier for someone with a disability to use, chances are it’s easier for everyone to use

  • Universal design keeps in mind the way people really use the web

    • Scan rather than read

    • Change settings according to personal taste

    • We don’t all have blazing fast connections, updated browser versions, all the latest multi-media plug-ins, etc.

Slide20 l.jpg

Universal Accessibility Definitions technology, such as:

Anyone can visit a particular web site, with any kind of web browsing technology, and access material and interact with the site without difficulty.

Gives users a better chance of understanding the content presented on a site, as well as successfully navigating throughout the site.

Includes mechanisms and strategies that accommodate the needs of the broadest range of users of computers and telecommunications equipment, regardless of age or disability.

Simple tests for universal design l.jpg

Amounts of Information technology, such as:

Text Equivalents




Tables Formatted

Click Effort

Low to No

Simple Tests for Universal Design

Amounts of information per screen l.jpg
Amounts of Information Per Screen technology, such as:

  • Not too much information on a page. Large volumes of information is confusing to most people, specially if the arrangement seems arbitrary.

  • Online users tend to scan rather than read. Design for effective scanning. Organize and present content in scan-friendly formats, such as bullet lists & step charts.People read fastest at 100 character column width. Studies show that users prefer a 55 character column width.

Text equivalents l.jpg
Text Equivalents technology, such as:

  • The most common non-text elements are images.

  • Use the alt attribute to describe the function of each visual.

  • Ensure that image “Alt” tags make sense when read out loud. If the image is associated with an action, include that action in the tag

Using color l.jpg
Using Color technology, such as:

  • When deciding on a color palette, make sure there is adequate contrast. (lights & darks)

  • Don’t rely on color alone to get a message across. i.e. “Fields in red are required” or “Click the green button to continue”

  • Think in terms of low vision and color blindness.

Using color25 l.jpg
Using Color technology, such as:

Content l.jpg
Content technology, such as:

  • Do not use highly technical, vague, very long sentences. These are likely to be misinterpreted by many.

  • Include the format and size in links to files that may open slowly or require plug-ins (.pdf, .swf, etc.)

Navigation l.jpg
Navigation technology, such as:

  • Navigation of a web page should not be cumbersome or confusing.

    • If you cannot get around the screen easily using only your tab key, then you probably have either an inaccessible or non-user-friendly site.

  • Label navigation using terminology that users expect.

    • i.e. Large, not Venti

    • Avoid “What should we call the exit” discussions during design phase.

Tables formatted l.jpg
Tables Formatted technology, such as:

  • Screen readers may not properly process data within improperly formatted text elements.

  • Requires proper formatting to be read from left to right. Make line-by-line reading sensible.

  • Summarize the section’s significance.

Tables formatted29 l.jpg
Tables Formatted technology, such as:

Does your content make sense when read exactly as it is displayed? For example this…

Would be read by some screen readers like this…

Data tables l.jpg
Data Tables technology, such as:

  • For accessible data, use <th> (table header) element instead of <td> (table data) for the header cells:

    • This allows a screen reader to tell the user which header each data cell is related to.

    • Use the <scope> attribute to tie a header to either a column or a row.

    • The <caption> element provides a brief description of a table.

    • A sighted person can easily glance at a table, see what it contains and decide if they want to study it further. A person using a screen reader can’t do that unless we add a summary attribute to the table element.

  • Great how-to article:


Slide31 l.jpg

Bugs Bunny Shorts technology, such as:

<table summary=“Bugs Bunny short titles, with director name theatrical air date">

<caption>Bugs Bunny Shorts</caption>


<th scope=“col”>Title</th>

<th scope=“col”>Director</th>

<th scope=“col”>Air Date</th>



<th scope=“row”>Bully For Bugs</th>




Click effort l.jpg
Click Effort technology, such as:

  • Does it require excess navigation to move from one page or section to another.

  • A good measurement of is to ask yourself, "Is the page I am on worth the effort it took to get here?"

Low to no l.jpg
Low to No technology, such as:

  • Insist that the site does not use too many features.

  • LOW to NO animations, frames, pop-up windows, mouse-overs, pull down menus or blinking links.

Universal design review l.jpg
Universal Design Review technology, such as:

  • 1. Images and graphical buttonsProvide text equivalents for visuals and ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped.

  • 2. Graphs and chartsSummarize the content of each graph and chart or use the "longdesc" attribute to link to the description or data.

  • 3. MultimediaProvide captions or transcripts of important audio content. Provide text or audio descriptions of important video content.

  • 4. TablesFor tabular data, use the <CAPTION> element and/or the summary attribute. For tables with complex row and column headers, use the headers attribute on cells.

  • 5. FramesProvide a title for each frame and frame page so that users can track frames by title.

Universal design review35 l.jpg
Universal Design Review technology, such as:

  • 6. Hypertext linksUse descriptive link text, not just "click here." Ensure that each link makes sense when it is read out of context. When providing links to large files for download, report the file size on the page. This is helpful alert to those with slower Internet connections.

  • 7. Image mapsUse client-side image maps to provide accessible text for image map hot spots. If you use server-side maps, provide equivalent text links.

  • 8. Scripts, applets, and plug-insWhere possible, provide alternate content for scripts, applets, and plug-ins so important information is not lost when those features are unsupported or turned off.

  • 9. FormsAssociate labels with form elements.

  • 10. Correct HTML mark-upDo not use structural markup (headings, lists, etc.) for visual presentation effects.

Universal design review36 l.jpg
Universal Design Review technology, such as:

  • 11. Cascading style sheetsControl presentation and layout with style sheets (CSS) rather than presentation elements and attributes. But ensure that the page can be read/navigated with the style sheet turned off.

  • 12. Skip to main contentProvide methods for skipping over navigation links to get to main content of page.

  • 13. Activation of page elementsMake sure that all elements on a page can be activated by a variety of means and not just by clicking with a mouse (i.e. keyboard shortcuts).

  • 14. ColorDo not use color alone to transmit information.

  • 15. Check accessibilityCheck the accessibility using available tools, such as IBM Home Page Reader and Bobby.

Break time 15 minutes please return at 2 15 l.jpg
BREAK TIME technology, such as:15 minutesPlease return at 2:15

The three eee s l.jpg
The Three EEE's technology, such as:

Make sure your sites are:

  • Engaging

  • Equitable

  • Effective

    from a simplistic approach.

Customize your course appearance l.jpg
Customize Your Course Appearance technology, such as:

  • Make choices that make your course look unique, but don’t let creativity overshadow usability.

  • Ensure High Contrast of Colors

  • DO NOT use background images that obscures text.

Images alt tags l.jpg
Images & Alt Tags technology, such as:

  • Remember to use the “ALT” attribute to describe a function or characteristic of any image content

    • Keep ALT text simple/understandable

    • Include action in ALT text

    • For bullets use “ ” or “*”

<a href="../coursecatalog/default.asp"><img src="missing.gif"></a>

<a href="../coursecatalog/default.asp"><img src="missing.gif" alt="Click here for class schedule"></a>

Animations l.jpg
Animations technology, such as:

  • DO NOT use animations that are unnecessary – they drive ADD people crazy. …everyone else also finds them distracting

No long text pages l.jpg
No LONG Text Pages technology, such as:

  • Summarize

  • Use lists

  • Supporting text may be included within content pages or as a link to a file

Multimedia effects l.jpg
Multimedia Effects technology, such as:

  • Provide alternative formats for those students that cannot use movies, sounds, or enhancements

  • Include a description of the effect in a text box and directions for alternative formats

Hypertext links l.jpg
Hypertext Links technology, such as:

  • Use text titles that make sense – even out of context

  • Read out loud as you are titling

  • Make them CONCISE, not wordy

  • Warn users if they are clicking something that will take a long time to open/download.

  • Provide users a way to skip over long lists of links

  • Skip navigation link

    • < a href="#content">skip navigation</a>

  • An anchor is placed before the start of the main content:

    • <a name="content"></a>Classes begin…

  • Invisible .gif with code in ALT tag that can be used by screen-readers to skip navigation image link:

    • <a href="#content"><img src="skipnav_image.gif" alt="Skip Navigation Links"></a>

Page organization l.jpg
Page Organization technology, such as:

  • Use consistent page structure

  • Include outlines at the beginning of long documents

  • Use ordered lists

  • Use white space generously

Frames l.jpg
Frames technology, such as:

  • Title all pages and all frames

  • If you can’t avoid frames, manage your pages with break lines

  • Provide orientation cues whenever possible to assist those who are not accessing visual information

  • Test ALL framed pages

Quizzes l.jpg
Quizzes technology, such as:

  • Multiple choice, matching, and true-false quizzes may present access difficulties for some users.

  • Provide learners with introductory information to orient them to the functionality of the quizzes.

  • To ensure access for all users, it is recommended that non-interactive text versions of the self tests be developed as an alternative.

White board chat l.jpg
White Board & Chat technology, such as:

  • Advise users of potential barriers to accessibility in an "orientation" or "accessibility information" page.

  • Use alternatives, such as using e-mail, in order to include all students.

Validating your work l.jpg
Validating Your Work technology, such as:

  • Check your HTML pages by validating with one of several automatic tools available online.

  • By using validation methods in the early stages of design, problems can be noted before you are well into course construction.

  • Accessibility issues identified early are easier to correct and avoid.

Validating your work51 l.jpg
Validating Your Work technology, such as:

  • There are multiple validation websites with downloadable resources that will check your work.

  • These URLs are in your packets.

Checking your work l.jpg
Checking Your Work technology, such as:

  • BOBBY -

    • Upload files to be checked online

    • Use software on your machine to verify new or existing code

Repair tools l.jpg
Repair Tools technology, such as:

  • University of Toronto APROMPT (go through example of repairing work)

  • Programs like Dreamweaver and Acrobat provide built in help with catching and repairing issues.

Summary l.jpg
Summary technology, such as:

  • Design a course that people everywhere with almost any Internet technology available to them can access and participate in fully.

  • Have equally engaging material for all.

  • Make it easy for all students to communicate with you, their instructor