Opened 14 months ago

Closed 13 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 14 months ago.

Download all attachments as: .zip

Change History (15)

by Alena Volkova, 14 months ago

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

comment:1 by Sarah Boyce, 14 months ago

Triage Stage: Unreviewed → Accepted

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

comment:2 by Alena Volkova, 14 months ago

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

comment:3 by Jay Patel, 13 months ago

Owner: changed from Alena Volkova to Jay Patel

comment:4 by Jay Patel, 13 months ago

Has patch: set

comment:5 by Jay Patel, 13 months ago

Triage Stage: Accepted → Ready for checkin

comment:6 by Simon Charette, 13 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, 13 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, 13 months ago

Patch needs improvement: set

comment:9 by Jay Patel, 13 months ago

Patch needs improvement: unset

comment:10 by Natalia Bidart, 13 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 13 months ago by Natalia Bidart (previous) (diff)

comment:11 by Jay Patel, 13 months ago

Patch needs improvement: unset

comment:12 by Sarah Boyce, 13 months ago

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

comment:13 by Sarah Boyce, 13 months ago

Triage Stage: Accepted → Ready for checkin

comment:14 by Sarah Boyce <42296566+sarahboyce@…>, 13 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