Accessibility

[Anonymous]

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.

[Franky]

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

[Anonymous]

Thanks Franky.

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

Thanks.

[Anonymous]

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.

[Franky]

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