1 / 10

Common Web Accessibility Issues on Websites

For a website or web content to be accessible to users of all abilities, it must follow the Web Content Accessibility Guidelines (WCAG). WCAG is a specification of international guidelines and best practices for making websites accessible to people with disabilities.<br><br>As a website or web app owner, you want to check for alt-text alternatives for images/videos, if your website can be solely navigated by a keyboard. You should also ensure your texts have a minimum contrast ratio of 4.5:1 and avoid flashes on the website. Others include:<br>- Provide a screen magnification option<br>-Ensure elements like form fields are closer together, but not closer than two millimeters (labels are right next to things theyu2019re labeling)<br>- Your links should be clear, tagged with descriptive texts<br>- Your data tables should be HTML and not images<br>- Make your downloadable documents accessible<br>- Donu2019t ever rely on color alone to display information<br>- Provide users enough time to read and use the content<br>- Components with the same functionality within a set of Web pages must be identified consistently.<br>- Test and test and test your pages with a screen reader<br>- You should also have an accessibility policy in your organization

WhoisAccessible
Download Presentation

Common Web Accessibility Issues on Websites

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. COMMON WEB ACCESSIBILITY ISSUES By Who Is Accessible

  2. INTRODUCTION Digital accessibility is simply when websites and other digital properties can be easily understood and navigated by all individuals, including those disabilities. Americans with Disabilities Act (ADA) prohibits discrimination in the U.S. The accessibility law, Section 508, is not extensive enough, hence, the establishment of WCAG guidelines as the go-to standard for digital accessibility. 9 out of every 10 websites are not accessible, by making yours accessible, you will be opening your products and services to over 57 million Americans and avoid the risk of a lawsuit. Accessibility issues prevent users with visual, auditory, motor, and/or cognitive disabilities from accessing web content and could represent your exposure to a lawsuit.

  3. WCAG 1.1.1 Level A - NON-TEXT CONTENT Provide text alternatives for any non-text content and should serve the equivalent purpose. Visa and MasterCard (conveys specific cards) Bad ALT text - Credit cards (which ones?) Note • If the content is a video or audio clip, provide a short text explanation of the purpose of the clip or a link to a transcript. • If an image is decorative, use an empty ALT attribute to ensure assistive technology ignores it without causing confusion.

  4. No caption for users with hearing impairments Caption for users with hearing disability WCAG 1.2.2 Level A - CAPTIONS (PRERECORDED) Provide captions for videos with audio. Note: If you provide a video with sound, provide captions for hearing impaired people.

  5. Good – Captions provided for users with hearing impairments Bad – No caption for users with hearing impairments WCAG 1.2.4 Level AA - CAPTIONS (PRERECORDED) Provide captions for live audio and video. Note: Captions should include both dialogue and important sounds, embedded as text in the video track.

  6. Wrong - text on the pink background has poor contrast Right - higher contrast text is used, the text is much easier to read WCAG 1.4.3 Level AA - CONTRAST (MINIMUM) Ensure contrast ratio between text and background is at least 4.5:1 to make it easy to read. Note: • There should be enough contrast between text and its background to ensure it is readable by people with moderately low vision or color deficiencies. • Try to avoid colored text over a colored background when possible.

  7. Wrong - purpose of the link is ambiguous Right - the purpose of each link can be determined from the link text WCAG 2.4.4 Level A - LINK PURPOSE (IN CONTEXT) Ensure every link’s purpose can be determined from the link text or its context. Note: • Descriptive link text helps all users decide whether they wish to follow the link. • All links that go to the same location should use the same link text.

  8. Wrong - heading does not accurately describe the purpose of the content Right - more detailed heading that accurately describes the content WCAG 2.4.6 Level AA - HEADINGS AND LABELS Headings and labels should describe topic or purpose. Note: • Make sure the text of each heading appropriately describes its section

  9. Wrong - No cursor is shown in the input fields and users have no way to determine the current input position Right - Cursor is shown, the vertical bar provides a visual indication for the users to determine the current input position WCAG 2.4.7 - FOCUS VISIBLE The keyboard focus must be visible and clear to the user. Note: • Provide some sort of visual indicator to indicate which element has the keyboard focus • Help users with low vision or visual impairments determine where they are on a webpage

  10. CONCLUSION Now that you have seen the WCAG guidelines issues commonly found on websites, you should be thinking about the next steps to avoid vulnerability to lawsuits. Hence, we strongly encourage you to take a proactive approach to accessibility compliance. Our recommended steps to updating your site to meet WCAG 2.0 Level AA guidelines are: Determine the issues plaguing your site (you can get a free scan for common accessibility issues to get a better idea) Come up with an accessibility plan (internal remediation or accessibility professionals) Get your site audited by accessibility professionals (a combination of software with manual reviews by experts) Get comprehensive reports (problems and recommendations on how to fix each issue) The development team can make the necessary changes Get official certification as being compliant Perform digital accessibility integration in your organization (develop policies that account for digital accessibility moving forward).

More Related