VaultWiki 4.1: Address issues identified by Lighthouse (mostly accessibility related), where appropriate
During XF2.2's development, a number of changes were made in response to issues flagged by
Lighthouse in Google Chrome's developer tools.
Lighthouse has also identified some issues with the VW.org XF wiki. It'd be great to tackle the relevant ones so that our wikis will score higher. I have intentionally skipped any reported problems that can be attributed to XF directly or caused by user-generated content.
Wiki index: Wiki areas icon: Links do not have a discernible name
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.
Learn more.
Suggestion: Add an aria-label attribute to each icon with the value being the Area name. N.B. Lighthouse does not complain about XF's node icons because they do not act as links.
Widget: Find a Wiki page submit button: Some elements have a [tabindex] value greater than 0
A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies.
Learn more.
Area page directory list: vw-content-list-update: <dl>'s do not contain only properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements.
When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output.
Learn more.
Suggestion: Do not use <dl> here. Change to XF2.2's structItem-cell--latest markup. Basically along the lines of:
Code:
<div class="vw-content-list-update structItem-cell structItem-cell--latest">
<a><!--content timestamp--></a>
<div class="structItem-minor">
<a><!--content author username--></a>
</div>
</div>
Area page tile layout: vw-content-list-tiled-stats: <dl>'s do not contain only properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements.
When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output.
Learn more.
Page translation/language flag images: Displays images with inappropriate size
Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity.
Comment: I think the cause might be because the 'selected' language/translation's flag image is being displayed at >100% of the image's actual dimensions.
- Displayed size: 30 x 30
- Actual size: 24 x 24
- Expected size 30 x 30
Lighthouse also complains about YUI 3@3.5.0 because of known security vulnerabilities (3, medium severity), although I understand that there are plans to remove this library altogether in VW 4.2.