Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Web accessibility in drupal 8

1 841 vues

Publié le

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: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Web accessibility in drupal 8

  1. 1. Web Accessibility in Drupal 8 Mahipal Purohit https://www.drupal.org/u/mahipal46 https://twitter.com/mahipal46
  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?