Make EO more "screen-reader-friendly"

lat9 / edit_orders

Edit Orders: Updates for continued operation on Zen Cart v1.5.8 and later

GNU General Public License v2.0

5 stars 9 forks source link

Make EO more "screen-reader-friendly" #195

Closed jage9 closed 3 years ago

jage9 commented 3 years ago

This code, which appears on the main order list page, is using an aria-hidden="true" property. This hides the title of "Edit this Order" from screen reader users.

I.E.

Is aria-hidden used for another reason in this situation?

Proposed fix:

Remove aria-hidden="true" from this line. I tested in the latest Chrome, and the Edit this Order text is properly exposed.

lat9 commented 3 years ago

@jage9, I'm not seeing that aria-hidden property on that edit order button. Are you using the files currently present in this repository?

Never mind, I found that buried in EO's language file. I'm guessing that I should that property from all the buttons that it's currently applied to:

The "Edit this Order" button on the orders' listing page.
The navigation-link buttons at the top of the EO order-display page.

jage9 commented 3 years ago

Yes, exactly it. And I didn't even realize there were nav buttons on the top, so glad those got fixed as well.

jage9 commented 3 years ago

Can create separate issues for specific topics, , but a few things I notice and want to seek some guidance on:

Many admin pages now use a standard heading style for the top of their page. Is it OK to adopt this here? This would give us an H1 heading at the top of the page.
The button to jump to Edit Orders which is inserted at the bottom of the order details page has a different label, "edit" from the one in the order table "edit this order". Visually, do these look different?
The products table would benefit from the same role=presentation as the address tables have now.

It may be good to close this issue and add an accessibility or screen reader tag, so everything doesn't get bunched up together.

lat9 commented 3 years ago

Tag added (great idea). I'd prefer to keep this issue open until the 4.6.0 release since it's got code staged for it.

For the other observations, they all sound like a good idea.

The "Edit" icon on the order's listing is visually different from the "Edit" button at the bottom of the order-details display, since it's an icon rather than a button.