How to Avoid the Top 5 Accessibility Issues on the Web

1. How to Avoid the Top 5 Accessibility Issues on the Web

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

12. Checkbox Examples

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

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