ブックマーク / zenn.dev/yusukehirao (3)

  • WAI-ARIAを学ぶときに整理しておきたいこと

    結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ!すげえ!使ってみよう!」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の

    WAI-ARIAを学ぶときに整理しておきたいこと
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/01/21
    <div> みたいな generic ロールに対してアクセシブルネーム振れないの初めて知った。まぁそもそもアクセシビリティ気にする人が <div> <span> でみだりにマークアップすることはないだろうけど。
  • 【仕様の読み方】HTMLの要素をどうやって学ぶか

    <search>要素がHTML Standardに追加されました。私も初めて出会う要素になるわけですが、とても良い機会なので、私が要素を調べる際にどうやって調べて学んでいるのかを共有したいと思います。これは新しい要素に限らず、既存の要素の調査に応用できると思います。また、初学者はもちろん、マークアップを生業としている方にも参考になると思います。 新要素追加の経緯を調べる まずはHTML StandardのGitHubのPRからスタートするとよいでしょう。議論や更新はGitHubで行われています。たとえば、今回の<search>はAdd the <search> element #7320というPRによって更新されました。 そもそも更新自体のキャッチアップ方法はクローズされたPRを更新順にして確認してもいいですし、更新のみをツイートしている@htmlstandardのTLを確認してもいいと思

    【仕様の読み方】HTMLの要素をどうやって学ぶか
    shingo-sasaki-0529
    shingo-sasaki-0529 2023/03/27
    こういうレベルの学習を経ないとフロントエンジニアとして一段回上がれないという気持ちはある一方、これを知っていて実務がどうかわってくるかの想像もあんまりできない。
  • Popover API - JavaScript不要、HTMLのみでポップオーバーUI

    HTML Standardにpopover属性をはじめとしたPopover APIが正式にマージされました。Open UIによって提案されていた[1]APIで、名前がPopoverなのかPopupなのか紆余曲折の末、やっとHTML Standardとなります。 現段階で実装されているブラウザは少ないですが、簡易サンプルを作ったので体験しながら読んでいただくといいかもしれません。

    Popover API - JavaScript不要、HTMLのみでポップオーバーUI
    shingo-sasaki-0529
    shingo-sasaki-0529 2023/02/19
    グローバルユニークである id を使用するのが前提なAPIって、コンポーネント指向との相性悪くない?っていつも思う。
  • 1