- From: Léonie Watson <lwatson@tetralogical.com>
- Date: Thu, 20 Feb 2020 09:41:16 +0000
- To: Marc Haunschild <haunschild@mhis.onmicrosoft.de>, ashraf aleem <ashraf.aleem@gmail.com>
- CC: WAI Interest Group <w3c-wai-ig@w3.org>
Mark, Ashraf is using a button element but extending it to become a customised toggle button. There is no native equivalent of a toggle button so ARIA is needed to provide the additional semantics. Léonie. On 20/02/2020 07:04, Marc Haunschild wrote: > Hi Ashraf, > > my comment makes only sense, if you’re looking for a real world > component to use in an actual website or web app. > > If you’re “just” learning how to build a custom element, go for it! > > Anyway you should read the article as it covers the question of what to > write on a toggle button. ;-) > > -- > Mit freundlichen Grüßen > > Marc Haunschild > www.mhis.de > >> Am 20.02.2020 um 06:50 schrieb Marc Haunschild >> <haunschild@mhis.onmicrosoft.de>: >> >> Hi Ashraf, >> >> I don’t know the example - but the first rule of aria is, not to use >> it, if not necessary. >> >> Of course a toggle button always needs aria, but not for telling it is >> a button, if you use the button element. So that’s the first thing you >> should change. >> >> And then: if you already know, that your solution doesn’t work for >> some users, why you don’t change it? >> >> I’d recommend you to have a look at Heydon Pickerings inclusive >> components. >> >> https://inclusive-components.design/ >> >> One of the first examples is a toggle button. >> >> https://inclusive-components.design/toggle-button/ >> >> I’m using safari, so that’s all I can say about your approach... >> >> -- >> Mit freundlichen Grüßen >> >> Marc Haunschild >> www.mhis.de >> >>> Am 20.02.2020 um 00:51 schrieb ashraf aleem <ashraf.aleem@gmail.com>: >>> >>> >>> Hi All, >>> I am trying to use a Custom Element based on the 1st example >>> in the following article by Leonie Watson: >>> https://www.24a11y.com/2019/web-components-and-the-aom/ >>> >>> Only difference being i want also change/toggle text too i.e. Play >>> <-> Pause as the state changes >>> >>> Please find the all 3 variants i intend to use it in: >>> >>> https://codepen.io/ahnafcodes/pen/mdJrPOd >>> >>> Please let me know let me know if I am violating any thing. >>> >>> *Note: *This will not work in Safari or IE11. I plan to use a >>> https://github.com/WebReflection/heresy to make it work in Safari and >>> make it simpler >>> >>> Thanks >>> Ashraf Mohammad >>> -- Director @TetraLogical
Received on Thursday, 20 February 2020 09:41:31 UTC