Timeline and accessibility - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
January 3, 2023 at 8:10 pm #1377503
domchocolate
Participant
Hi

I am creating a site for a client and it needs to follow accessibility criteria.

I have created a timeline here: https://owe.brother.design/ (password below).

To make the timeline accessible each milestone needs to have its own unique ID. The element creates these automatically based on the text added to the milestone date. On the left of the timeline (odd numbers) this works great, however on the right (even numbers) for some reason the code is duplicated so the ID appears twice and therefore fails an accessibility test. Here’s an example of the generated code:
```
<li class="av-milestone av-lcgieaes-5c22a5972eeb36cfb995c01458b0dce0 av-animated-generic fade-in av-milestone-valign-baseline principle-2 av-milestone-even avia_start_animation avia_start_delayed_animation" style=""><h2 class="av-milestone-date " id="milestone-principle-2" style=""><strong style="transition: none 0s ease 0s;">Principle 2<span class="av-milestone-indicator" style=""></span></strong></h2><article class="av-milestone-content-wrap" style=""><div class="av-milestone-contentbox" style=""><header class="entry-content-header" style=""><h4 class="av-milestone-title " style="">A new neighbourhood that helps meet Oxford’s housing needs</h4></header><div class="av-milestone-content" style=""><p style="">– providing homes for existing and new communities, across a range of tenures, affordability and sizes, to create a genuinely mixed place</p>
</div></div><footer class="av-milestone-article-footer entry-footer" style=""></footer></article><div class="av-milestone-icon-wrap" style="height: 181.859px;"><span class="av-milestone-icon milestone_icon" style=""><span class="av-milestone-icon-inner milestone_inner" style=""><span class="milestone_number" style="">2</span></span></span></div><h2 class="av-milestone-date " id="milestone-principle-2" style=""><strong style="transition: none 0s ease 0s;">Principle 2<span class="av-milestone-indicator" style=""></span></strong></h2></li>
```
Here’s an image of the errors generated and the DevTools code highlighted. https://owe.brother.design/images/image-1.png

Like I said this ONLY happens on even numbers on all timelines I’ve created. Here’s another timeline where the same thing happens. https://owe.brother.design/why-here/local-character/

It looks like a bug in the timeline element

Thanks in advance for your help

Dominic
January 4, 2023 at 8:24 am #1377552
Ismael
Moderator
Hey domchocolate,

Thank you for the inquiry.

Would it help if we remove the id attribute from the milestone dates and apply it to the milestones’ parent containers? If yes, then you can add this script in the functions.php file.
```
// apply IDs to the milestone container
function ava_custom_script_milestone_id()
{
    ?>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $(".av-milestone").each(function() {
                    var date = $(this).find(".av-milestone-date");
                    var date_id = date.attr("id");

                    date.removeAttr("id");
                    $(this).attr("id", date_id);
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_milestone_id', 9999 );
```
Best regards,
Ismael
January 4, 2023 at 12:19 pm #1377571

domchocolate
Participant

Hi Ismael

That’s magic, thanks! Works a treat! Good work and probably worth incorporating in the next release for accessibilities sake.

Dominic

January 4, 2023 at 1:03 pm #1377576

domchocolate
Participant

Hi Ismael

I have another query around accessibility. I have a form in the footer of my site. It includes a hidden text field.

<p class=”hidden” style=””><input type=”text” name=”avia_6_1″ class=”hidden ” id=”avia_6_1″ value=”” style=””></p>

Apparently this is missing a label which is required for accessibility even though it’s hidden. I appreciate this isn’t going to affect overall accessibility but the client’s software still picks this up. Is it possible to remove this hidden field or give it a label.

Here’s the error

Error
Input field has no description
1.3.1 Info and Relationships
Input fields should always have a description that is explicitly associated with the field to make sure that users of assistive technologies will also know what the field is for.

If the input field has a visible description indicating the purpose of the field, this description should be explicitly associated to the input field either as a HTML label or using the WAI-ARIA attribute ‘aria-labelledby’.

If it is not possible to add a visible description, either add a mouseover text (‘title’ attribute) to the input field or create an invisible label using the WAI-ARIA attribute ‘aria-label’.

Occurrences on this page1

<input>
Empty

Invisible

View code snippet in DevTools

January 4, 2023 at 2:29 pm #1377588

domchocolate
Participant

Hi Ismael – another warning has come up for the timeline element and its this:

Content not included in landmarks
1.3.1 Info and Relationships
HTML5 or WAI-ARIA landmarks are used on the page, but not all content is included.

When using HTML5 or WAI-ARIA landmarks it is best practice to include all content on the page in landmarks. In this way users of assistive technologies can use the landmarks for navigating the page without losing track of content.

Make sure that all content on the page is included in HTML5 or WAI-ARIA landmarks.

The offending items from this timeline are (https://owe.brother.design/):
<h2> Principle 1
<h2> Principle 2
<h2> Principle 3
<h2> Principle 4
<h2> Principle 5
<h2> Principle 6
<h2> Principle 7
<h2> Principle 8
<h2> Principle 9
<h2> Principle 10

and
<div> 1…through to <div> 10.

Obviously, this will also apply to my other timeline https://owe.brother.design/why-here/local-character/

Any thoughts on a fix for this?

January 7, 2023 at 7:17 pm #1377951

Mike
Moderator

Hi,
Thank you for your patience, I don’t know about WAI-ARIA Landmarks so I read this article and from what I understand there are only 8 landmarks:
banner
complementary
contentinfo
form
main
navigation
region
search
The main content of your page should be in the main role, this has been applied to the first color section on your page, so to correct it should be moved to the div ID main which is the total main part of the page.
In your post above you wrote that the timeline H2 elements should have a role, but the article I linked to says that the main content should be grouped together:

not individual elements in the main section.
Did you test for WAI-ARIA landmarks on any of your other pages? The ones I checked give the main role to the content in the first color section so all of the other sections are outside the main role and have no role, thus they should also give you an error.
If this is the case we could ask the Dev Team to evaluate this and move the main role.
What tool are you using to test the page, is it something we can test with?

Best regards,
Mike
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.