1. Accessibility Basics on creating accessible websites Accessibility Seth Duffey sduffey@cityofdavis.orgsduffey@cityofdavis.org presentation for MAG Telecommunications Advisory Group 1

2. Accessibility What is accessibility? “Accessibility refers to ensuring that webpage content is accessible, ie. ensuring that content can be navigated and read by everyone, regardless of location, experience, or the type of computer technology used. Accessibility is most commonly discussed in relation to people with disabilities, because this group are most likely to be disadvantaged if the principles of accessible Web design are not implemented. Failure to follow these principles can make it difficult or impossible for people with disabilities to access Content.” http://www.murdoch.edu.au/admin/policies/murdochnet/glossary.html#accessibility 2

3. Accessibility They may not be able to see, hear, move, or may not be able to process some types of information easily or at all. They may have difficulty reading or comprehending text. They may not have or be able to use a keyboard or mouse. They may have a text-only screen, a small screen, or a slow Internet connection. They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.). They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system. They may not speak or understand fluently the language in which the document is written. Can visitors of your website use it well? Who does accessibility apply to? 3

4. Accessibility Accessibility Standards W3C Web Accessibility Initiative (WAI): http://w3.org/WAI/ These guidelines explain how to make Web content accessible to people with disabilities. The guidelines are intended for all Web content developers. The primary goal of these guidelines is to promote accessibility. However, following them will also make Web content more available to all users, whatever user agent they are using…http://w3.org/WAI/ Section 508: http://www.section508.gov/ Section 508 (of the US 1974 Rehabilitation Act) requires that Federal agencies' electronic and information technology is accessible to people with disabilities.http://www.section508.gov/ ADA: http://ada.gov/http://ada.gov/ 4

5. Accessibility W3C WAI Priority 1 Checklist http://www.w3.org/TR/WCAG10/full-checklist.html 1.1 Text Equivalent for non-text elements 2.1 Information can be conveyed without color 4.1 Identify changes in natural language 6.1 Document can be read without style sheets 6.2 Text equivalents to dynamic content are updated when dynamic content changes 7.1 Avoid causing screen flicker 14.1 Use clearest and simplest language 1.2 Provide redundant links for server-side image maps 9.1 Provide client-side images maps instead of server-side image maps 5.1 For tables, identify row and column headers, use markup to associate cells 5.2 For tables with 2 or more logical levels use markup to associate data and header cells 12.1 Title each frame (if frames are used) 6.3 Ensure pages are useable when scripts, applets, etc are not supported or turned off 1.3 Provide audio description for multimedia presentation 1.4 For any time-based multimedia presentation synchronize equivalent alternatives 11.4 If it is not possible to create an accessible page, provide a link to an alternative page 5

6. Accessibility W3C Accessibility Priorities Priority 1 A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents. Priority 2 A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents. Priority 3 A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents. 6

7. Conformance Level "A": All Priority 1 checkpoints are satisfied; Conformance Level "Double-A": All Priority 1 and 2 checkpoints are satisfied; Conformance Level "Triple-A": All Priority 1, 2, and 3 checkpoints are satisfied; W3C Conformance Accessibility 7

8. User_Agent Accessibility Accessibility is also making sure your webpages work with all browsers, Operating Systems, and connection speeds. Slow internet connection Older internet browser “Obscure” newer browsers Older OSs such as win98 and OS9 might not new browser options Don’t Design just for Internet Explorer - For many websites FireFox now has 5% - 10% of the browser share. - Rumors that Google may be releasing a browser Browser Statistics: http://www.w3schools.com/browsers/browsers_stats.asphttp://www.w3schools.com/browsers/browsers_stats.asp Can visitors of your website use it well? 8

9. Images & animations: Use the alt attribute to describe the function of each visual. Image maps: Use the client-side map and text for hotspots. Multimedia: Provide captioning and transcripts of audio, and descriptions of video. Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here." Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible. Graphs & charts: Summarize or use the longdesc attribute. Scripts, applets, & plug-ins: Provide alternative content in case active features are inaccessible or unsupported. Frames: Use the noframes element and meaningful titles. Tables: Make line-by-line reading sensible. Summarize. Check your work: Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG http://www.w3.org/TR/WCAG http://www.w3.org/WAI/quicktips/ Accessibility Quick Tips 9

10. http://www.delorie.com/web/lynxview.html As a standard browsers sees Accessibility Testing As Lynx sees What it is like to “read” your website? Try Lynx: 10

11. Accessibility Accessibility testing Bobby testing for WAI 1 and Section 508: http://bobby.watchfire.com/bobby/html/en/ Watchfire WebXACT: http://webxact.watchfire.com/ (more in-depth test) “Cynthia Says” http://www.contentquality.com/ 11

12. Use your website with images turned off? Use your website with JavaScript disabled? Use your website with Cookies disabled? Use your website with Style Sheets disabled? Use your website without applets (like Flash)? Use your website with a text reader? Accessibility Ask Yourself… Can you? 12

13. Accessibility Solutions – Cascading Style Sheets (CSS) Developing a website using CSS can solve almost all accessibility issues. 13

14. Accessibility What are CSS? Cascading Style Sheets, style sheets when attached to documents describe how the document is displayed or printed, e.g. a CSS sheet is attached to an HTML document, to influence its layout when accessed via a browser. CSS supports cascading, i.e. a single document may use two or more style sheets that are than applied according to specified priorities (=cascade). CSS separate content from layout 14

15. Accessibility Why CSS? Support: Firefox, Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera, and Safari fully support CCS1 and CSS2* Accessible: Screen readers will see your HTML without the layout leaving the result text only Faster: Pages display faster because CSS is cached and the majority a site’s HTML pages code are content not layout (no complex tables). Simpler Code: HTML written for CSS can be simple and take advantage of markup tags like H1, UL, P, etc. More Flexible: One change to a CSS file can change entire website. One Version: Since content is separated from layout a text only version always exists. Excellent Presentation on CSS: http://stopdesign.com/present/2004/sydney/beauty/ 15

16. Accessibility Validation XHTML Create pages that are XHTML compliant. Case for XHTML: http://www.kurafire.net/articles/case-for-xhtml Test that your code is valid: HTML Validator: http://validator.w3.org/http://validator.w3.org/ CSS Validator: http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ 16

17. CSS Help www.w3.org/TR/REC-CSS2/cover.html www.blooberry.com/indexdot/css/ www.mako4css.com/ Example Layouts: www.bluerobot.com/web/layouts CSS Articles www.alistapart.com/topics/css www.positioniseverything.net/ www.vertexwerks.com/tests/sidebox www.meyerweb.com/eric/css/edge Inspiration www.csszengarden.com www.cssvault.com www.cssbeauty.com Box model hack www.tantek.com/CSS/Examples/boxmodelhack.html Why CSS? www.macromedia.com/devnet/mx/dreamweaver/articles/why_css.html CSS Validator jigsaw.w3.org/css-validator/validator-uri.html CSS1 Support Chart devedge.netscape.com/library/xref/2003/css-support/css1/mastergrid.html xhtml www.w3.org/TR/2000/REC-xhtml1-20000126/ Free CSS Editor www.bradsoft.com/topstyle Accessibility CSS Links 17

18. Accessibility Questions? This is a basic overview presentation of Accessibility issues and CSS Seth Duffey sduffey@cityofdavis.orgsduffey@cityofdavis.org Questions? 18