タグ

2019年12月18日のブックマーク (4件)

  • WAI-ARIA presentation(none) ロールの仕様、aria-hidden=”true” との違い - WILLGATE TECH BLOG

    こんにちは、開発ディレクターの横内です、腹筋してください。社内でほそぼそとアクセシビリティの布教活動に勤しんでいます。ウィルゲート Advent Calendar 2019 の 16 日、始まります。 presentation ロールは ARIA で定義されているロールの一つです。要素のロールへ presentation ロールを指定することで、要素がもつネイティブセマンティクスロールを上書きして、特にセマンティクスを持たない要素としてブラウザや支援技術から扱われるようにできます。 元々筆者は presentation ロールについてなんとなくの理解はしておりました。ただ、aria-hidden ステートを利用しても同じようなことを実現できる気がしていたため、「どちらを使えばよいのだろう?」という疑問がありました。presentation ロールへの正しい理解なしにはその疑問は晴れないでし

    WAI-ARIA presentation(none) ロールの仕様、aria-hidden=”true” との違い - WILLGATE TECH BLOG
  • 「UIデザイナーのスキルマップ」にアクセシビリティスキルを入れた話 - Chatwork Creator's Note

    こんにちは。プロダクトデザイン部マネージャーの @cw-take です。 今年Chatworkのプロダクトデザイン部で「UIデザイナーのスキルマップ」をつくりました。 この記事では簡単なスキルマップの説明をした上で、アクセシビリティスキルを掘り下げて紹介したいと思います。 UIデザイナーのスキルマップ スキルマップ作成の背景 新しいデザイナーの入社をきっかけに、今年プロダクトデザイン部では価値観の相互理解などお互いを知るための取り組みをおこなってきました。 「UIデザイナーのスキルマップ」をつくったのもこういった取り組みのひとつです。 スキルマップを使いUIデザイナーそれぞれが持つ強みを可視化し共有することで、 伸ばしたいスキルについてお互いが支援できる環境 をつくりたいと考えました。 スキルマップの12項目 スキルマップの項目は「プロダクトデザイナーのスキルマップを考えてみた : cou

    「UIデザイナーのスキルマップ」にアクセシビリティスキルを入れた話 - Chatwork Creator's Note
  • レイアウトプリミティブ

    DIST.30 「一歩差がつくCSSテクニック」にてライトニングトークをさせていただく機会がありました。この記事はそこでお話しした内容をもとに書き起こしたものです。 私が業務で携わるのはおもに、メディアサイトやコーポレートサイトのようなページ数がたくさんあるサイトの制作です。そのようなサイトでは特に、ページのテンプレートやコンポーネントをいかに堅牢な設計にできるかが重要だと感じます。 連想されるトピックとしては「CSS設計」がありますが、私見としては、CSS設計はセレクタの書き方やコンポーネントの整理の方法について述べたものであって、いかにしてレイアウトを組み立てるかという議論にはあまり踏み込んでいません。 具体的には、どのように宣言を組み合わせるか、どのようにレスポンシブにするかのような曖昧な領域については、実装において必ず意識される部分であるにも関わらず言及される場面は少ないのではない

    レイアウトプリミティブ
  • 議論が噛み合わないと思ったら、「問題解決の5階層」でどこがずれているのか確認する - little hands' lab

    チームで議論するときに常に心がけているのが、「問題解決の5階層」です。 この図で重要なことは、 下の階層で認識が一致していないと、上の階層では絶対認識があわない ということです。 「あれ、議論が噛み合っていないな?」と思ったら、この階層に照らし合わせて認識があっていないことがないか確認しましょう。 問題認識のすれ違い 例えばこのように問題の認識の違いがあったとします。 なぜ違いが生まれたのでしょうか? コードの保守性に関する経験や、スキルの違い?と考えてしまうかもしれません。 でも実際は、こうでした この話題に出てきたときの、認識していたコードが違うものだったのです。 このような場合、事象の認識を合わせて初めて、問題の認識を合わせることができます。 このようなケースは非常に多いです。 普段一緒の空間で仕事をしていても、個人作業をしている時間は多いほど、人によって見えているもの、体験したこと

    議論が噛み合わないと思ったら、「問題解決の5階層」でどこがずれているのか確認する - little hands' lab