search

elementary / website

The elementary.io website
https://elementary.io
MIT License
1.24k stars 708 forks source link

Activating the Download button pops up options at the bottom of the page, but nothing is communicated to the screen reader about this #3378

Open devinprater opened 11 months ago

devinprater commented 11 months ago

What Happened?

When I go to https://elementary.io/ and press Enter on the download button, nothing seem to happen. My screen reader doesn't say anything. When I navigate to the end of the page, though, there is a download link, and an empty link which I guess opens a magnet to the ISO torrent. There is no text in that link, though.

Thanks so much for all the accessibility improvements, and I hope this helps for when blind users come to download the OS.

Steps to Reproduce

  1. I went to https://elementary.io/
  2. I pressed Tab until reaching the download button
  3. I pressed Enter on the download button.

Expected Behavior

I expected the download to start automatically. Failing that, I expected there to be a dialog open, maybe using the modal dialog element. Failing that, I expected my screen reader to be placed at the start of the popup, where it talks about using HTTP or a torrent to download Elementary.

OS Version

7.x (Horus)

Software Version

Latest release (I have run all updates)

Log Output

No response

Hardware Info

Screen reader: NVDA 2023.3 Operating System, Windows 11 Version 22H2 (OS Build 22621.2361) System Model HP Pavilion Laptop 15-eh1xxx System Type x64-based PC System SKU 4J8D6UA#ABA Processor AMD Ryzen 5 5500U with Radeon Graphics, 2100 Mhz, 6 Core(s), 12 Logical Processor(s) BIOS Version/Date AMI F.26, 7/4/2023 SMBIOS Version 3.3 Embedded Controller Version 78.60 BIOS Mode UEFI BaseBoard Manufacturer HP BaseBoard Product 88D0 BaseBoard Version 78.60 Platform Role Mobile Secure Boot State Off

NickColley commented 1 month ago

Hello @devinprater !

Do you remember if you opted to donate or did you select a zero donation to make the download free?

When I press a donation it redirects me to Stripe, which would be announced on a screen reader but when selecting no donation a model does indeed appear - which could be consistent with what you're describing.

NickColley commented 1 month ago

What I notice that this modal that appears does not trap keyboard focus, it only appears visually. For visual users, try these steps:

  1. Enter zero as a donation amount
  2. Click on download elementary OS
  3. Press tab

You'll notice rather than being focused in the modal itself, you are tabbing behind the modal. This is a big issue and is likely why Devin has ran into this, the modal is never focused it only shows visually.

Choose a Download modal where focus is left behind in the input before the modal

Potential solution would be to focus the modal itself and have the "Choose a download" heading be announced, then you'd want to trap the focus inside the modal. You can use something like https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert for that. Though it might be better to just adopt the HTML modal element as suggested by Devin.

So I think given I'm fairly confident that this is what's causing the barrier, the next step would be to review the modal functionality and ensure it meets the behaviours described in Dialog (Modal) Pattern.

NickColley commented 1 month ago

I have put together a pull request that I hope resolves this issue, I have tested it cross browser and in NVDA and it seems like it's now announcing properly and will make sense what's going on.

https://github.com/elementary/website/pull/3593