Accessibility Basics on creating accessible websites Accessibility Seth

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

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

Accessibility Who does accessibility apply to? Can visitors of your website use it well? • 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. 3

Accessibility Standards W 3 C Web Accessibility Initiative (WAI): http: //w 3. 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… Section 508: http: //www. section 508. gov/ Section 508 (of the US 1974 Rehabilitation Act) requires that Federal agencies' electronic and information technology is accessible to people with disabilities. ADA: http: //ada. gov/ 4

Accessibility 1. 1 2. 1 4. 1 6. 2 7. 1 14. 1 1. 2 9. 1 5. 2 12. 1 6. 3 1. 4 11. 4 W 3 C WAI Priority 1 Checklist Text Equivalent for non-text elements Information can be conveyed without color Identify changes in natural language Document can be read without style sheets Text equivalents to dynamic content are updated when dynamic content changes Avoid causing screen flicker Use clearest and simplest language Provide redundant links for server-side image maps Provide client-side images maps instead of server-side image maps For tables, identify row and column headers, use markup to associate cells For tables with 2 or more logical levels use markup to associate data and header cells Title each frame (if frames are used) Ensure pages are useable when scripts, applets, etc are not supported or turned off Provide audio description for multimedia presentation For any time-based multimedia presentation synchronize equivalent alternatives If it is not possible to create an accessible page, provide a link to an alternative page http: //www. w 3. org/TR/WCAG 10/full-checklist. html 5

Accessibility W 3 C 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

Accessibility W 3 C 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; 7

Accessibility User_Agent Accessibility Can visitors of your website use it well? 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 win 98 and OS 9 might not new browser options Don’t Design just for Internet Explorer - For many websites Fire. Fox now has 5% - 10% of the browser share. - Rumors that Google may be releasing a browser Browser Statistics: http: //www. w 3 schools. com/browsers_stats. asp 8

Accessibility Quick Tips • 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. w 3. org/TR/WCAG http: //www. w 3. org/WAI/quicktips/ 9

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

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

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

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

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

Accessibility Why CSS? Support: Firefox, Internet Explorer 6, Netscape Navigator 7, Mozilla , Opera, and Safari fully support CCS 1 and CSS 2* 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 H 1, 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

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

Accessibility CSS Links CSS Help www. w 3. org/TR/REC-CSS 2/cover. html www. blooberry. com/indexdot/css/ www. mako 4 css. 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. w 3. org/css-validator/validator-uri. html CSS 1 Support Chart devedge. netscape. com/library/xref/2003/css-support/css 1/mastergrid. html xhtml www. w 3. org/TR/2000/REC-xhtml 1 -20000126/ Free CSS Editor www. bradsoft. com/topstyle 17

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