Just use button — A11ycasts #05

Just use button — A11ycasts #05


Comments

  1. Post
    Author
    Theodoros Antoniou

    Buttons/inputs can also be wrapped in a label tag and activated that way. There is currently no way for a custom element to do that, other than extending a native element using the "is" syntax. But you can use a native control in shadow dom of your custom control and proxy disabled property (using getters/setters) and events to it. This allows your element to be keyboard accessible without a tabindex as well as activated by a label. Native controls ARE awesome, but it would be even awesomer, if custom elements could access to those behaviours as well.

  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
    Chris Ball

    I recently read (somewhere) that buttons have no semantic meaning outside of form elements. Are there any caveats/pitfalls to using them as demonstrated?

  5. Post
    Author
    Roberto Chiaveri

    Great video! The first rule of web components should be: if the existing HTML spec already has something similar, you probably don't need web components to do this.

  6. Post
    Author
  7. Post
    Author
    Abdón Rodríguez Davila

    Then… Why the <paper-button> isn't a <button>? 🙁

    https://github.com/PolymerElements/paper-button/blob/master/paper-button.html#L145

  8. Post
    Author
    Bilal Kazi

    what about links that look like buttons, I know it's just a visual change semantically still a link but should we use anchor tags or buttons for something that's a primary CTA and changes location? I've seen <button><a>click me</a></button> solutions too so there's some confusion although gut feeling is use an anchor

  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
    Robert Lamacraft

    I think it's also worth discussing the visual difference of a button (some action is performed on the current page such as submitting a form, or opening a panel) and a link that directs the browser to a different page. I see this conflated very often, especially with the dreaded href="#", and it really breaks the intuitive navigation of the Web. A good check I always use is, is it okay if the user tries to attempt to open this in a new window, if so then always a tag (with differentiating color and underline) otherwise button styled like that in the video.

  13. Post
    Author
  14. Post
    Author
  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
  18. Post
    Author
    Quay Hoffman

    It should be noted that certain browsers (like on iOS) have very stylized default button styles. So if you don't fully define every style attribute of your custom button you can wind up with a very bad looking mix of your custom style and the browser's native style.

  19. Post
    Author
    Jörg Walossek

    Because you always have the stress of typing type="button" if you're inside a form element to not send the form ^^.
    And how about it's bad syntax if you have inner block elements ?
    But yes – i do use buttons.

  20. Post
    Author
  21. Post
    Author
  22. Post
    Author
  23. Post
    Author
  24. Post
    Author
  25. Post
    Author
  26. Post
    Author
  27. Post
    Author
  28. Post
    Author
  29. Post
    Author
    THONGVANH MR Vaj

    yog kwv tijphooj ywg tsis pab kuv ces kuv yuav tsis tau vim kuv yog ib tug sij hawmdhau lawm kawm kuj qhov hmuag tsi pom kev zoo lawm nqe ob .niaj hnub no ib tug neeg tsi ncaj tiag2 nws yuav rhiav tswv yim kau noj vim kuv tsi paub nws nyob qhov twg kuv yog ib tug tsis txawj ntse vimlos ua ntej caij nyoog. peb nyob qab ntuj khwb yog zoo mus nyog lo nyog Raw li teb li chaw kuj yog zoo heev li. tsi muaj neeglo lus mos muaj tiag lo lus mo lus tuaj pos thiab si ua neeg yuav tsum nco tswj yus siab muaj ob lub ib lub phem iblub zoo .yog txawjsiv nws muaj nqe ib yam li dej taws . lam piv me mevim peb yog lub ntuj daim av tsim tawm lo muaj caij nyoob thaum rov yeej them av niam nqe thiaj dau mus lwm tiam..ua neeg tsi ua liaj ua teb noj dab tsi .lo lus yooj yim qhiakom ua ib yam xwb thiaj ua tau zoo.tus twg ntsia lub ntuj tsi rau nqe tus no tsi vam meej ob lub siab siv ua ke tes laus qhia tsi tau lo yuav yog ntuj lo nag hluav taws tuag yog rauv tawskub lawmyuav tseg hna thiaj tau noj. ua tsaug.

  30. Post
    Author
    Dzintars Klavins

    Thank you for this "HTML Elements Anathomy" series. It is really interesting and educational! Would be happy to see more.

  31. Post
    Author
  32. Post
    Author
  33. Post
    Author
    TFlies

    I wish I found this gem earlier… got shot down in an interview with accessibility questions. But now I learnt this and I just got better than what I was yesterday.

  34. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *