JEvents Search field triggers accessibility issue: "Ensures every form element has a label"

By rusasadmins on Monday, 29 July 2019

Replies 3

Likes 0

Views 0.9K

Votes 0

JEvents 3.4.50 with FlatPlus Layout 3.4.15 on Joomla! 3.9.10 triggers the following accessibility issue when the search field is displayed:

Form elements must have labels
issue1 of 1
Issue description
Ensures every form element has a label

Impact: critical
Learn more
Element location
input[type="text"]
Element source
<input type="text" name="keyword" size="30" maxlength="50" class="inputbox" value="">
To solve this violation, you need to:
Fix at least one (1) of these issues:
aria-label attribute does not exist or is empty

aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty

Form element does not have an implicit (wrapped) <label>

Form element does not have an explicit <label>

Element has no title attribute or the title attribute is empty

Example of this issue can be seen at:
https://www.cinemastudies.rutgers.edu/news-a-events/search.form/2017/07/29/-

Also see attached screen shot.

Hello,

You can override the layout and customise it as you see fit.
https://www.jevents.net/frequently-asked-questions/customising-layouts

Many thanks
Tony

tonyp

5 years ago

0 Likes

0 Votes

0 Comments

#211764

Tony,

Thanks for the suggestion to override the layout. We have done that and it works. Example:

https://irw.rutgers.edu/news-events/calendar/search.form/2019/07/26/

Here is how we fixed it:

1. Created these directories in our template folder:



        html/com_jevents

        html/com_jevents/flatplus

        html/com_jevents/flatplus/search

2. Created this file:



html/com_jevents/flatplus/search/form_body.php

3. The code of the above file is:



<?php 

defined('_JEXEC') or die('Restricted access');

?>



<table cellpadding="0" cellspacing="0" border="0" width="100%">

    <tr>

        <td align="center" width="100%">

            <form action="<?php echo JRoute::_("index.php?option=".JEV_COM_COMPONENT."&task=search.results&Itemid=".$this->Itemid);?>" method="post" style="font-size:1;">

                <label for="keyword"><?php echo "Enter your search terms:";?></label>

                <input type="text" id="keyword" name="keyword" size="30" maxlength="50" class="inputbox" value="<?php echo $this->keyword;?>" />

                <label for="showpast"><?php echo JText::_("JEV_SHOW_PAST");?></label>

                <input type="checkbox" id="showpast" name="showpast" value="1" <?php echo JFactory::getApplication()->input->getInt('showpast',0)?'checked="checked"':''?> />

                <input class="button" type="submit" name="push" value="<?php echo JText::_('JEV_SEARCH_TITLE'); ?>" />

            </form>

        </td>

    </tr>

</table>

We recommend that the corresponding file:

components/com_jevents/views/flatplus/search/tmpl/form_body.php

be modified accordingly in future versions of JEvents Flatplus for conformance with accessibility standards.

Best regards,
Eddie

rusasadmins

5 years ago

0 Likes

0 Votes

0 Comments

#212624

Tony,
Hi, in regards with this issue with flatplus. althouhg we can create an override, when will jevents become accessible so the extension can pass all of our accessibility tests?

thanks,
Laura

rusasadmins

4 years ago

0 Likes

0 Votes

0 Comments

#216132