Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web accessibility in drupal 8


Published on

In this short presentation, Mahipal Purohit of Valuebound has talked about “Web Accessibility in Drupal 8”. The various agendas include nested heading, form accessibility, alt-tags uses, aural alerts and others. Read on for more.

Get Socialistic

Our website:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web accessibility in drupal 8

  1. 1. Web Accessibility in Drupal 8 Mahipal Purohit
  2. 2. Agenda ● What is Web Accessibility? ● Benefits of Web Accessibility ● WCAG 2.0 levels ● How to Make Drupal Site Web Accessible?
  3. 3. ● An inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. ● Web accessibility means making your website available to as many people as possible. What is Web Accessibility?
  4. 4. Benefits of Accessibility ● Expand your audience ● Good for SEO ● Grow your Business
  5. 5. WCAG 2.0 levels ● Level A – The most basic web accessibility features ● Level AA – Deals with the biggest and most common barriers for disabled users ● Level AAA – The highest (and most complex) level of web accessibility
  6. 6. Nested Heading ● Every page should have an h1 heading ● Headings must be properly nested. ● Avoid use of Heading for styling. ● Don’t Hide headings.
  7. 7. Form Accessibility ● Every Form elements should have label and announced before input ● Keyboard Accessible Field ● Use Inline Form error
  8. 8. Use of Alt-tags Every image should have alt tags
  9. 9. Aural Alerts ● Many page updates are expressed visually through color changes and animations. ● Drupal.announce accepts a string to be read by an audio UA. ● Drupal.announce( Drupal.t('You look beautiful today.') );
  10. 10. Ensure High Contrast for Text Over Images ● Use a gradient behind text ● Use color contrast check
  11. 11. Links, Screen Readers, and Accessibility ● Linked text should make sense out of context. ● Use “aria-label” or “aria-labelledby” attributes could be added to the link, providing more descriptive link text specifically for screen reader users.
  12. 12. Links, Screen Readers, and Accessibility
  13. 13. ● Display None vs Visually Hidden ● Provide a skip links ● Keyboard Navigation (tabIndex) ● Allow enlarged text ● Use Better Tables How to Make Drupal site Accessible?
  14. 14. Drupal Contributed Modules For Accessibility ● Automatic Alt text ● Text Resize ● Accessibility ● Style Switcher ● CKEditor Accessibility Checker
  15. 15. Web Accessibility Tools Here are some online website accessibility checking tools that you can use to check and validate your website’s compliance to accessibility: ● A11Y Compliance Platform by Bureau of Internet Accessibility ● Accessibility Checklist by Elsevier ● Accessibility Developer Tools by Google Accessibility
  16. 16. Thank You Questions?