Events Made Easy Forums How do I … Accessibility

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #63076
    blanch80
    Participant

    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.

    #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

    #63132
    blanch80
    Participant

    Thanks Franky.

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

    Thanks.

    #63133
    blanch80
    Participant

    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.

    #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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.