Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは2024-12-16 Open UI Community Groupで、仕様の策定が検討されているProposalの一つに、Link Area Delegationがあります。 本エントリでは、Link Area Delegationの仕様がどのような背景から検討され、何が可能となり、これから私たちがどのように利用していけるのかを紹介します。 Link Area Delegationとは Link Area Delegation（= リンク領域の委譲）Proposal は、コンテナがインタラクティブな領域を特定の要素に委譲することで、コンテナを「クリッカブル」にする機能を標準的に導入しようとする試みです。 例えば、提案されている手法のひとつである、linkar

ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目 普通にフォームをマークアップすれば Enter キーで送信できるようになるんですが、なんかそうなってない場合があります。しときましょう。 デモ： https://codepen.io/ginpei/pen/MYgjgXP <form> で括る Enter キーで送れるようにするには、単に <form> 要素で括るだけです。簡単です。やらない理由がない。 JavaScript からは submit イベントを使う ボタンのクリックではなくフォーム送信 submit のイベントを使います。ボタンはイベント管理する必要ありません。 JS で全部管理する場合は HTML レベルでの送信を event.preventDefault() で止めます。 逆に送信しないボタンは type="button" にする フォーム内の

リンク universal-manners.jp ユニバーサルマナー検定 ユニバーサルマナー検定とは？ ユニバーサルマナーの実践に必要な「マインド」と「アクション」を学び、身につけるための検定です。 高齢者や障害者、ベビーカー利用者、外国人など、多様な方々を街で見かける現代。私たちにとって、“自分とは違う誰かの視点に立ち行動すること”は、特別な対応ではなく、「こころづかい」の一つです。 11 users 1474

In the spirit of “everything old is new again,” browsers are once again supporting the ability to style the scrollbar. Much like custom CSS mouse cursors, I feel this is also a mistake. When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this: The scope of concern for the browser is this: The browser’s UI is infor

デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま

公開日 : 2022年2月17日 カテゴリー : アクセシビリティ マウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書 達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解

サイボウズ デザイン&リサーチ の西藤（さいとう）です。 私は、Poca11y（ポカリ）というチームで、全盲やロービジョンの方と一緒に、プログラミングをはじめいろんな活動をしています。 Poca11y（ポカリ）チームとは サイボウズ デザイン&リサーチの中にあるチームの1つで、「アクセシビリティ（A11y）」や「研究開発（PoC）」に関する活動を専門的に行うチームです。 （PoC + A11y  = Poca11y = ポカリ）というネーミングですこの記事は、一緒にプログラミングをする中で、気づいたことをまとめてみました。 「視覚障害のある方と一緒にプログラミングをする」と言われたら、あなたはどのようなことを考えますか？私は、こんなことを考えていました。 『専用エディタを用意しないといけない？』 『自分が書いている内容を全部読み上げないと伝わらない？』 実際働いてみると、この考えていたこと

公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入

この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

はじめに タイトルにもある通り、最近 Web アクセシビリティ (以下アクセシビリティ) の検証ツールを作っています。この記事では作るにあたったモチベーションや、現時点での機能、今後の展望についてまとめます。 モチベーション アクセシビリティを評価しようとすると Lighthouse にも付随する axe のようなツールを用いることが多いと思います。axe は WCAG 2.0 や WCAG 2.1 に則った数多くのルールを持ち、アクセシビリティに関する問題発見を支援してくれます。Lighthouse 以外では、axe をモジュールとして使えることはもちろん、Chrome の Extension などからも実行可能で、ユースケースに合わせた柔軟な利用ができます。 ただ、検証精度はどうかというと少し物足りなさを感じる部分があります。例えば以下のような例です。 <div role="butto

FRONTEND CONFERENCE 2019 での発表資料です。 https://2019.kfug.jp/session/jimboyoshihide 当日の質疑応答の内容はブログにまとめています。 https://jmblog.jp/posts/2019-11-03/frontend-…

はじめに 前から気になっていたWAI-ARIA（ウェイアリア）。 HTML5 Conference 2018に参加して、WAI-ARIAをマークアップ以外の視点から掘ってみたいと思ったので記事を書いてみようと思いました。 基本的内容からつらつら書いてみています。大まかな流れが頭の中に入りやすいように、細かい専門用語は控え目にしてみています。 WAI-ARIAってなんですか？ アクセシビリティ関連の技術 セマンティクスを補強する ⇒ WAI-ARIAはHTMLタグだけでは表現できない。セマンティクスを補強してくれる。 WAI-ARIAが気になってた理由 状態を表す属性とかあって、js, cssのセレクタとして利用できたら便利！ [is-selected]クラスを付与するより[aria-selected]属性を付与して状態を表現できたほうがコードが読みやすそう。 →やってみたーい！ が引き金

いらすとやのイラストのこだわりを軽視したらダメ。 いらすとやの素材は反転して使用しても違和感が無いように人物素材に服のボタンやポケットが書かれていない。色々な髪型の、色々な服装の、複数の人物が存在する。種類の豊富さもすごい。 誰にでも親しまれるイラストを書くことの難しさよ。 — 理央 🎊ゆかりっくフェス10/6参戦 (@Rio_M) October 27, 2018 実際に反転してみると、たしかに違和感がない！ ではそんなにこだわっているのなら、色の方はどうなのかな？と思ったわけです。 色覚を変えて見てみる 使った素材はこの３つ。３つめは半分趣味です。 できれば、いつも色覚を変換するときは、TOYO INKの『UDing®』を使うのですが、マシンを新しくしたら使えなくなってしまい…。 P型とD型だけですが、フォトショップの『色の校正』機能で変換しました。 ラーメンを食べる男 麺の部分と洋

英語圏のウェブアクセシビリティ コミュニティで語られる「インクルーシブデザイン (inclusive design)」について 公開日 : 2017年7月20日 (2021年2月3日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 最近、英語圏のウェブアクセシビリティ コミュニティで「インクルーシブデザイン (inclusive design)」という言葉がよく使われているように思います。「インクルーシブデザイン」自体は新しい概念ではなく、特別なコンテキストを抱えた人々 (障害者や高齢者など) をユーザー中心設計 (UCD) の上流工程から巻き込んで「ユニバーサルな」プロダクトやサービスを作り上げてゆくというデザイン手法です。ウェブサイトの設計/開発で言うと2014年に出版された「A Web for Everyone: Designing Accessible User Ex

公開日 : 2017年8月2日 カテゴリー : アクセシビリティ ウェブコンテンツは、障害などの事情で精緻なマウス操作ができない人 (キーボード操作に依存せざるを得ないユーザー) でも利用可能でなければなりません。たとえば、[Tab] キーでフォーカスを移動し [Enter] キーで実行する、上下矢印キーでページをスクロールしたりセレクトメニューを選択する、といった具合です。 このキーボード操作によるインタラクションは、画面を目にしたユーザーの期待 (予測) と合致している必要があります。システムの UI が、ユーザーにとって想定外なフィードバックを返してしまうと (あるいは十分なフィードバックをユーザーに返さないと)、ユーザーはコントロールを失ったような感覚になり、安心してウェブコンテンツを利用することができなくなります。 昨今は、リッチな (動きの演出の凝った) ウェブページが増えてき

コマンドラインで標準入力をフィルタリングできる peco というソフトウェアがあり僕も開発メンバとして参加させて貰っているのですが、これに興味を持ってくれたとあるユーザから issue が来た。 Textual examples · Issue #349 · peco/peco · GitHub Hello. I use screen readers to interact with the computer, such applications speaks for me what you ... https://github.com/peco/peco/issues/349 こんにちわ。 readme でテキストによる例もしくは画像キャプチャの代替テキストを用意してくれませんか？私は盲目で画像を見ることができない。 僕らはこれまで当然の様に、Markdown で画像を貼る時に ![](

This article was peer reviewed by Mallory van Achterberg. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! In a previous article I demonstrated how to create a multiselect web component. In the comments section of that article, readers touched on the very important subject of web component accessibility. Undoubtedly, for today’s web it’s vital to be acce

公開日 : 2016年4月1日 (2023年7月19日 更新) カテゴリー : アクセシビリティ 国連の「障害者の権利に関する条約 (Convention on the Rights of Persons with Disabilities)」の批准に伴う国内法制度の整備の一環として、2016年4月1日より、「障害を理由とする差別の解消の推進に関する法律」(いわゆる「障害者差別解消法」) が施行されます。 法律全文、基本方針、その他関連資料については、内閣府ウェブサイトの「障害を理由とする差別の解消の推進」ページから参照することができます。 この法律は、行政機関のみならず、民間の事業者も対象となります (障害者差別を防ぐための「合理的配慮」が求められます)。また、合理的配慮の基礎のひとつとして「情報アクセシビリティ」が明記されており、このサイトのテーマのひとつであるウェブアクセシビリティも

みなさん、マークアップ好きですか？　私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね！ ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな？」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか？　と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。 この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまと