Comments on: Safari Gets a Toggle Switch Input https://frontendmasters.com/blog/safari-gets-a-toggle-switch-input/ Helping Your Journey to Senior Developer Thu, 07 Mar 2024 23:48:06 +0000 hourly 1 https://wordpress.org/?v=6.5.2 By: Chris Coyier https://frontendmasters.com/blog/safari-gets-a-toggle-switch-input/#comment-1404 Thu, 07 Mar 2024 23:48:06 +0000 https://frontendmasters.com/blog/?p=1118#comment-1404 In reply to Curtis Wilcox.

Thanks Curtis! Fixed where appropriate.

]]> By: Curtis Wilcox https://frontendmasters.com/blog/safari-gets-a-toggle-switch-input/#comment-1396 Thu, 07 Mar 2024 18:17:04 +0000 https://frontendmasters.com/blog/?p=1118#comment-1396 aria-role=”checkbox” to aria-role=”switch”

This is a typo, the attribute name is just role, not aria-role; the correct one is used further down.

Using would ensure the switch role would be conveyed to screen readers with all browsers, not just ones that support switch. Changing the appearance of the input to look like a switch would still be necessary.

]]> By: Chris Coyier https://frontendmasters.com/blog/safari-gets-a-toggle-switch-input/#comment-1373 Wed, 06 Mar 2024 21:35:07 +0000 https://frontendmasters.com/blog/?p=1118#comment-1373 Safari’s demo page:
https://webkit.org/demos/html-switch/

To see it working right now as I write… I had to use Safari Technology Preview updated to 17.4, then go to Feature Flags (after turning on Web Developer features) and turn on two feature flags:

  1. “HTML Switch Control”
  2. “::thumb and ::track pseudo-elements”
]]>