Element accessibility is showing as "Ensure markup documents contain well-formed elements"

user_14420874 0
Viewed 102

I'm testing accessibility on my project, and am receiving the error that "Ensure markup documents contain well-formed elements" relating to this bit of code:

<div tabindex="0" id="0" active="true" class="tab__heading active">
   <div id="0" active="true" class="wrapper">
      <p id="0" active="true">Austin, TX</p>
      <div id="0" class="icon undefined css-2r53ba enp1kkp0"><svg active="true" id="0" viewbox="0 0 14 11" height="11" width="14">
            <title>Arrow right</title>
            <path d="M13.8134 4.9044L8.90899 0L8.00918 0.899809L11.8273 4.71795H0.636356C0.284451 4.71795 0 5.00303 0 5.3543C0 5.70557 0.284451 5.99066 0.636356 5.99066H11.8273L8.00918 9.8088L8.90899 10.7086L13.8134 5.80421C14.0622 5.55539 14.0622 5.15321 13.8134 4.9044Z" active="true" id="0"></path>
         </svg></div>
   </div>
</div>

I've done quite a but of research, but can't figure out what the problem is here.

Any help in figuring out why this doesn't pass the accessibility test would be great.

accessibility
1 Answers

Well not sure of the exact error (especially as you didn't tell us what accessibility checker you are using ) but here are all the issues you have so if you fix them it should be fine:-

<path>

While it is valid to use <path></path> some older checkers have issues with it, try changing it to <path /> so it is self closing and see if that gets rid of the error.

active="true"

active does not exist, it is an invalid attribute.

Not sure what you are trying to achieve with that but remove it from all items! If you need some form of active attribute you can reference elsewhere use data-active="true" as data- can then accept any name you want.

Please note if you are trying to find the opposite of disabled then just remove the disabled attribute, things are "active" by default.

id="0"

You can't have more than one ID with the same value / name on a page. These either need removing or you need to adjust the IDs so they are all different.

If you need multiple items to have the same name you can reference, that is what class="class" is for. Note that even today classes should not really start with numbers as otherwise you may end up having to do [class="0"] in your CSS.

This is also likely to be the cause, as your SVG may be being parsed as XML 1.0 in which case your path having an id="0" is malformed and invalid (as XML 1.0 does not accept numbers as IDs - similar to how HTML 4 doesn't allow numbers as the start of IDs).

Final thoughts

Assuming you want the SVG to be focusable and it is an active element (i.e. you can click it and it performs an action) it is fine, otherwise remove the tabindex="0" as well as you should not have focusable items that do not perform an action in 99% of cases.

Those are all the things I could find, the mark-up looks OK other than that.

user_27028940
Related