1 / 17

How to Avoid the Top 5 Accessibility Issues on the Web

How to Avoid the Top 5 Accessibility Issues on the Web. 2010 CSUN Center on Disabilities Conference on Assistive Technology and Disabilities. Mia Lipner, Sue Martin, and Mary Lou Mendez Veterans Health Administration Office of Health Information. March 24, 2010. Overview.

amity-england
Download Presentation

How to Avoid the Top 5 Accessibility Issues on the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How to Avoid the Top 5 Accessibility Issues on the Web 2010 CSUN Center on Disabilities Conference on Assistive Technology and Disabilities Mia Lipner, Sue Martin, and Mary Lou Mendez Veterans Health Administration Office of Health Information March 24, 2010

  2. Overview • Our office partners with project teams to help them build Section 508 requirements into the development of e-learning products and Web pages • We use manual and automated testing procedures to confirm that the 508 requirements are met • Data collected over 18 months showed several common accessibility issues • This presentation will address the top five

  3. Meaningful Alternative Text What is alternative text? • Descriptive text supplied for images that convey information • Should communicate the purpose of an image, not just tell what it is • Benefits users of assistive technologies and browsers that don't display images (both text-only and browsers with images turned off)

  4. Alternative Text Examples

  5. Alternative Text Tips • Make sure that all meaningful images use alt text, or longdesc • Alt text should be concise and convey the most important purpose of the image • Longdesc is used to create a link to a page where a more detailed description can be provided (useful for charts, complex illustrations, etc.) • Decorative and layout images like spacers should use empty alt text “”

  6. Alternative Text Tips - 2 • Do not confuse alt and title attributes • Title attributes: • Should be used to create tooltip-like information for web elements • Are not the same as alternative text • Are supplemental text and are not read automatically by most screen readers • Problematically, some web design tools do not make clear whether you are adding title or alt to images • Big reason tagging is not done, or is not done correctly • Web design tools didn’t always make it easy

  7. Meaningful Text for Links When is link text meaningful? • When the text provided within links lets a user know what will happen when the link is activated • When unique text is used for links that go to different places

  8. Example: KFC Web Site Menu That Has Same Text for Links That Go Different Places

  9. Associated Labels for Form Fields • What are associated labels? • Tagged information that indicates purpose of form element • Does not require that Assistive Technologies "guess" what is relevant based on positioning • When form fields don't include explicit labels, assistive technology may not give users enough information to complete a form • Be sure to identify each label with a name and then associate it with the appropriate form control

  10. Form Labels Example

  11. Text Input Examples Bad text input: Full Name<BR> <INPUT name=first> <INPUT maxLength=1 size=1 name=MI> <INPUT id=last size=25 name=last> Good text input: Full Name<br/> <LABEL for=first>First</LABEL> <INPUT name=first id=first > <label for=MI">M.I.</label> <INPUT maxLength=1 size=1 name=MI id=MI> <label for=last>Last</LABEL> <INPUT id=last size=25 name=last>

  12. Checkbox Examples Good Checkboxes: <legend>Please rate your experience with our services</legend> <P> <INPUT id=good type=checkbox value=good name=good><LABEL for=good>good</label> <INPUT id=excellent type=checkbox value=excellent name=excellent><LABEL for=excellent>Excellent</LABEL> <INPUT id=spectacular type=checkbox value=spectacular name=spectacular><label for=spectacular>Spectacular</label> Bad Checkboxes: <LABEL>Please rate your experience with our services</label> <P> <INPUT id=good type=checkbox value=good name=good><br> Good <INPUT id=excellent type=checkbox value=excellent name=excellent> <br>Excellent! <INPUT id=spectacular type=checkbox value=spectacular name=spectacular> Spectacular!

  13. Use of Color • Color should never be used by itself to convey meaning on a webpage • Some users won't be able to recognize it • If color is used for emphasis or as part of an instruction, should be paired with another form of communication • Use at least one other indicator along with color to convey information

  14. Use of Color Example Bad Use of Color Good Use of Color

  15. Keyboard Access • Some people who visit your website may not be using a mouse • Make sure everything on your pages can be accessed with a keyboard • This includes menus, calendars, links, controls

  16. Keyboard Access Example

  17. Keyboard Accessibility • Use tabindex to make sure controls and links are in the tab order • Make sure you do not use mouse-specific commands to activate them • Does not do users any good to tab to an element, if nothing happens when they hit ENTER

More Related