Making Drupal 7 form field elements more accessible with aria-describedby links
on
Working recently with an accessibility focus group has provided some very useful insight into areas where we can make some quick accessibility improvements to Drupal 7. Amongst several other similar improvements in terms of Aria related attributes, we have come to the conclusion that adding aria-describedby to form field elements will help with providing context between form elements and their descriptions. Without context, form field descriptions are confusing.
The following is a short example of how we can easily add aria-describedby attributes to Drupal 7 core and webform module forms using theme and preprocess functions:
Also, here is a link to a drupal issue where Mike Gifford is similarily suggesting adding aria-label attributes to menu nav elements in the drupal core. Add aria-label attributes to all <nav> elements.
function yourtheme_theme_element(..) {
...
... //make sure you copy the whole function and only replace the bit below regarding the $element['#description'].
...
if (!empty($element['#description'])) {
$decription_attributes = array('class' => array('description'));
if ($element['#id']) {
$decription_attributes['id'] = $element['#id'] . '-description';
}
$output .= '<div' . drupal_attributes($decription_attributes) . '>' . $element['#description'] . "</div>\n";
}
}
The trick to start with is adding an 'id' to the descriptions associated with form field elements using theme_element for Drupal core forms, and theme_webform_element if you are using the webform module.
First you'll have to copy the respective theme functions from core or overrides already in place by your base theme.
Once the descriptions have ids, you then need to use preprocess functions in your theme/module to add in the aria-describedby attribute to the form elements. The first function below is generic and adds the aria-describedby attribute to the form field element. The following functions are for preprocessing individual elements and they all call the generic function. There are lots, some are webform specific theme functions and others are core:
/**
* Generic function for adding aria-describedby attribute to form elements. Note
* the attribute only needs to be added if the element includes a description.
*/
function yourtheme_add_aria_attributes(&$variables) {
if (!empty($variables['element']['#description'])) {
$variables['element']['#attributes']['aria-describedby'] = $variables['element']['#id'] . '-description';
}
}
/**
* Preprocess textareas to add in aria attributes.
*/
function yourtheme_preprocess_textarea(&$variables) {
yourtheme_add_aria_attributes($variables);
}
/**
* Preprocess textfield to add in aria attributes.
*/
function yourtheme_preprocess_textfield(&$variables) {
yourtheme_add_aria_attributes($variables);
}
/**
* Preprocess radios to add in aria attributes.
*/
function yourtheme_preprocess_radios(&$variables) {
yourtheme_add_aria_attributes($variables);
}
/**
* Preprocess checkboxes to add in aria attributes.
*/
function yourtheme_preprocess_checkboxes(&$variables) {
yourtheme_add_aria_attributes($variables);
}
/**
* Preprocess select to add in aria attributes.
*/
function yourtheme_preprocess_select(&$variables) {
yourtheme_add_aria_attributes($variables);
}
/**
* Preprocess date to add in aria attributes.
*/
function yourtheme_preprocess_date(&$variables) {
yourtheme_add_aria_attributes($variables);
}
/**
* Preprocess webform_email to add in aria attributes.
*/
function yourtheme_preprocess_webform_email(&$variables) {
yourtheme_add_aria_attributes($variables);
}
/**
* Preprocess webform_number to add in aria attributes.
*/
function yourtheme_preprocess_webform_number(&$variables) {
yourtheme_add_aria_attributes($variables);
}
.... and I'm sure there are plenty more.
Add new comment