Issue: VaultWiki 4.1: Address issues identified by Lighthouse (mostly accessibility related), where appropriate

Issue Tools
- View Changes

August 13, 2020 2:29 PM
ACL

Regular Member
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></a> <div class="structItem-minor"> <a></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.

Issue Details

Issue Number 6089

Issue Type Task

Project VaultWiki 4.x Series

Category Page Output

Status Completed

Priority 5 - Minor Bugs / Small Tweaks

Target Version 4.1.0 RC 3

Resolved Version 4.1.3

Milestone (none)

Software DependencyXenForo 2.x

License TypePaid

Votes to perform 0

Votes not to perform 0

Attachments 0

Assigned Users (none)

Tags (none)

August 13, 2020 3:59 PM

pegasus

VaultWiki Team

The bundled YUI version is 3.18, so that appears to be a false positive, possibly it thinks .18 < .5
Or it just can't see the version number.

I will look into the other issues. We have not done a deep dive yet into template changes in XF 2.2. The main focus was getting rid of the fatal errors.

Reply
October 11, 2021 2:13 PM

pegasus

VaultWiki Team

Fixed the flag images in the next release. For the next release, we have replaced the 24x24 PNG images with 32x32 WEBP images (basically no increase in file size even though the dimensions are larger). The upgrade script will automatically convert your existing languages to use WEBP if you are using one of the included images.

Reply
October 12, 2021 12:33 PM

pegasus

VaultWiki Team

In XenForo, added aria-label attributes to area icons. In vBulletin, this has not been done because those icons have Javascript functionality which has a tooltip.

In XenForo 2, all tabindex="1" have been removed for consistency with XenForo 2 styles. Since XenForo 1's default style includes some tabindex="1", any numbered tabindex are left alone under that version.

In XenForo 2, changed vw_content_lastbit to be more in line with the structItem markup. In other versions / platforms, the markup had the correct DT / DD groups, so they have been unchanged.

vw-content-list-tiled-stats have been changed to ULs and LIs.

This effectively closes this report as resolved in the next release.

Reply

+ Reply

All times are GMT -4. The time now is 6:11 AM.

This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Learn more… Accept Remind me later

Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

Issue: VaultWiki 4.1: Address issues identified by Lighthouse (mostly accessibility related), where appropriate

Issue Tools