Speak Out Loud for Visually Impaired Users

Accessing Media

Unless you’re using a screen-reader, you have no idea that the first sentence of this article is actually: “This is an icon that depicts volume increasing.”

We’ve been on this kick lately where we talk to ourselves while we read every element on a web page that we create. We’re using it to develop our Theme, as well as using it to identify points where visually impaired users might have trouble using our sites. We found that actual content for stand-alone icons rarely exist. When this happens, most icons are just hidden from the screen-reader and skipped over completely. That’s the lazy way out.

It’s become a huge fad lately to use icons in place of images, but we’ve completely neglected them in regards to accessibility. Font Awesome provides a pretty great accessibility guide, but it wasn’t integrated into our favorite page builder (WP Bakery Page Builder fka. Visual Composer) so we decided to integrate their tips into the template ourselves.

First, we had to add a parameter to use for the title=”meaning” attribute, so we added this to functions.php in our child theme:

function vc_after_init_actions() {
    $vc_column_text_new_params = array(
            'type' => 'textfield',
            'holder' => 'h3',
            'class' => 'sr-only',
            'heading' => __( 'ARIA Details', 'text-domain' ),
            'param_name' => 'aria_details',
            'value' => __( 'This is an icon that the site author has neglected to provide a description for.', 'text-domain' ),
            'description' => __( 'Provide a description of the icon (semantic meaning is appropriate) for screen reading software to verbalize this icon.', 'text-domain' ),
            'admin_label' => true,
            'dependency' => '',
            'weight' => 0,
            'group' => 'ARIA',
    vc_add_params( 'vc_icon', $vc_column_text_new_params ); 
} add_action( 'vc_after_init', 'vc_after_init_actions' );

Now, it was time to edit the vc_icon.php template. To do this, create a directory in your theme folder called “vc_templates” and copy the icon template from /plugins/js_composer/include/templates/shortcodes/ into your new folder.

First, we changed the output to use the icon element instead of the span element that Visual Composer uses by default. We just replaced ‘span’ with ‘i’ to get this:

<i class="vc_icon_element-icon <?php echo $iconClass; ?>" <?php echo( 'custom' === $color ? 'style="color:' . esc_attr( $custom_color ) . ' !important"' : '' ); ?>></i>

Now, we just need to incorporate our custom attribute for the title element. We’ll use the initial variables declaration at the top of vc_icons.php to include our $aria_details variable. This will automatically be assigned the value of the attribute we created earlier (via whatever voodoo magic is running inside Visual Composer).

After implementing the above changes to the theme files, we now have screen-reader accessible icons, like this one. If your voice-over is activated, you should hear: “An icon showing a speaker with no sound coming out, indicating the end of this article.”