nickvergessen
commented
2 years ago - Created a few rooms
- Opened one and added some messages
- Validated with https://validator.w3.org/#validate_by_input
Yields 409 errors 🙊
40 Error: CSS: top: Parse Error.
40 Error: CSS: left: Parse Error.
40 Error: Attribute decorative not allowed on element span at this point.
30 Error: The aria-controls attribute must point to an element in the same document.
21 Error: Attribute container not allowed on element div at this point.
20 Error: The element button must not appear as a descendant of the a element.
20 Error: Attribute placement not allowed on element div at this point.
12 Error: Bad value for attribute role on element div.
11 Error: Attribute trigger not allowed on element div at this point.
11 Error: Attribute margin not allowed on element div at this point.
10 Error: Element div is missing one or more of the following attributes: role.
10 Error: Attribute test-attr not allowed on element button at this point.
10 Error: Attribute handle-resize not allowed on element div at this point.
10 Error: Attribute delay not allowed on element div at this point.
10 Error: Attribute alt not allowed on element svg at this point.
9 Error: Duplicate ID hole.
9 Error: Attribute boundaries-element not allowed on element div at this point.
8 Error: CSS: y: Property y doesn't exist.
8 Error: Bad value for attribute role on element li.
8 Error: Attribute menu-container not allowed on element div at this point.
6 Error: CSS: height: Invalid type: 100% - var(--header-height).
5 Error: Element h3 not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
5 Error: Attribute primary not allowed on element div at this point.
5 Error: Attribute attributes not allowed on element a at this point.
3 Error: Element h4 not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
3 Error: CSS: x: Property x doesn't exist.
3 Error: CSS: border-radius: Invalid type: var(--progress-bar-height) / 2.
2 Error: CSS: margin-right: The types are incompatible.
2 Error: CSS: font-size: Invalid type: var(--default-font-size) * 0.8.
2 Error: Attribute icon not allowed on element button at this point.
2 Error: An element with role=tab must be contained in, or owned by, an element with role=tablist.
1 Error: Unclosed element span.
1 Error: Stray end tag span.
1 Error: Stray end tag button.
1 Error: Start tag button seen but an element of the same type was already open.
1 Error: No li element in scope but a li end tag seen.
1 Error: End tag button implied, but there were open elements.
1 Error: Element meta is missing one or more of the following attributes: charset, content, http-equiv, itemprop, name, property.
1 Error: Element li not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
1 Error: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
1 Error: CSS: translate: Property translate doesn't exist.
1 Error: CSS: ry: Property ry doesn't exist.
1 Error: CSS: rx: Property rx doesn't exist.
1 Error: CSS: r: Property r doesn't exist.
1 Error: CSS: left: Invalid type: 50% + var(--preview-arrow-offset).
1 Error: CSS: height: The types are incompatible.
1 Error: CSS: cy: Property cy doesn't exist.
1 Error: CSS: cx: Property cx doesn't exist.
1 Error: CSS: border-radius: only 0 can be a unit. You must put a unit after your number.
1 Error: CSS: behavior: Property behavior doesn't exist.
1 Error: CSS: aspect-ratio: 1 is not a aspect-ratio value.
1 Error: Attribute timestamp not allowed on element a at this point.
1 Error: Attribute systemmessage not allowed on element a at this point.
1 Error: Attribute referenceid not allowed on element a at this point.
1 Error: Attribute reactions not allowed on element a at this point.
1 Error: Attribute popover-inner-class not allowed on element div at this point.
1 Error: Attribute popover-class not allowed on element div at this point.
1 Error: Attribute placeholder not allowed on element div at this point.
1 Error: Attribute messagetype not allowed on element a at this point.
1 Error: Attribute menu-align not allowed on element div at this point.
1 Error: Attribute isreplyable not allowed on element a at this point.
1 Error: Attribute avatarimage not allowed on element div at this point.
1 Error: An element with the attribute tabindex must not appear as a descendant of the a element.
1 Error: An element with the attribute tabindex must not appear as a descendant of an element with the attribute role=button.
1 Error: A link element with a sizes attribute must have a rel attribute that contains the value icon or the value apple-touch-icon or the value apple-touch-icon-precomposed.
Problem description
We could see that there are a number of validation errors that can cause accessibility issues. Among other things, there are several elements with identical ID-values.
There are also validation errors regarding code semantics that doesn’t follow the standard.
We had limited means to validate the code but we can affirm that there are issues that fail the WCAG-standard.
The following validation errors aren’t allowed in the WCAG-standard:
It is worth keeping in mind that other validation errors can also cause accessibility problems. But these four are very likely to do so.
It’s generally best to keep a website’s code as close to standard as possible. This makes it more robust and minimizes risks for errors when assistive technologies interact with it.
We list some serious issues below, but there are more. We recommend that you validate the code, control that it’s semantically correct, and fix as many issues as possible.
Talk app
Some examples from the Talk app:
Suggested solution
(The DIV inside list I complained already about many times, mostly in the left sidebar)