Fundamentals of Web Accessibility PAMELA THOMAS & KARA PATTEN GRAPHICS FROM WEBAIM.ORG

Transcription

1 Fundamentals of Web Accessibility PAMELA THOMAS & KARA PATTEN GRAPHICS FROM WEBAIM.ORG

2 Topics Web accessibility The Legal Perspective Federal mandate & SU ICT Accessibility policy WCAG 2.0 AA Guidelines Web accessibility The User s Perspective Manually evaluating your site for accessibility (WAVE tool) Video captioning resources

3 Why does the SU website need to be accessible? The Legal Perspective LEGAL / POLICY PERSPECTIVE Federal laws Americans with Disabilities Act (1990) Section 504 of the Rehabilitation Act (1973) Office for Civil Rights says accessible means: a person with a disability is afforded the opportunity to acquire the same information, engage in the same interactions, and enjoy the same services as a person without a disability in an equally effective and equally integrated manner, with substantially equivalent ease of use. SAMPLE OF CASES INVOLVING HIGHER ED California Community Colleges (1996) California State University (1999) Ohio State Univ. (2010) Florida State (2012) Univ. of Kentucky (2012) UC Berkeley (2013) Penn State Univ. (2013) Univ. of Montana (2014) Youngstown State Univ. (2014) Univ. of Cincinnati (2014) MIT and Harvard Captioning Lawsuit (2015)

4 Office for Civil Rights: IT Accessibility REACTIVE APPROACH Provide a PDF document in alternate format when requested Provide automated captions or captioning for video when requested Provide personal assistance to student registering for courses during business hours PROACTIVE APPROACH Make all documents accessible before posting on web Videos must be captioned before posting on web Online registration process should be fully accessible for use 24/7

5 SU Information and Communication Technology (ICT) Accessibility Policy Web content must comply with W3C Web Content Accessibility Guidelines (WCAG 2.0 A/AA) New and redesigned web pages must: In compliance with WCAG 2.0 AA Indicate in plain text a method of contact for users with disabilities having trouble accessing content within the site Accessibility link in footer of new template More information in ICT Accessibility Toolkit

6 WCAG 2.0 AA Guidelines World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG) 2.0 AA WebAIM s WCAG 2.0 Checklist Web Accessibility Manual Checklist

7 Why does the SU website need to be accessible? - The User s Perspective How do people with disabilities use the web? People with mobility impairments People who are blind or visually impaired People who are color blind People with cognitive impairments People who are deaf or hearing impaired How does site accessibility affect their experience?

8 People with mobility impairments May use only the keyboard for navigation May use voice recognition software May not have fine motor control Head wand Mouth Stick

9 All content is accessible from the keyboard only [Tab] to move to next link [Shift][Tab] to move to previous link [Enter] to select the link Arrow keys & [Enter] to navigate forms For more commands see: WebAim: Keyboard Accessibility Try it: New York Times (nytimes.com) vs Wall Street Journal (wsj.com)

10 Manual Checklist: Your site All content is accessible from the keyboard only [Tab] focus is visible There is a logical [Tab] order; matches the visual order All links and form elements are usable from the keyboard only There is a visible Skip Navigation / Skip to Main Content link Test dialog boxes that pop open. You should be able to navigate and close these using the keyboard. Esc should also close these boxes. Manual dexterity is not required for someone using a mouse No exceptionally small or moving links

11 People who are deaf or hearing impaired Videos Podcasts Simulation

12 Audio and Video are usable by people who are deaf or hard of hearing Audio Provide / link to a transcript Example: Nature.com Video Provide synchronized captions Example: AccessibleSU Descriptive audio may be necessary Information about transcripts and captioning in ICT Accessibility Toolkit

13 Benefits of Captioning Increased comprehension People whose primary language is not English Instructor has accent or speaks quickly Complicated subject matter Video with poor sound quality Visual learners Transcript useful as study aid Interactive video search useful as study aid (Interactive Captions) Easily translated to another language Easily viewed in noise sensitive environment OFCON Study: 80% of people who use captions are not hard of hearing* Source: ltations/accessservs/summary/access.pdf Improves Search Engine Optimization (found to increase inbound traffic by 7.3%)

14 Manual Checklist: Your site Audio and video are usable by people who are deaf or hard of hearing and people with mobility Audio content has an accompanying transcript Videos have synchronized captions Video player controls can be selected using the keyboard only

15 People who are blind Do not use a mouse May use a screen reader to listen to the content read May use a refreshable Braille display

16 Page can be read effectively with a screen reader Images have alternative text descriptions Hyperlink text is descriptive Headings are used Page title is descriptive

17 Screen reader cannot interpret images All images have appropriate, equivalent alternative text (alt text) Images that do not convey content are decorative and given null alt text (alt= ) When is alt text required? An alt Decision Tree W3C WAI Web Accessibility Tutorials

18 Informative Hyperlinks: link text The visible part of the link (text to display) should describe the purpose of the link. Bad examples: Visit Syracuse University Parking Services website here. See for info.** More Better examples: Visit Syracuse University Parking Services website for parking information. See Carnegie Library Reading Room Dedication article.

19 Informative Hyperlinks: document type Document links should indicate the document type in the visible part of the link (link text). Let users know if the link will open something other than a webpage. Bad examples: There is a PDF here for our room policy. Instructions for use Better examples: Read our Room Policy [PDF] Instructions for use [Word]

20 Use Headings

21 Tables Tables are used for tabular data, not layout Keep table structure simple No merged columns or rows Designate column headers and row headers where appropriate webaim.org (search for Tables ) Type Location Duplex? Cost 8 ½ x 11 black and white 8 ½ x 11 black and white Basement Yes $0.04 Yes $ ½ x 11 black and white 1 st Floor No $ ½ x 11 color No $ ½ x 11 black and white 2 nd Floor Yes $0.04

22 Manual Checklist: Your site Page can be read effectively with screen reader (WAVE for Chrome) Graphics have meaningful descriptions (alt text) Link text is descriptive Headings are used and nested appropriately All content can be accessed using the keyboard alone Page has logical read order (disable CSS) There is a Skip Navigation or Skip to Main Content link Data tables have simple structure (merged columns or rows are avoided)

23 People with low vision Visual representation

24 People with Low Vision May use screen magnification software May override font & background colors

25 Content is perceivable by someone with a visual impairment Contrast Text within images Font style Color alone is not used to convey important information

26 Limit text within graphics

27 Fonts: type, size, color Legible, web standard fonts (sans serif) such as Arial, Verdana, Franklin Gothic Avoid condensed, narrow or script fonts I like my funky font! Makes my page look great even though it s hard to read. Minimum font size = 10pt Use relative font sizing (% or em rather than px) Use text colors appropriate for text and hyperlinks. I m going to make my links really stand out.

28 Contrast: text and background Meet or exceed the minimums 4.5:1 contrast ratio - Smaller text (18 pt or smaller, 14 pt Bold or smaller ) 3.0:1 contrast ratio Larger text (over 18 pt, over 14 pt Bold) Contrast checker Contrast checker or WebAIM contrast checker if you know the hex# WAVE tool Brand.Syracuse.edu Print on a grayscale printer to test contrast and color.

29 Manual Checklist: Your site Content maintains clarity when magnified Graphics do not contain important text Page is usable when font size is doubled Horizontal scrolling is enabled when magnified. Font and color choices promote readability High contrast colors are used for text and background (wave.webaim.org) 4.5:1 for smaller text 3:1 for larger or bolded text Font is simple and well-spaced

30 Color Blindness Approximately 8-10% of the male population and about 0.5% of the female population experience some form of color deficiency Reds & greens are often indistinguishable

31 Color Blindness: Simulation Map of Hurricane Isabel (with color)

32 Color Blindness: Simulation Map of Hurricane Isabel (with simulated red/green colorblindness) Simulated using Vischeck

33 Avoid using color alone to convey meaning Dairy Beverages Confections Meat/Poultry Seafood Grains/Cereals Condiments Produce

34 Use labels in addition to color

35 Manual Checklist: Your site Color alone is not used to convey important information Information contained in charts, graphs and color-highlighted text uses additional means for conveying important information (patterns or textures) Examine text within graphic images for sufficient color differentiation (print on black & white printer to see if information is lost)

36 People with cognitive impairments* Users may have difficulty focusing on or comprehending lengthy sections of text Some fonts may be more difficult to read; Contrast is important Complex layouts or inconsistent navigational schemes may be confusing May benefit from content in multiple forms (visual, text, auditory, etc.)

37 Page layout promotes readability Font style Consistent navigation throughout the site Consistent placement of elements on pages Avoid large blocks of text

38 Content Post clear, concise content. Write clear, short sentences. Chunk content using headings, paragraphs, bullet points whenever possible. Use plain English and avoid unspecified acronyms and institutional jargon.

39 Which would you rather read? THIS We are here to help you with your research needs. We also have a lot of services available online. If you want to request a book on the library website, click here. It s easy. To return a book, drop it off at the Circulation desk. You can renew a book online or in person. Be sure to renew before the book is due to avoid late fees. Fines and late fees are here. You can pay your fines at the BSO in Bird. OR THIS Request a book online. Return books to the Circulation desk. Renew books online or in person at the Circulation desk. View fines and late fees. Fines and late fees can be paid at the Business Services Office (BSO) in Bird Library.

40 Manual Checklist: Your site Page layout promotes readability Font is well-spaced and simple Navigation is consistent throughout the site Page elements are consistently located throughout the site e.g. search element Large blocks of text are broken with headers or graphics Headings are visually differentiated from body text (color, size, bold or underline) No distracting elements There are no moving or blinking or otherwise animated images

41 External documents MS Word, PPT, & Excel, Adobe PDF, etc. Test the accessibility using the build-in accessibility checkers If unable to make them accessible, post an accessible alternative See ICT Accessibility Toolkit

42 Other manual checks Ensure the page <title> is unique and descriptive. Specify the page language. Make sure instructions do not rely on shape, size, or location. Ensure that animating or updating content or media can be paused and stopped. Look for strobing content that could cause seizures.

43 Automated Evaluation Checkpoints Presence of page title, language Presence of alt text Text and background contrast Font sizing (proportional vs fixed sizing) Headings nested properly Tables have column headers, summary and caption Presence of labels for form elements

44 Evaluating Web Pages for Accessibility AUTOMATED EVALUATION Do images have descriptions? Is the page title specified? Is there a Skip to Content link? Are high contrast colors used? Are forms using correct HTML labeling? Are data tables headers correctly labeled in HTML? MANUAL EVALUATION Is the image description meaningful? It the page title descriptive? Is the Skip to Content link working? Is it visible when it receives [Tab] focus? Is there a [Tab] focus? Is the [Tab] order logical? Can all functions be accessed using the keyboard only?

45 Everyone benefits from accessible technology People using mobile devices Improved search engine optimization for web content Text-based PDF vs image PDF Captioned video vs no captions People whose primary language is not English Students who benefit from information in >1 type of media (visual, audio, plain text vs graphical representation, etc.) Aging population Independence for people with disabilities

46 Resources Information and Communication Technology (ICT) Accessibility Toolkit webaim.org Tips for Getting Started with Web Accessibility, W3C