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

1. Web Accessibility in Drupal 8
Mahipal Purohit
https://www.drupal.org/u/mahipal46
https://twitter.com/mahipal46

2. Agenda
● What is Web Accessibility?
● Benefits of Web Accessibility
● WCAG 2.0 levels
● How to Make Drupal Site Web Accessible?

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. Benefits of Accessibility
● Expand your audience
● Good for SEO
● Grow your Business

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. 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. Form Accessibility
● Every Form elements should have label and announced
before input
● Keyboard Accessible Field
● Use Inline Form error

8. Use of Alt-tags
Every image should have alt tags

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. Ensure High Contrast for Text
Over Images
● Use a gradient behind text
● Use color contrast check

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. Links, Screen Readers, and
Accessibility

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. Drupal Contributed Modules For
Accessibility
● Automatic Alt text
● Text Resize
● Accessibility
● Style Switcher
● CKEditor Accessibility Checker

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. Thank You
Questions?