Misc. New UI - Accessibility feedback

[jaeenox]

  On 5/21/2025 at 9:12 PM, zloybelka said:

Latest updates to un-darkening with Stylus for Nexus

Expand  

Thank you!  This is what the website should look like without having to resort to Stylus.  A readable background and collections not being forced on us on the game page.

[jaeenox]

  On 5/21/2025 at 9:12 PM, zloybelka said:

Latest updates to un-darkening with Stylus for Nexus

Expand  

Are you able to change the games thumbnails back to the old ones with Stylus?  It would be very much appreciated particularly for Fallout 4 which is awful now.

[zloybelka]

  On 6/1/2025 at 1:56 AM, jaeenox said:

Are you able to change the games thumbnails back to the old ones with Stylus?  It would be very much appreciated particularly for Fallout 4 which is awful now.

Expand  

I managed to change one (for Dragon Age Origins) on the first day. Didn't work on other games for some reason. Also, idk how to change them all at once, but you can try adding this to your CSS (should work on the game page, not on individual mod pages)

  Reveal hidden contents

    /*Fixed icon for FO4*/
    img.size-7.shrink-0.rounded-sm {
        background-image: url('https://images.nexusmods.com/images/games/4_3/tile_1151.jpg');
    }

If it won't work for you, no idea how to fix this, I'm not a web-designer. Maybe, someone else will.

[jaeenox]

  On 6/1/2025 at 5:18 PM, zloybelka said:

I managed to change one (for Dragon Age Origins) on the first day. Didn't work on other games for some reason. Also, idk how to change them all at once, but you can try adding this to your CSS (should work on the game page, not on individual mod pages)

  Reveal hidden contents

    /*Fixed icon for FO4*/
    img.size-7.shrink-0.rounded-sm {
        background-image: url('https://images.nexusmods.com/images/games/4_3/tile_1151.jpg');
    }

If it won't work for you, no idea how to fix this, I'm not a web-designer. Maybe, someone else will.

Expand  

I'll give it a try tonight.  My windows 10 laptop with your css has blocked the new images, but my windows 11 let them through.  Thanks again!

[zloybelka]

Added some fixes

https://forums.nexusmods.com/topic/13511683-new-ui-accessibility-feedback/page/6/#findComment-130511465

Edited August 1 by zloybelka

[cthunsthrall]

Hi there, I have some accessibility suggestions.

 

There's a popup that has poor accessibility. After downloading any mod, or before downloading a mod that has requirements, a popup appears. It's accessible for keyboard users (Escape key), but pointing device users have to aim precisely for the X button in the top right corner.

 

I should mention the whole site is inaccessible, because divs are used to render so many things instead of semantic elements, and no ARIA roles are provided. This popup is styled like a modal dialog, but it is not a dialog element and does not have `role="dialog"`, which would tell screen readers what is happening. As it is, a user with visual difficulties would not know why their mouse and keyboard stopped working, because the screen reader doesn't recognize that a pseudo-dialog came up. Another issue is that keyboard focus does not automatically move into it (which is required for dialogs). Web accessibility is important and also required by law for public commercial websites. See for example Robles v. Domino’s, 2019.

 

But the general inaccessibility isn't the end of the world, and I know making the site fully accessible from scratch is a huge undertaking.

 

I'm more concerned about the repetitive papercut when downloading mods, given the huge number of times mods are downloaded. It's a repetitive, annoying task, either 1) aiming for the X button, or 2) switching from pointing device to keyboard (a heavy lift for users with use of only one hand, or even worse, users without use of their hands who need to rely on blinking, blowing air into a straw, pedals, etc.).

 

There's an easy fix for this, and WCAG guidelines recommend it for non-critical overlays. (This popup is styled like a modal overlay, but it's really not. Modal overlays should only be used for absolutely critical purposes.)

 

The solution is to make outside clicks dismiss the popup. If the user clicks in the dimmed area outside of the popup, it is hidden. This is second nature to many users, so it's frustrating when the popup doesn't work that way, and likely irritates users (making them less likely to use the site) even if they don't have a disability. This guideline can be found at the bottom of this page:

 

Dismiss automatically when moving on. Close the non-modal dialog if a mouse click is registered outside the dialog's boundaries or the keyboard focus moves beyond its contents.

 

Because the popup doesn't take focus, moving keyboard focus beyond the popup will have no effect. So ideally, that problem would also be fixed, by calling `.focus()` on the popup's first interactive descendant when it appears. But since Escape key to dismiss is implemented, that's a less critical issue than the difficulty of closing the popup with a pointing device. So I think handling outside clicks is the highest priority. That's easy to implement by hand, but many libraries and frameworks have popup components that implement this behavior for you. If you use something like that, look through the documentation, it probably already exists.

 

However, if you do want to implement proper keyboard handling, focusing the popup's first interactive descendant is possible by several methods. The simplest method, and really the ideal method, is to follow WCAG guidelines and replace the <div> with a <dialog>. The dialog element has the benefit of being a semantic element. So this would feed two birds with one scone. You give screen readers the information they need to announce that a popup has appeared, while simultaneously getting automatic focus handling. If the popup is a dialog, then you can call `popupElement.showModal()` to open it, and focus will automatically move to the first interactive descendant within the popup. If using a dialog element is not an option, and you must use a div, other methods include maintaining a list of focusable selectors (like `button:not(:disabled), a[href], input:not(:disabled), ...`) to search with querySelector; or using a TreeWalker with a NodeFilter that implements the same kind of list.

 

Thank you for your consideration!