Drupal accessibility tips
While Drupal core’s accessibility is top-notch, custom themes rely on a frontend developer to ensure proper web accessibility. While most accessibility techniques are out of scope for this book, Drupal does contain several techniques to help save you time.
The visually hidden CSS class
The visually-hidden CSS class will hide an element visually, but it will still be apparent to the accessibility tree so that screen readers and other assistive technologies can access it.
Drupal announce JS API
The Drupal.announce()
JS function is a way to easily add text to an ARIA
live region so that screen reader users will be aware of the text that is passed in:
Drupal.announce('The application has been updated.');
Using buttons as menu items
While more content than theming, be aware that menu items can take <button>
, which will generate a <button>
HTML element. This is useful to show/toggle child menu items. Note that you...