How To Write A Report On My Blog About My Sac State 2.0

Transcription

1 Web Accessibility For Designers/Developers

2 Plan Foundations of accessibility Best practices Understanding a report Resources

3 Foundations What is accessibility? The Accessible Technology Initiative Sac State and Accessibility

4 What is accessibility? Accessible webpages make it possible for people with disabilities to access your content Disabilities can be visual, auditory, motor, or cognitive Accessibility is applied usability

5 Facilitate assistive technologies Screen readers (JAWS) Text enlargers (ZoomText) Alternative input devices Video captioning Transcriptions

6 Assistive Technology Demos JAWS Demo

7 Accessible Technology Initiative Chancellor s Office created the Accessible Technology Initiative in All new administrative sites must be accessible More immediately, all administrative sites critical to university access must be accessible by 6/2009 By Fall 2012, all websites must be accessible Impacts procurement and instructional materials

8 Guidelines ATI requires Section 508 of the Rehabilitation Act (1998) Some requirements can be checked automatically, but most require a manual inspection.

9 Sac State and Accessibility Exceed expectations Provide copious support from Web Services

10 Other guidelines Web Content Accessibility Guidelines (WCAG) Sac State s custom guidelines 508 WCAG Sac State

11 Measuring progress Testing Tools AccMonitor (Sac State server) WAVE Toolbar (FF Extension) Web Developer Toolbar (FF Extension) Web Accessibility Toolbar (IE Extension)

12 What do we do? ALT Text Page Structure Data Tables Unambiguous Links Multimedia Fonts Color Layout Menus Forms

13 ALT text All images need ALT text, even if it s null

14 Example Department of Widgeteering Home Page - Sacramento State Lesson: If there is text in the image, that text should be in the alt text

15 Example Search Lesson: if the image represents an action, that action is the alt text

16 Images that are links ALT text is used as link text when an image is a link Use best linking practices Never use <empty> ALT text when the image is the only thing in the link.

17 Example <empty> Lesson: Decorative images (bullets, lines, etc.) get <empty> alt text

18 Example Ruby lying down Lesson: Restrict alt text to the subject of the photo

19 Traps Don t preface with image of or picture of A filename is not alt text Don t get too long; alt text is short and to the point Spacer images = <empty> alt text Titles overwrite alt Don t describe, replace

20 Page Structure Use headings, lists, and paragraphs Example - Headings1

21 Headings Like a document outline No empty levels Each indent is at most one further in than its parent Structure a page semantically - h3s under an h2 are semantically related to that h2 Hide headings via CSS to add structure that s clear visually

22 <h1>.. <h6> Heading 1 - Major sections. Should only be one or two, and one should correspond to the page title. Heading 2 - Sections. Heading 3 - Subsections Heading Generally not used, but you see the idea Example - Headings2 & Headings3

23 Paragraphs Paragraphs should be wrapped by <p> tags, not separated by <br /> A paragraph is set of sentences that support some main idea.

24 Lists Numbered lists Auto-number their items; never number lists again! Bulleted lists Great for menus DON T confuse paragraphs or headings for lists.

25 Data Tables Always use the <th> tag For complex tables, use id/headers

26 Headers The top row is usually a header row Sometimes, the first column is a header column Example - Table1

27 Captions and Summaries Table titles = captions Table ideas = summaries

28 Table Example Name Miles Walked Miles Run Total Miles Andy Barbara Cleo Dan Caption: Marathon Training Results, Week 3 Summary: Miles walked and run by marathon trainers. Dan has walked the most and has the most total miles, but Andy has run the most.

29 Complex Tables Morning Afternoon Teacher Boys Girls Boys Girls Jones Smith Carey Blue

30 Data Tables vs Layout Tables Assistive technology uses <th> to determine if a table is data or layout. So don t misuse it

31 Unambiguous Links No more click here! Links describe where they lead No popups (without a warning) JS/CSS can be used to add detail to links

32 Adding Context to Links Problem: Newsletter page with multiple Read More links Solution: In code, wrap <span class= hidden > around context inside link. e.g. <a href= some/path >Read more<span class= hidden > about My Sac State 2.0</span></ a>

33 Multimedia Captions must be provided for any multimedia (audio/visual) content Transcripts for audio (e.g. podcasts) CSU has a deal that makes this more affordable

34 Fonts Use ems or % Not pixels or points Avoid italics and all caps line-height Short lines

35 Color Color can t be used as a sole indicator of meaning e.g. a required label on a form might be red, but would also need an asterisk indicating requirement. Text must have sufficient contrast (5:1, 7:1 if possible) Contrast has to hold for colorblindness as well Example - Teams1

36 Layout No more tables Skip to content <span style="position:absolute;"><a id="content" name="content"></a></span>

37 Stylesheets Off What happens when stylesheets are off? Linearized page

38 Menus Keyboard accessible Unordered lists Put headings/paragraphs before lists Avoid dropdowns with onchange events Consistency across pages

39 Forms Every <input> needs a <label> or a title Avoid implicit linking Use <fieldset>s when appropriate Show progress Avoid tables for layout Specify <input> heights in ems, not px. Example - Form1

40 Understanding a report Types of reports What does a report mean? Developing an action plan

41 Types of Reports Preliminary (from AccMonitor) Detailed (from Web Services)

42 What does a report mean? They don t mean that you ve done something bad They do mean that you can get help to improve

43 Developing an Action Plan Seek support Be meticulous Separate template issues vs. authorship issues Look at process.html

44 Summary ATI Best Practices On-campus Resources