Events Made Easy › Forums › How do I … › Accessibility

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • Fri 20 Aug 2021 at 11:13 #63076
    Anonymous
    Inactive

    Hi Franky,

    A level ‘A’ accessibility flag has occured on an audit of our site, on the #_FILTER_CATS element – https://learning.necsu.nhs.uk/upcoming-events/

    Default event list filtering format – <h3>Please select a category</h3>#_FILTER_CATS 
    I’m using the shortcode: [eme_filterform category=1,18,29,30,34,36,35,33,38,32 submit="Filter"]

    The issue is flagged as: Form field is not labelled, I need to add a label to the element. I’ve done this on other elements of the site, such as the Search icon using jQuery – $('a.header-search-link').attr('aria-label', 'search icon'); but can’t seem to isolate the drop down filter list.

    Is there a way to add a label to the element for screen readers, or use aria-labelledby?

    Thanks,
    David.

    Fri 20 Aug 2021 at 12:55 #63077
    Franky
    Keymaster

    Basic jquery selector to use … see also the source code:
    $('#eme_cat_filter')
    The next version will add an aria-label for most dropdowns

    Fri 3 Sep 2021 at 13:43 #63132
    Anonymous
    Inactive

    Thanks Franky.

    How do I add/change the aria-label? I can’t see anything in the documentation.

    Thanks.

    Fri 3 Sep 2021 at 14:36 #63133
    Anonymous
    Inactive

    I’m having the same issue on booking forms:

    https://learning.necsu.nhs.uk/events/managers-bitesize-guidance-annual-and-other-leave/

    First Name, Last Name and Email are flagging as needing a label but when I try to add one it seems to get stripped out on save.

    Current code for booking form:

    [eme_if tag='#_WAITING_LIST_ACTIVATED' value='1']
<p align="center"><h3 align="center">Please note this event is currently fully booked</h3> </p>
<p align="center"><b>Submitting the form below will place you on the waiting list</b></p>
[/eme_if]
<table class='eme-rsvp-form'>
    <tr><th scope='row'>First Name*:</th><td>#REQ_FIRSTNAME</td></tr>#_SEATS 
    <tr><th scope='row'>Last Name*:</th><td>#_LASTNAME</td></tr>
    <tr><th scope='row'>E-Mail*:</th><td>#_EMAIL</td></tr>
</table>
[eme_if tag='#_WAITING_LIST_ACTIVATED' value='0']
#_SUBMIT
[/eme_if]
[eme_if tag='#_WAITING_LIST_ACTIVATED' value='1']
#_SUBMIT{Request to be placed on the waiting list}
[/eme_if]

    The code works fine, just need to associate a label with the input boxes #REQ_FIRSTNAME, #_LASTNAME and #_EMAIL.

    Hope you can help.

    Thanks.

    Fri 3 Sep 2021 at 22:16 #63134
    Franky
    Keymaster

    EME adds an id and a name for each input field. So just like you would use
    $('#eme_cat_filter').attr('aria-label', 'category filter');
    you can use (after checking the resulting html):
    $('#lastname').attr('aria-label', 'Lastname');

    While I’m willing to add aria-label on many fields, please do try to use your browser html sourcecode viewer and jquery selectors.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘How do I …’ is closed to new topics and replies.
Scroll to Top