任意の要素に対して、ブラウザデフォルトのフォーカスリングが描画されるように明示的に設定したいことがある。たとえばスタイリングの都合により、一度取り除いたフォーカスリングをふたたび適用したいとき。 フォーカスリングのスタイルは、ブラウザの種別や状況によってまちまちであるため、CSSでそれらしいものをエミュレートするのが難しい。そのため、同じものを呼び出せるような特別なやり方を採用できると望ましい。 一つの方法として、outline: revertを適用すればデフォルトの挙動を復元できる。 * { outline: 0; } button { outline: revert; } しかし場合によっては、通常はフォーカスリングが描画されない要素に対して、ブラウザのデフォルトと同じフォーカスリングが描画されるようにしたい、ということもあるだろう。この場合、outline: revertではフォーカ

2023年12月25日 著 私はGoogle アラートに「アクセシビリティ」とか「JIS X 8341-3」みたいな言葉を登録していて、Googleの検索対象にそれらを含んだコンテンツが新たに登録されるのをウォッチしているのですが、またしても改正障害者差別解消法に関して間違った解釈が掲載されているのを見つけてしまいました。あえて掲載元にリンクはしませんが、一部を引用します： 2021年の障害者差別解消法の改正により、2024年4月1日から民間事業者の合理的配慮が義務化されます。ウェブサイトの場合では「JIS X 8341-3:2016」という規格に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することが義務化されます。 最初の文は、何ら問題なく、正しい内容です。問題はそのあとで......改正法のどこをどう読めば、JIS規格に準拠したWebサイトを作ることが義務化されるというので

これは備忘録であり、閉じた空間で話したことをオープンにしたいと思って公開している記事です。文字起こしでありません。 経緯としては、僕がモーダルの不満をツイートしたのがキッカケで、情報設計の分野の大先輩の稲本さんに、とりあえず不満を聞いてもらいつつ、いっしょに意見を整理させてもらった。 定義 ここでいうモーダルは、「モーダルダイアログ」のことで、他の操作を受け付けない状態、つまり文字通りモード状態になるもの。基本的に全面に被さるダイアログが現れてその他の操作はそれをを閉じるまで不可能になるインターフェイスと定義する。 Webアプリはわかる、しかしWebサイトのそれはわからん まず前提として、Webアプリケーションにおけるモーダルの有用性や必要性は理解できている。そもそもGUIが誕生した初期から存在していて、WindowsやmacなどのOSでも要所々々で今でも採用されているインターフェイスだ。

こんにちは。TAK(@tak_dcxi)です。 今回は SNS で頻繁に話題になる「font-size の指定はpxとremどちらを使うべきか？」問題について。 自分が観測している限りだと、 font-size の指定は px と rem どちらを使うべきか？ Web デザイナーはコーディングの知識があったほうがいいか？ jQuery はオワコンなのか？ 実装者はピクセルパーフェクトに拘らないとダメか？ h1 タグはどこに使うべきか？ あたりは四半期に一度は話題になっている感覚がありますね。 おそらくこの記事を読んでいる方や、もしくはタイムラインにこの記事の Twitter カードなんかが流れてきてウンザリしている方も多いことでしょう。僕も正直「またこの話題か…」という感想ですが、頻繁に話題になるということはそれだけ意見が割れているということなので、自分なりの見解をまとめるためにもこの記事

UX Movementの著者および創設者です。UXのベストプラクティスとスタンダード、さまざまなテクニックに関する知識を共有することで、よりよいデジタルの世界をつくり出しています。 すべてのインターフェイスにはユーザーが存在し、そのユーザーはつねに多数派と少数派によって構成されています。たとえば、大半のユーザーは正常な視力をもっていますが、少数派となるユーザーは何らかの視覚障害をもっています。 正常な視力をもっているユーザーが見るものと、色覚異常および低視力のユーザーが見るものとの間には大きな隔たりがあります。何らかの視覚障害をもっているユーザーはテキストが小さすぎたり色のコントラストが低すぎると、文字がぼやけて見えたり、要素がよく見えなかったりする傾向にあります。 アクセシビリティの目標は、多くの場合忘れられがちな少数派のニーズを満たすことです。しかし、少数派のニーズを満たした結果、多数

聴覚障害当事者は、聴者とは違って、視覚への依存度が高い傾向があります。それにもかかわらず、聴覚障害当事者の「視覚」はどうなっているのかをとりあげた文献はあまりないのです。聴覚障害当事者といえば、聴覚に障害があるということで「聴覚」に関心が向けられがちです。それで、聴覚障害関係のテキストを見れば「聴覚」のことは載っていても「視覚」のことは載っていないのです。 そこで、ここでは、聴覚障害当事者の「視覚」に関心を向けて、聴者のそれとどのように違うのか見ていきたいと思います。おそらく両者とも視覚に障害がないのだから、同じなのでは？と思うでしょう。しかし一方で、日常生活や職場などの場面で、聴覚障害当事者は視覚が優れていると言われることがあるのも事実です。例えば、いつもと違う風景に何があるのかを見つけるのが得意とか、周辺で何か動いたときにすぐ反応できるとか。聴覚障害当事者が聴者より優れていることが研究

2020年2月21日 「一部準拠」というWebアクセシビリティの対応度の位置づけについて アクセシビリティ・エンジニア 中村（直） 筆者はウェブアクセシビリティ基盤委員会（WAIC）に参加させていただいているのですが、そのWAICのSlackで、あるコメントをきっかけに先日ちょっとした議論が沸き起こりました。 そのきっかけとなったコメントの概要は、次のようなものでした。 あるWebサイトでJIS X 8341-3:2016に基づく試験結果が公表されているのを見かけた。 試験結果には、達成基準ごとの試験結果が記載されている。 レベルAのある達成基準に対して、不適合という結果が記載されている。 レベルAの達成基準で不適合のものがあるため、当然レベルAには準拠しないが、そのサイトでは「満たしている適合レベル」として、「JIS X 8341-3:2016の適合レベルAAに一部準拠」と記載されている

こんにちは。 最近、今更ながらPodcastって面白いなぁーとワクワクしてます。 どうも、しばひろです。 ということで、Shibajukuでもポッドキャストを始めてみました。 Shiabajukuのサロンメンバーたちの会話を盗み聞きしてもらうというポッドキャスト「シバジュク酒場」です。 さて、今日は、色んなWebサイトでよく見かけるカード型コンポーネントについて書いてみたいと思います。 というのも、よく見かけるコンポーネントだからこそ、色んなマークアップ方法があると思うのですが、僕なりのマークアップ方法が誰かの参考になるかもしれないし、色んなコンポーネントのマークアップを考えるきっかけになるかもしれないので書いてみようと思いました。 カード型コンポーネントって何？ まず、カード型コンポーネントがどんなコンポーネントかっていうと、まるでカードのような縦型になっていて、一般的には、最初に画像が

WINTICKETでは誰もが公営競技を楽しむことができるよう「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第3部：ウェブコンテンツ」に対応することを目標とし、アクセシビリティの向上に取り組んでいます。 対象範囲WINTICKETサービス https://www.winticket.jp 以下 目標とするレベルJIS X 8341-3:2016のレベルAに準拠 本方針、また試験結果における「準拠」という表記は、情報通信アクセス協議会のウェブアクセシビリティ基盤委員会による 「ウェブコンテンツのJIS X 8341-3:2016対応度表記ガイドライン2016年3月版」で定められた表記によるものです。 追加する達成基準1.4.3 コントラスト（最低限レベル）の達成基準（AA）2.4.7 フォーカスの可視化の達成基準（AA）例外

本格Webサービス開発ならCAMP

この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの23日目の記事です。 私はWebページの検証やコンサルティングの業務を多々行っており、開発者とやり取りすることもあります。その際、開発者に「フォーカスを受け取れるように、要素のtabindex属性に-1を設定してください」と伝えると、高い確率で「tabindex属性に-1を設定するとフォーカスを受け取らなくなるのでは？」と返されます。実際のところ、tabindex="-1"はフォーカスを受け取ります。 なぜ、そのような認識の違いが起こるかというと、ある要素がフォーカスを受け取るかどうかや、受け取るかどうかを制御する方法が複雑なためだと考えています。この記事ではその複雑性と、複雑性がどう整理されようとしているかを述べます。 フォーカスを受け取る経路 Webページでは要素がフォーカスを受け取る経路は、ユーザーの利便性や歴史

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

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

アクセシビリティを⾼めるCSSDIST.30 Lightning Talk13 December 2019Yuko Morikawa, to-R Inc. 自己紹介トゥーアールの森川です。 私はWebの持つ無限の可能性に惹かれて、この業界で働いています。 ウェブアクセシビリティとは、誰もがどんな状況でもウェブにアクセスできるようにすること。これを知ったとき、私はウェブのアクセシビリティの高さに惹かれたんだと思いました。

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