Quote from rasterix on November 8, 2018, 6:41 am

Hi, I am using this forum for a university blog site and we have some users who use assistive technologies (i.e., screen readers) and also need to meet WCAG 2.1 Level AA.

This plugin seems to be what we need and is working great, but there are a couple of minor accessibility issues I’m hoping you can help with. They are essentially for providing screen reader text for visual elements that aren’t identifiable or can be confusing if you are using a screen reader. Screen reader text can be applied using WAI ARIA attributes or by applying span tags to insert some explanation of what a visual element is and has a class where CSS is used to position the text off screen so that it can’t be seen visually but helps visually impaired users to understand or not miss any content/functions.

Would it be possible to add some screen reader text to the following 4 elements (I have tested these by modifying the plugin code on a dev version of the site, but it isn’t feasible to modify the plugin directly):

1. The forum navigation (e.g., in line 1058 of forum.php, this was the only position of the screen reader text where it successfully worked)

   echo '<span class="screen-reader-text">Forum navigation</span><div id="forum-navigation">';

2. The breadcrumbs (e.g., line 104 of forum-breadcrumbs.php worked)

   echo '<span class="screen-reader-text">Forum breadcrumbs: You are here</span><span class="dashicons-before dashicons-admin-home"></span>';

3. The thumbs down and up icons (e.g., line 74 of forum reactions.php adding a span tag with screen reader text here works)

   $output = '<span class="reaction '.$reaction.'"><span class="reaction-icon dashicons-before dashicons-thumbs-'.$reaction.' '.$active[$reaction].'"><span class="screen-reader-text">Click for thumbs'.$reaction.'</span></span><span class="reaction-number">'.$counter.'</span></span>';

4. The report post icon (e.g., line 37 of forum-reports.php tested with screen reader and works)

   echo '<span class="report-link dashicons-before dashicons-warning"><span class="screen-reader-text">Click to report post</span></span>';

    

The CSS for the screen-reader-text class that I apply is:

.screen-reader-text { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

If there was a way that I could add these myself to the child theme, I would. If not, would you be able to update your plugin? I appreciate any help you can offer to improve the accessibility of the forum. It is a really good tool and this would go along way to help screen reader users. Thanks a lot for your help.