Presentation is loading. Please wait.

Presentation is loading. Please wait.

` Designing Accessible Web Sites Rick Hill, Webmaster College of Engineering.

Similar presentations


Presentation on theme: "` Designing Accessible Web Sites Rick Hill, Webmaster College of Engineering."— Presentation transcript:

1 ` Designing Accessible Web Sites Rick Hill, Webmaster College of Engineering

2 ` Converting an existing site? Creating a new site? Create accessible web standards? Required knowledge for a project? Just curious? Other needs? Why are you here?

3 ` Who are you? Webmaster? Web designer? Web database programmer? Administrator? Researcher?

4 ` Who are you? How many sites do you work with? Use a GUI authoring tool or hand code? Use cascading style sheets (CSS)? Use validation tools? Accessibility experience?

5 ` Define web accessibility Why is it important? Why should you do it? Identify the issues involved Explore design standards Discuss methods to create and maintain accessible sites Identify resources Class Goals

6 ` The qualities of a website that allow people to use it even when they are working under limiting conditions or constraints Allows more people to use a site in more situations Provides web content to people with disabilities Allows web content to be presented using adaptive technology Accessibility Defined

7 ` Users Limitations Functional Limitations Visually Impaired (includes color blindness) Hearing Impaired Mobility Impaired Cognitively Impaired Situational Limitations Device Limitations Browser Limitations

8 ` Scope of Functional Disabilities The American Foundation for the Blind claims 10 million visually impaired in the US and over 900,00 computer users A Harris Poll, June 2000, showed that 43% of US adults with disabilities use the Internet WHO reports 15% to 30% of the population have functional limitations that can affect their ability to use technology According to a Georgia Institute of Technology survey, almost 10% of internet users reported having a disability

9 ` Scope of Functional Disabilities 1999 US Department of Commerce survey reported that in the US: 7.3 million had vision problems 6.9 million had hearing problems 6.3 million had difficulty using their hands 2.9 million had a learning disability ~12% of the US have some type of work disability Statistics point to an increasing number of people with functional limitations as the population ages

10 ` Make web-based information and services available to people with disabilities Make web-based information and services available to the widest audience Goals of Accessible Design

11 ` Visually Impaired Screen readers Screen magnifiers Text browser Braille display Hearing impaired Braille display Direct connection to hearing aid Captioned audio and multimedia How the Disabled Use the Web

12 ` Mobility impaired Speech control Keyboard guards and overlays Slow keys and on-screen keyboards Replacement mice and switches Cognitive disabilities Most neglected disability Require clear and simple content Alternate presentations of data

13 ` Web sites use design techniques, scripts, images and graphics in ways that make the content inaccessible or difficult to use Graphic content without text equivalent Images, charts, Flash, PDF’s Complex navigation Video and audio clips without captions or transcripts Require a specific browser or mouse Not user-centric What is the problem?

14 ` Define standards for web accessibility Create tools that support the standard Adaptive technologies that interpret websites designed to the standards Authoring tools that integrate the standards into web designs Validation tools that help determine standards compliance Author web sites and pages to comply with the standards The Solution: Standards

15 ` Pro Since pages are designed to standards, authors need not know which adaptive technology is being used by the client nor do they have to test pages using different adaptive tools Con The standards are not specific enough, so they are subject to interpretation No tool can fully automatically test or create accessible web pages Pro and Con

16 ` W3C’s Web Accessibility Initiative (WAI)WAI Published guidelines, implementation methods, and priority checkpoints under the Web Content Accessibility Guidelines (WCAG).WCAG No force of law US Rehabilitation Act Section 508 Subpart B - Technical Standards § 1194.22 Based on WCAG Priority A standards Emphasizes end results and enforceability The Standards

17 ` Compliance with regulatory and legal requirements Produces better web design and implementation Funding issues Social maturity Reasons to Do It

18 ` Compliance with regulatory and legal requirements Produces better web design and implementation Funding issues Social maturity Reasons to Do It

19 ` Americans with Disabilities Act, Title II Communications must be as effective for those with disabilities as for those without Rehabilitation Act, Section 504 Establishes requirement to make programs, services and activities accessible Rehabilitation Act, Section 508 Provides standards to use in evaluating the accessibility of web pages and other electronic communication Federal Legislation

20 ` After June 25, 2001, technology must meet 508 standards. Enforcement covers all Federal agencies Applies to web pages as they are updated or added Applies to Assistive Technology Act funding 1998 act provides funding to states for maintaining technology-related assistance programs for the disabled California is a recipient UC Federally funded sites may need to comply Federal Impact

21 ` State agencies adopt accessibility standards: California State Webmasters Site Compliance with Government Code Section 11135.d(2) which references Federal Rehabilitation Act Section 508 Priority 1 and 2 level checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0 “AA” Conformance Level) Recommended best practices from the California Department of Rehabilitation California State Impact

22 ` California Community College system ruled that 508 applies system wide California State University System required by legislation to comply with 508 In December 2004, CSU Executive Order 926 states - "Section 11135 of the California Government Code was amended... to clarify that Section 508 of the 1973 Rehabilitation Act applies to the CSU. " California State University's Accessible Technology Initiative California State University's Accessible Technology Initiative All CSU sites Section 508 compliant by 2012 Impact on California Public Colleges and Universities

23 ` No legislative requirement No system-wide accessibility policy - yet! Former UC President Atkinson 2001 letter to UC chancellors pledged to: "...ensure that the digital technologies we use for academic and administrative purposes are accessible to all of our students, faculty, and staff " And what about UC?

24 ` Electronic Accessibility at the University of California Electronic Accessibility at the University of California System-wide groups discussing issues Draft policy Exploring acquisition of testing/validation tools And what about UC?

25 ` ADA challenge - UC Davis and UC Berkeley Expanded to include web accessibility issues UC Davis web policy PPM 310-70PPM 310-70 Adopted August 2006 Applies to official and department sites sites Added accessibility requirements Minimum standard is 508 Implementation in process And UC Davis?

26 ` Support resources available or planned Implementation plan being drafted Training, tools and web resources? Web templates Web developers forum Content Management System Video captioning services And UC Davis?

27 ` Compliance with regulatory and legal requirements Produces better web design and implementation Funding issues Social maturity Reasons to Do It

28 ` Compliance with regulatory and legal requirements Produces better web design and implementation Funding issues Social maturity Reasons to Do It

29 ` Refocus on purpose of your web site Design to current web standards Reevaluate site and page navigation Provides additional redundancy Improved page load speeds New skills Potentially easier to maintain Better search rankings More usable sites Better Web Design

30 ` Compliance with regulatory and legal requirements Produces better web design and implementation Funding issues Social maturity Reasons to Do It

31 ` Compliance with regulatory and legal requirements Produces better web design and implementation Funding issues Social maturity Reasons to Do It

32 ` The costs to respond to an ADA challenge Other accommodation Redesign to meet a deadline External review Section 508 has implications for research Grant funding Web requirements Potentially lower web maintenance costs Funding Issues

33 ` Compliance with regulatory and legal requirements Produces better web design and implementation Funding issues Ethics Reasons to Do It

34 ` Compliance with regulatory and legal requirements Produces better web design and implementation Funding issues Ethics Reasons to Do It

35 ` UCD Principles of Community It’s the right thing to do! Ethics

36 ` Time for a Movie

37 ` Author sites/pages that are compliant to 508 standards Check sites/pages for compliance to the standard Maintain compliant sites/pages Go beyond 508 standards when possible Worldwide Web Consortium (W3C) Web Accessibility Initiative (WAI) Web Accessibility Guidelines (WCAG) Use best practices How Do I Do It?

38 ` There are no tools available that will automatically create an accessible site/page There are no tools available that will automatically determine if a site/page is compliant with any standard You will need to supplement any tool with your understanding and interpretation of the standards It’s an Art!

39 ` Take a user-centric approach to design You do not control the user experience, only content Create a map of your site and check that it is logically arranged/linked Make sure that page navigation is is consistent and clear Create a site map page to assist navigation Make sure that content is current and will be maintained The Basic Design Process

40 ` Use Valid HTML or XHTML Use current (X)HTML standards in design HTML 4.01, XHTML 1.0, XHTML 1.1 Use CSS in lieu of deprecated font/layout tags Specify the DOCTYPEDOCTYPE Markup and CSS won’t validate without it Declare the natural language typelanguage <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd

41 ` Engineering: Use W3C web standards when possibleW3Cstandards WaSP - Web Standards Project WaSP Validate the HTML Validate the CSS Use Valid HTML or XHTML http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "en"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "en">

42 ` Use percentages and ems Optimize page sizes and included image sizes to decrease page load speeds Consider using a design tool that allows template driven design Other Good Practises

43 ` Section 508 Standards

44 ` (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). Section 508 Standards (a)

45 ` ALL images MUST have an " alt " attribute The content of " alt " attribute is a matter of style and judgment Do not label a link as "Link to" in the " alt " text Validation tools will check to see if " alt " attribute exist but cannot interpret their content Section 508 Standards (a)

46 ` Blank " alt " attribute ( alt="" ) can be used for appropriate images but ALL images need an " alt " attribute Appropriate for images that convey no information A blank alt attribute is alt="", that is quote- quote not quote-space-quote Background graphic and patterns do not require " alt " attribute (in fact they can’t take one) Section 508 Standards (a)

47 ` " alt " text should be kept short - less than 1024 characters Use " longdesc " attribute to provide a link to a page with a larger amount of information " longdesc " pages should be simple, text only " longdesc " pages could provide a link back to an anchor on the calling page Section 508 Standards (a)

48 ` Image examples Image Image links Image map hot spots Section 508 Standards (a) … …

49 ` Image types Image Buttons Decorative and spacer (no information) Information rich, like charts and graphs Building Accessible Websites by Joe Clark addresses providing text equivalents for many other types of images (hit counters, maps) Section 508 Standards (a)

50 ` (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. Section 508 Standards (b)

51 ` At a minimum, you should provide a transcript of all audio content Provide synchronized audio transcription with multimedia presentations (captions) If possible, include video descriptions MediaWorks provides captioning services MediaWorks MAGpie, the Media Access Generator MAGpie Many methods discussed on the WebAIM site Many methods Example Section 508 Standards (b)

52 ` Basic Process Issues Formats - one or many? Scripted vs unscripted source Timeliness Commencement Ceremony Podcasting Text or PDF equivalent Section 508 Standards (b)

53 ` (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. Section 508 Standards (c)

54 ` Do not rely solely on the color of an element on your page to convey meaning "Items in red are required" is bad "* Items marked with an asterisk are required" is better Foreground (text) and background colors must provide sufficient contrast to allow users with different type of color blindness or those using a monochrome screen to view information Section 508 Standards (c)

55 ` The Bad The Good

56 ` Section 508 Standards (c) The Ugly

57 ` (d) Documents shall be organized so they are readable without requiring an associated style sheet. Section 508 Standards (d)

58 ` Make sure that if you use styles (CSS) that pages are usable if the style sheets are disabled Organize pages in a consistent, logical manner Don’t substitute styles for the structural elements of HTML like headings, paragraphs, and lists Example 1: Pure CSS Example 1 Example 2: Transitional CSS Example 2 Section 508 Standards (d)

59 ` Test pages with styles turned off Use the web developer for Mozilla/Firefoxweb developer Disable styles in Internet Explorer Web Accessibility Toolbar Internet Explorer Developer Toolbar Use a text-only browser like Lynx either on your own system or by using the campus computers Lynx for Windows Lynx for OS X Section 508 Standards (d)

60 ` (e) Redundant text links shall be provided for each active region of a server-side image map. Section 508 Standards (e)

61 ` Don't use server-side image maps Use client-side maps (next section) instead There is no way to make server-side image maps accessible No local images to label with a text equivalent The "active regions" in the map only display a set of coordinates The server calculates the destination URL based on coordinates it is sent from a mouse click Redundant text links are required Section 508 Standards (e)

62 ` (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. Section 508 Standards (f)

63 ` Each in the image map is assigned an " alt " attribute Example: Section 508 Standards (f) http://site.org/servic http://site.org/servic

64 ` Another example with complex shapes Another example Section 508 Standards (f) <AREA SHAPE=POLY COORDS="5,11,32,15,41,41,40,76,67,75,124,75,124,50,109,52,104,38, 90,6,48,8,13,0,6,0,8,9,8,10,10,11,10,11" HREF="/usa/pacwest/default.asp" ALT="Pacific Northwest: AK, WA, ID, OR"> <AREA SHAPE=POLY COORDS="93,7,172,8,172,31,171,46,174,83,184,84,186,91,187,105,186, 117,147,116,140,118,105,117,105,75,125,78,123,50,111,51,104,37,91,7,95,7,104,8,104,8" HREF="/usa/rockymtn/default.asp" ALT="Rocky Mountain Region: CO, UT, WY, MT">... <AREA SHAPE=POLY COORDS="5,11,32,15,41,41,40,76,67,75,124,75,124,50,109,52,104,38, 90,6,48,8,13,0,6,0,8,9,8,10,10,11,10,11" HREF="/usa/pacwest/default.asp" ALT="Pacific Northwest: AK, WA, ID, OR"> <AREA SHAPE=POLY COORDS="93,7,172,8,172,31,171,46,174,83,184,84,186,91,187,105,186, 117,147,116,140,118,105,117,105,75,125,78,123,50,111,51,104,37,91,7,95,7,104,8,104,8" HREF="/usa/rockymtn/default.asp" ALT="Rocky Mountain Region: CO, UT, WY, MT">...

65 ` (g) Row and column headers shall be identified for data tables. Section 508 Standards (g)

66 ` Cells should be labeled appropriately If they contain pure data use If they contain column or row header titles use cells make the header stand out and they can be identified by assistive technology Format cells with styles Use the tag and " summary " attribute to further enhance table accessibility Section 508 Standards (g)

67 ` <table border="1" cellpadding="0" summary="Today’s lunch menu showing salad, entree and dessert."> Today's Lunch Salad Caesar Entree Chicken Divan Dessert Chocolate Mousse <table border="1" cellpadding="0" summary="Today’s lunch menu showing salad, entree and dessert."> Today's Lunch Salad Caesar Entree Chicken Divan Dessert Chocolate Mousse Section 508 Standards (g)

68 ` (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. Section 508 Standards (h)

69 ` Data cells ( ) must be associated with appropriate column and row headers cells ( ) to give them meaning Methods scope attribute id and headers attributes axis attribute (which we won’t address) Section 508 Standards (h)

70 ` Spring Summer Autumn Winter Betty 9-5 10-6 8-4 7-3 Spring Summer Autumn Winter Betty 9-5 10-6 8-4 7-3 wilma 10-6 9-5 Fred 10-6 wilma 10-6 9-5 Fred 10-6 scope method (simple table)

71 ` Section 508 Standards (h) Winter Summer Morning Afternoon Morning Afternoon Winter Summer Morning Afternoon Morning Afternoon Wilma 9-11 12-6 7-11 12-3 … Wilma 9-11 12-6 7-11 12-3 … scope method (more complex)

72 ` Section 508 Standards (h) id/header method (complex)

73 ` Section 508 Standards (h) Travel Expense Report Meals Hotels Transport subtotals San Jose Travel Expense Report Meals Hotels Transport subtotals San Jose 25-Aug-97 37.74 112.00 45.00... Totals 196.27 442.00 162.00 800.27 25-Aug-97 37.74 112.00 45.00... Totals 196.27 442.00 162.00 800.27

74 ` (i) Frames shall be titled with text that facilitates frame identification and navigation. Section 508 Standards (i)

75 ` Don’t use frames Frame elements need to be labeled to identify the different frames in a frameset to assistive browsers While not yet widely supported, use the "title" attribute to label elements All pages referenced in a frameset should have a meaningful in their Include a element to provide content to browsers that do not support frames Section 508 Standards (i)

76 ` <frameset rows="*,80" cols="*" framespacing="0" frameborder="yes" border="0" bordercolor="#000033"> <frame src="navigation.html" name="navigationFrame" scrolling="no" noresize title="Navigation Frame"> <frame src="banner.html" name="bottomFrame" frameborder="yes" scrolling="NO" noresize bordercolor="#0000EE" title="Banner Frame" > Your browser doesn't support frames. Please go here for a frame free version of the page. <frameset rows="*,80" cols="*" framespacing="0" frameborder="yes" border="0" bordercolor="#000033"> <frame src="navigation.html" name="navigationFrame" scrolling="no" noresize title="Navigation Frame"> <frame src="banner.html" name="bottomFrame" frameborder="yes" scrolling="NO" noresize bordercolor="#0000EE" title="Banner Frame" > Your browser doesn't support frames. Please go here for a frame free version of the page.

77 ` Section 508 Standards (i)

78 `... Navigation Frame...... Navigation Frame...... Banner Frame...... Banner Frame...... Main Content Frame...... Main Content Frame......

79 ` (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. Section 508 Standards (j)

80 ` Flickering images or text can cause problems for people with photosensitive epilepsy Example: CAUTION! Anyone sensitive? Example

81 ` (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. Section 508 Standards (k)

82 ` Providing a text only version of your pages is not a solution to making your site accessible It is to be used only if you cannot provide accessibility in other ways Providing a text-only alternative requires the maintenance of two sets of content CSS can be used to create a text-only version Example - print style Example Section 508 Standards (k)

83 ` (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. Section 508 Standards (l)

84 ` Make sure no essential information is lost if scripting is disabled Don't say "No Javascript, too bad" Script-generated HTML follows the same accessibility rules as "static" HTML Make all scripts directly accessible to assistive technologies or use an alternate method of providing equivalent functionality (HTML link) Keyboard accessibility is a good measure Section 508 Standards (l)

85 ` Different screen readers provide different degrees of support for event handlers Use device-independent event handlers OR use more than one event handler Use "ommousedown" with "onkeydown" Use "onmouseup" with "onkeyup" Use "onclick" with "onkeypress" Avoid using scripting when HTML will do Section 508 Standards (l)

86 ` is no longer preferred Avoid pop-up and new windows if possible Form validation Provide a non-script alternative Many sources for accessible Javascript techniques Web Accessibility, Web Standards and Regulatory Compliance has a nice overview Section 508 Standards (l)

87 ` (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). Section 508 Standards (m)

88 ` Web pages that provide content such as Real Audio or PDF files must provide a link to a plug-in that allows the content to be viewed Content presented via the plug-in must meet other accessibility requirements of 508 Example PDF and QuickTime How to include without repetition Section 508 Standards (m)

89 ` (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. Section 508 Standards (n)

90 ` Forms pose accessibility issues when a form element is separated from its associated label The visual proximity of a form element and its label doesn’t mean that a screen reader or an assistive technology user will associate the two Organization of form elements can be enhanced by proper (X)HTML label/for/id fieldset legend Section 508 Standards (n)

91 ` Use the tag and associated " for " attribute to tag labels Identify the exact words to use as the label for the form element and enclose those words in a tag Use the " for " attribute to uniquely identify the form element associated with the label Use the " id " attribute in the associated form element to associate it with the label Use and to group input elements Section 508 Standards (n)

92 ` Before: Section 508 Standards (n) FIRST NAME: LAST NAME: FIRST NAME: LAST NAME:

93 ` After: Section 508 Standards (n) Customer: First Name: Last Name: Customer: First Name: Last Name:

94 ` Checkboxes: Section 508 Standards (n) Select your pizza toppings: Ham Pepperoni Mushrooms Olives Select your pizza toppings: Ham Pepperoni Mushrooms Olives

95 ` Radio Buttons: Section 508 Standards (n) Choose a shipping method: Overnight Two day Ground Choose a shipping method: Overnight Two day Ground

96 ` Select list: Section 508 Standards (n) Choose your favorite city? Amsterdam Buenos Aires Delhi Hong Kong London Los Angeles Moscow Mumbai New York Sao Paulo Tokyo Choose your favorite city? Amsterdam Buenos Aires Delhi Hong Kong London Los Angeles Moscow Mumbai New York Sao Paulo Tokyo

97 ` Fieldsets can be nested and styled More information: WebAIM Web Accessibility, Web Standards and Regulatory Compliance Web Accessibility, Web Standards and Regulatory Compliance Section 508 Standards (n)

98 ` (o) A method shall be provided that permits users to skip repetitive navigation links. Section 508 Standards (o)

99 ` It can be a tedious and time-consuming chore to wait for the assistive technology to work through and announce each of the standard navigational links To alleviate this problem there must be a mechanism for users to skip repetitive navigational links Skip navigation links can be placed anywhere, but are generally placed at the top of the page Section 508 Standards (o)

100 ` Often a "Skip to content" in the top left corner skips over repetitive titles, graphics and global navigation links as well as page navigation links Skip navigation link code Just before the navigation links Just before the main page content: Example Section 508 Standards (o) Skip to page content

101 ` Should these links be visible or not? If they are visible, it changes the appearance of the site for sighted users If they are invisible, there may be implications for mobility impaired users and users who are vision impaired (not blind) More descriptive labeling potentially can be applied to invisible links (since the label doesn’t take up screen real estate) Section 508 Standards (o)

102 ` Methods to create invisible navigation skip links: Skip navigation link attached to a small (1 pixel) image with descriptive " alt " text Use normal text, but set background and foreground colors to be the same Use CSS to move the link off the visible page page to the leftCSS Section 508 Standards (o) Skip to page content CSS: a.skip {position: absolute; left: -1000em; width: 20em;} Skip to page content CSS: a.skip {position: absolute; left: -1000em; width: 20em;}

103 ` (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. Section 508 Standards (p)

104 ` Someone's disability can limit the speed with which they can read, move around, or fill in a web form A page may time out before they are able to finish reading it Many forms, when they time out also delete whatever data has been entered Notify the user if a page is about to time-out Provide a prompt asking whether additional time is needed Section 508 Standards (p)

105 ` Meeting the "letter of the law" is not enough Understanding the reason behind the standards is important in applying them appropriately " alt " attribute content for example Label a logo or use an empty " alt " attribute? Clarity of wording? Does context provide meaning? If so, an empty alt may be OK even though the image has meaning A captioned picture for example The Standard Versus The Intent

106 ` Basic tests Use a text only browser (lynx) Disable styles and JavaScript (web designer tool)web designer tool Use the fangs emulator in Firefox Checking For 508 Compliance

107 ` Browser Tools Mozilla/Firefox Web developer Fangs Screen Reader Emulator Colour Contrast Analyser Juicy Studio Accessibility Toolbar Accessibar Firefox Accessibility Extension TotalValidator Checking For 508 Compliance

108 ` Internet Explorer Web Accessibility Toolbar Internet Explorer Developer Toolbar Text-only browser Lynx for Windows Lynx for OS X Free online tools Ramp Personal Edition WAVE Cynthia Says Cynthia Checking For 508 Compliance

109 ` Extensions to Dreamweaver WebAIM List and Review of free tools WebAIM List and Review Commercial Tools Deque (Free personal use version too) Deque HiSoftware HiSoft SSB Technologies Jim Tatcher comparison Checking For 508 Compliance

110 ` Let's Evaluate Some Pages!

111 ` Special cases: PDF, Flash and AJAX

112 ` Flash Accessibility WebAIM tutorial Adobe general accessibility Adobe Flash Guidelines Flash can enhance some accessibility Multiple ways of presentation Scalability Keyboard accessibility Engaging content Self-voicing

113 ` Flash Accessibility Some browsers may not support Flash Most Flash content cannot be made natively accessible to screen readers Make content accessible to the screen reader Make content self-voicing Provide an accessible alternative to the content HTML accessibility concepts apply to Flash color contrast consistent navigation user-centric design

114 ` PDF Accessibility WebAIM Tutorial Adobe general accessibility Adobe PDF Guide (PDF) Scanning a document into PDF creates a "PDF Image Only" file that is a graphic representation of the document with no associated text Generally unreadable by assistive technology

115 ` PDF Accessibility Scanning a document into PDF and then running it through OCR ("optical character recognition") technology converts the text images into searchable text This is more accessible Such documents must be checked carefully for accuracy

116 ` PDF Accessibility Printing a file directly into PDF format converts the electronic information into a digital representation of the document that is somewhat readable to assistive technology. Writing a document inside Adobe Acrobat can also result in a document that is more usable by assistive technology. Adobe on-line conversion

117 ` PDF Accessibility Many assistive browsers support selected PDF elements through Acrobat Reader To take advantage of these features, PDF documents need to be tagged To convey document structure and content To resize and reflow content in browser windows To use the Read Out Loud feature

118 ` AJAX Accessibility AJAX stands for Asynchronous JavaScript And XML Allows web applications high levels of interactivity without the standard type of client- server interaction Overview of AJAX AJAX Example

119 ` AJAX Accessibility AJAX will not work in all web browsers Pages must function with Javascript disabled WebAIM AJAX article Many accessibilty issues yet to be addresses Identifying content changes Efforts are under way

120 ` Be as accessible as possible: the standards will change Additional refinements in Federal standards will happen - in review now WCAG 2.0 has been released 508 is currently being revised Stay abreast of UC, UC Davis and Federal policies that may apply to you UC Davis webmaster site Campus/UC accessibility plan and resources to come Final Thoughts

121 ` Site conversion If you can't convert completely, make a plan Analyze the requirements and create a standards statement for your organization Make the easiest changes immediately Make the changes to templates, style sheets and other elements that will impact the greatest number of pages Outline how and when you will address other needs Document progress toward the plan Final Thoughts

122 ` Designing Accessible Web Sites Rick Hill, Webmaster College of Engineering


Download ppt "` Designing Accessible Web Sites Rick Hill, Webmaster College of Engineering."

Similar presentations


Ads by Google