form accessibility

How can I add alt text to the calendar icon on each event or remove the calendar icon all together?

Hello

What should be the alt text? Should it be the title of the event?

Tuan

Hi,

In this case, the alt text should actually be null since it's part of a link that is already descriptive so it should just be alt="". Is there a way for me to update this?

Thanks!

Hi Kelly

For now, maybe the easiest way would be edit code. The file you need to edit is components/com_eventbooking/themes/default/common/calendar.php

Once the modification is done, you can move the modified file to PATH_TO_TEMPLATE/html/com_eventbooking/common folder so that the change won't be lost when you update to future releases of the extension

Regards,

Tuan

Just want to update that on latest package on server, you can edit the menu item which you created to display calendar, set Show Event Icon parameter to No and that default icon won't be shown

You can access to My Downloads menu item, download latest package, upgrade it to your site to use this small improvement

Tuan

The form structure for the month/year controls also need to be updated. The select fields do not have labels describing their purpose. How can this be added?

Hi Kelly

I must be honest that I don't have enough accessibility knowledge to understand what needs to be changed to make it accessible. If you guide me what need to be changed, I will be happy to make change to the code to make it works

Regards,

Tuan

Hi Tuan,

I'm happy to!

The selects boxes need a description to explain their purpose. To do this, we can add a label so the HTML will look like this where the label's for attribute matches the select's id attribute:

<label for="month">Select a month</label>
<select id="month" >
<option>January</option>
<option>February</option>
...
</select>

This would need to be done on both the month and the year select fields.

For reference, this relates to WCAG 3.3.2 Labels or Instructions .

Another item that needs attention are the font icons. They appear as empty links. Aria labels can help here. Here's the fix:

<a href="/full-calendar?month=3&amp;year=2020" rel="nofollow" aria-label="show previous month"><i class="fa fa-angle-double-left eb-calendar-navigation" aria-hidden="true"></i></a>

The aria-label needs to describe the purpose of the link so for this one, it can be "show previous month" and the >> can be "show next month".

There is also an empty heading (h1) on the page that displays directly above the calendar but I don't see where to enter text for the heading. The best fix may be to add a script that says if the h1 is empty, do not display it. I say this because for example, on our Calendar page , we already have an h1 and there should only be one h1 on a page. I do notice that if I use the buttons to scroll through the months, the content we have above the calendar then disappears leaving no headings which is also bad for accessibility (and web design in my opinion). Is there a way to keep the content always in view?'

Thanks so much for your assistance with this! Calendar accessibility is hard. I'm happy to answer any accessibility questions you have! Feel free to email me directly.

Hello Again,

I'm just checking on this to see if it's something you will be able to implement in a future update. I wanted to provide my client with feedback so I know if I can continue to recommend this extension for an accessible calendar option.

Thanks so much for your help!