How to create an accessible 2-state switch?

There are many ways to create an accessible 2-state switch.(looks like a buton,click to change state)

A "switch": created by checkbox inclusive-considerations-when-restyling-form-controls

<input type="checkbox" role="switch" checked/>

A "toggle button" created by checkbox

<input type="checkbox" role="button" aria-pressed="true"/>

A "switch": created by button ant design

<button role="switch" aria-checked="true"></button>

A "switch" created by radio Switch Component: Radio Buttons

There are the following advantages and disadvantages:

• switch component looked more like button than checkbox
• values in checkboxs always be transfered to Array data
• button always be used to control action, not a data container
• ChromeVox can't read switch role.
• checkbox's :checked state can be controled with css
• No need to script aria if use checkbox's attribute checked
• Radio's keys are ↑↓←→, checkbox's keys are space|return|enter

So which is the best?

Further more, how to create a accessible 3-state(or more) switch?

https://www.w3.org/TR/wai-aria-1.1/#switch

https://www.w3.org/TR/wai-aria-1.1/#button

difference between toggle button and switch