Opened 3 months ago

Closed 2 months ago

#35795 closed Cleanup/optimization (fixed)

Correct semantics of links acting as buttons

Reported by: Alena Volkova Owned by: Jay Patel
Component: contrib.admin Version: dev
Severity: Normal Keywords: Accessibility, WCAG
Cc: Alena Volkova Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: yes

Description

Current: link tags. Semantically incorrect.

"In HTML, links and buttons are different elements, which serve different purposes:

Links take the user to a new location, such as a new web page or new section of the current page.
Buttons trigger some action, such as showing content on the page that was previously hidden, playing a video, or submitting a form.

This distinction matters because it affects user expectations. If a screen reader announces an element as a “link” or “button,” users have expectations about what will happen when they click that element. If something else happens, this can be disorienting."

​https://www.washington.edu/accesstech/websites/links-buttons/

Attachments (1)

Screenshot 2024-09-26 at 13.28.14.png​ (130.7 KB ) - added by Alena Volkova 3 months ago.

Download all attachments as: .zip

Change History (15)

by Alena Volkova, 3 months ago

Attachment: Screenshot 2024-09-26 at 13.28.14.png​ added

comment:1 by Sarah Boyce, 3 months ago

Triage Stage: Unreviewed → Accepted

Thank you Alena, I think adding role="button" should work

comment:2 by Alena Volkova, 3 months ago

Type: Bug → Cleanup/optimization
Version: 5.0 → dev

comment:3 by Jay Patel, 2 months ago

Owner: changed from Alena Volkova to Jay Patel

comment:4 by Jay Patel, 2 months ago

Has patch: set

comment:5 by Jay Patel, 2 months ago

Triage Stage: Accepted → Ready for checkin

comment:6 by Simon Charette, 2 months ago

Triage Stage: Ready for checkin → Accepted

Please don't mark your own patch as ready for checkin

in reply to:  6 comment:7 by Jay Patel, 2 months ago

Oh my bad, new contributor here. Replying to Simon Charette:

Please don't mark your own patch as ready for checkin

comment:8 by Sarah Boyce, 2 months ago

Patch needs improvement: set

comment:9 by Jay Patel, 2 months ago

Patch needs improvement: unset

comment:10 by Natalia Bidart, 2 months ago

Patch needs improvement: set

I've reviewed the PR. Except for the two entries in django/contrib/admin/templates/admin/actions.html (which currently have a href="#"), all the other (currently modified) links are truly a link:

  • Delete link in django/contrib/admin/templates/admin/submit_line.html takes the user to a confirmation page
  • Reset password link in django/contrib/auth/templates/auth/widgets/read_only_password_hash.html takes the user to a reset password page

I don't think we should be changing the links for Delete and Reset Password to have role="button" since they do not submit any form nor perform any action on their own. They truly take the user to another page.

Last edited 2 months ago by Natalia Bidart (previous) (diff)

comment:11 by Jay Patel, 2 months ago

Patch needs improvement: unset

comment:12 by Sarah Boyce, 2 months ago

Summary: Admin forms: "Delete" button should be a button → Correct semantics of links acting as buttons

comment:13 by Sarah Boyce, 2 months ago

Triage Stage: Accepted → Ready for checkin

comment:14 by Sarah Boyce <42296566+sarahboyce@…>, 2 months ago

Resolution: → fixed
Status: assigned → closed

In 8b1a3a56:

Fixed #35795 -- Added role="button" to links acting as buttons for screen readers.

Note: See TracTickets for help on using tickets.
Back to Top