kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ
こんにちは、 id:hogashi です。 masawada Advent Calendar 2022 - Adventar の 2日目です。 目次 目次 OTP 入力フォーム まずベストプラクティスを見る それでは本題です ちなみに ちなみに2 むすび OTP 入力フォーム なぜか id:masawada さんとたまにワンタイムパスワード (OTP) の話をする印象があります。偶然生成された「ホホンドホド」という文字列*1が TOTP で出そうな見た目じゃん、とか。 最近もまた微妙に使いづらい入力フォームに出会いました。そこで、世に存在するベストプラクティスとそれに沿わないフォームを見て、ベストたる所以をなんとなく感じてみる回をお送りします。結果的に GitHub がなんかむずい感じになっているという記事になりましたが、もちろん各サービスそれぞれ良いと思ってやっているはずなのであくまで個
アクセシビリティとオープンデータについて
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに この記事では以下のアクセシビリティ要件を満たすモーダルを実装します。 モーダル要素に role 属性、aria-modal 属性、aria-labelledby 属性、aria-describedby 属性が付与されている モーダルを開くと、モーダル内の最初の focusable な要素に自動でフォーカスされる モーダルが開いている間、モーダル以外の要素に aria-hidden 属性が付与される モーダルが開いている間、モーダル以外の要素のスクロールが無効化される モーダルが開いている間、モーダル内でフォーカスがトラップされる Esc キーを押下すると、モーダルが閉じる モーダルの外側をクリックすると、モーダルが閉じる モーダルを閉じると、モーダルが開く前にフォーカスされていた要素にフォーカスが戻る
2月27日、東洋経済オンラインにて新型コロナウイルス感染症（COVID-19）のデータを一覧できる特設ページ「新型コロナウイルス 国内感染の状況」を公開しました。 ありがたいことに「わかりやすい」「毎日見ている」という反応を多数の方からいただいています。2年ほど前から東洋経済オンラインでデータビジュアライゼーション（データ可視化）作品を発表していますが、今回はちょっと驚くほどの反響がありました。 日々のデータ更新、改修やデータ追加などの要望対応、問い合わせや取材依頼など、いまだに落ち着いたとは言えない状況ですが、合間合間に書きためた技術やデザインの趣旨を忘れないうちに記録しておきます。制作メモのようなものとお考えください。 最もストレートな読者対象は「マスに向けてデータビジュアライゼーション作品を公開している個人」となりますが、あまり該当者は多くないと思いますので、たとえば社内向けのダッシ
もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン
React Spectrum Libraries A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. GitHub React SpectrumA React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications. Explore React Spectrum React AriaA library of unstyled React components and hooks that helps yo
はじめに 今やあらゆるサイトで使用されているハンバーガーメニュー。 私たちウェブサイト系のエンジニアは数え切れないくらい実装してきている定番パーツです。 しかしながらその実装は容易ではありません。自分の作り方に自信を持てていない方も少なくないのではないでしょうか。 ただ単にそれっぽく動くものを作るのであれば簡単ですが、アクセシビリティやメニュー展開時の他の箇所の挙動など、不具合がないように徹底的に作り込もうとするとなかなか難しいものです。 今回はそんな厄介な存在であるハンバーガーメニューについて、私なりの現在の作り方を紹介したいと思います。。 ハンバーガーメニューの実装で気を付けるべきこと ハンバーガーメニューの作り方を見る前に、ハンバーガーメニューのあるべき姿、実装時に気を付けるべきことを洗い出してみましょう。 私が思い浮かぶものだと以下のようなものがあります。 メニューボタン、アコーデ
web アクセシビリティに、どうやって対応したら良いか？を 手助けするツールを作りました。 WCAG2.0 の達成基準に合わせた実装方法を確認し、試験結果を記録することができます。 ■ WCAG 2.0 達成基準・実装チェックリスト https://a11y-i-guideline.netlify.com （chrome ブラウザでしか挙動確認してません） 対象 web コンテンツで JIS X 8341-3:2016・WCAG2.0 への対応を求められた コーダー、ディレクター、デザイナー 目次 アクセシビリティ用語解説 実装チェックリストでできること 各ポジション別確認ポイント 使い方 アクセシビリティ用語解説 web アクセシビリティ 一般的に「障害者対応」と考えられるが、メガネがない・眩しい屋外など健常者にとっての 一時的な状況でも、誰でも web コンテンツを支障なく利用できる状
9月1日に発足したデジタル庁のウェブサイトについて、まずはデジタル庁発足日に、アクセスしにくい状態が発生してしまったことをお詫び申し上げます。関係チーム一丸となって、詳しい原因の解明と対策に向けて取り組んで参ります。 改修した主な項目オープン後、すでに様々なフィードバックをいただいています。これまでにいただいたフィードバックの中で、以下の主な項目の改修を行いましたので、ご報告いたします。 ・記事のタイトル要素が全部同じになっている ・フッターのリンク漏れ ・Tweetボタンをタップしたときに自動的に出てくる表記の設定漏れ ・特定画面サイズでのトップページの表示崩れ またアップデートされた項目の告知については、ウェブサイト内にリリースノートを設置するなど、情報発信の方法と頻度についても今後検討して参ります。 ウェブアクセシビリティ上の課題についてウェブアクセシビリティのページに記載している内
デザインシステムのa11y対応に役立つ新しいWeb Standard Alan Dávalos ( https://twitter.com/AlanGDavalos ) アクセシビリティー（以下a11y）の対応は大変重要ですが、正しく対応するのは簡単ではないケースが多いです。デザインシステムなどの様々なプロジェクトで使う目的で作成するコンポーネントではa11yをより意識する必要があります。このセッションでは、そのa11yの対応を格段にやりやすくする新しいWeb Standardを紹介します。 2022年3月25日開催「UIT Meetup vol.15 『Relearn Modern Web Standard』」 https://uit.connpass.com/event/242359/
モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 またモーダルダイアログをはじめとしてディスクロージャーなど、ユーザーの操作に応じて表示と非表示が切り替わるUIもあります。こうしたUIは視覚的には隠れているようでも、実装としては、つねにDOM上に存在しているHTML要素の属性だけを書き換えてレンダリング結果を制御するのが一般的です。 こうしたケースでは、特定の領域を操作できないように実装を行う必要があります。CSSでdisplay:noneかvisibility:hiddenが指定されたHTML要素はそれだけで操作できない状態になりますが、それ以外の方法で非表示になったHTML要素は、利用状況によっては
Web制作時にGoogleChrome拡張のAccessibility Insightsを使ってアクセシビリティの評価を行う | DevelopersIO
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
ネーム＆ナンバー統一の担当者を直撃。「視認性」に秘められたJリーグの理念 - footballista | フットボリスタ
川﨑濃（Jリーグ・ブランドマネジメントリーダー）&橋場貴宏（Jリーグ・ブランドマネジメントクリエイティブオフィサー）インタビュー前編 9月15日、Jリーグはオフィシャルネーム&ナンバーの導入を発表。これまで選手の背負う番号と名前の色とフォントは各クラブが独自に用意してきたが、2021シーズンからリーグ全体で統一される運びとなった。 独自性あふれるデザインから突如、別れを告げることになったファン・サポーターの間では様々な議論が巻き起こっているが、なぜJリーグは導入に踏み切ったのか。担当者であるブランドマネジメントリーダーの川﨑濃氏、ブランドマネジメントクリエイティブオフィサーの橋場貴宏氏を直撃した。 一番の理由は「視認性」 ――2021シーズンからJリーグは、Jリーグ公式戦（J1～3、J1参入プレーオフ、リーグカップ、スーパーカップ）でオフィシャルネーム＆ナンバーを導入します。この決定にはフ
こんにちは！ゲストライターのトゥクです。 前回は、連載最初の記事として私の大学の学部卒業制作研究をもとにデザインとの向き合い方について、ご紹介いただきました。 私の紹介記事に関してはこちらをご覧ください。 そして今回からは私自身や家族、友人が外国人として日本に住む中で感じていることや、出来事についてご紹介していきます。 この連載では、外国人視点から日本に住む上で感じたこと、気づき、出来事を通して、読者の皆さんに新たな視点や発見を届けたいと思います。そして社会におけるマジョリティやマイノリティに関係なく、全ての人にとって良いデザインについて共に議論できると嬉しいです。 外国語名を日本語名のフォーマットに当てはめるって難しい！今回私が紹介するのは「外国語名を日本語名のフォーマットに当てはめること」の難しさと、具体的に私が出会ったBADなUIデザインについてです。 役所や病院、インターネットの個
Building a dialog component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try th
ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ ユーザー調査結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
「ロービジョン」をご存知ですか？視覚障害という言葉を聞くと、多く人は、全く見えない「全盲」という状態を連想するかと思います。しかし実際には、視覚障害とされる方の中には、わずかながら見えるという方もいます。 わずかでも視力があるなら、眼鏡やコンタクトレンズで視力の矯正をすれば良いと思うかもしれません。しかし、矯正しても十分な視力が得られない人もいます。また、視野が狭い、視野の一部が欠けているなど、別の要因で見えにくい人もいます。 このように、矯正をしても見えにくい状態を「弱視」あるいは「ロービジョン」と言います。実は、視覚障害とされる方の6割が「ロービジョン」だと言われており、割合としては全盲の方よりも多いのです。 では、ロービジョンの方はどのようにしてWebを利用するのでしょうか？ この問いの答えは、一言で言うと「人によって異なる」です。先に述べたように、ロービジョンといっても見え方はさま
GNオーディオジャパンが補聴器を手掛けるGNヒアリングジャパンと開発した「Jabra Enhance（ジャブラ エンハンス）」は、聴力強化機能を備えた完全ワイヤレスイヤホン型のデバイスだ。軽度難聴者向けの補聴器として管理医療機器の認証を受けているのが特徴で、GNヒアリングジャパンが2022年2月から販売している。40歳から60歳ぐらいの年代で、本格的な補聴器を使うほどではないが日常生活で耳が聞こえづらいと感じることがある人をターゲットにしているという。
2023年度リクルート エンジニアコース新人研修の講義資料です
ボクはVRができない｜あ
（2/9：「この記事で言いたかったこと」を補足しました） （2/10：「この記事で言いたかったこと」を補足しました） 昨年はVR元年とも言われたように、VRの発展は目覚ましいものがあります。ものすごく楽しいしワクワクするし便利で夢のある技術ですよね。 (ちなみに私はVRを正常に認識できない体質です、突然すみません) 本当はケルト音楽やバグパイプについても語りたいのですが、今回は「急速に発展してきているVR技術・コンテンツについて感じていること」を公開させていただければと思います。読んでいて楽しい内容ではないですが今日だけ許してください。 はじめにお願い 本記事の内容は、決してVRやVtuber、アバター文化などに対しての批判・嘲笑・問題提起ではありません。 本記事は、VR・Vtuberファンのみなさまにとってはどうでもいい、本来お伝えするべきではない夢を壊すようなくだらない内容です。それで
react-modalのアクセシビリティまわりの実装について、ソースコードを読んでみたかったのでその記録を残します。 特にことわりがない限り、 v3.11.2 の内容に基きます。 ドキュメント react-modalのドキュメントには accessibility という項目があり、3つの機能について説明があります。 The app element Keyboard Navigation ARIA attributes The app element 主にスクリーンリーダーのユーザー向けの機能で、 aria-hidden 属性によって、モーダルが開いているときにページコンテンツを非表示と同じような状態にする機能です。視覚的にモーダルウインドウがページコンテンツの上に被さるように表示されている＝ページコンテンツが隠されているのを、スクリーンリーダー向けにはモーダル以外の部分に aria-hid
Intro 本ブログは Markdown で原稿を書き、それを HTML に変換して表示している。このとき、 CSS を用いて Markdown のシンタックスに似せた Style を適用している。例えば以下のように h2::before に content: '##' を指定するといった具合だ。 しかし、これまで <table> だけはうまく Markdown 記法を再現する CSS が書けないでいた。 そこで、周りの CSS 強者に実現できないか聞いてみたところ、@shqld, @araya, @yoshiko 達の協力を得て、かなりの完成度にすることができた。実現方法を記録する。 Before 実現したいのは以下のような記法だ。 | file type | size | ratio | |:----------|-----:|------:| | .webp | 9474 | 100
TRILL開発部のiOSエンジニアの石田です。 今年もdelyではアドベントカレンダーを行っており、本記事はその2日目の記事となっています。 昨日の1日目の記事は奥原さん (@okutaku0507) の「プロダクトマネージャー3年目の教科書」という記事でした。delyのエースPdMである奥原さんによる大作となっていますので是非ご覧ください。 本記事では、機械学習を使ってUIを補完するAppleの研究について紹介します。 AppleはMachine Learning Researchで機械学習に関する様々な研究を発表しています。 その多くはコンピュータビジョンや音声・テキスト認識のような研究なのですが、機械学習xUIという研究も行っております。 本記事ではその中でも、アプリのスクリーンショット(画像)から機械学習を使ってUIコンポーネントを認識し、アクセシビリティ機能を補完するMaking
freeeアクセシビリティー・ガイドラインVer. 202104.0を公開しました - freee Developers Hub
こんにちは、freeeのアクセシビリティーおじさん、中根です。 締切が延長されたおかげで、先日余裕を持って確定申告を終わらせることができました。確定申告は概ね独力でできるのですが、紙で交付される書類やアクセシビリティーが低いPDFで交付される書類から情報を転記するところだけは相変わらず人に頼らないと突破できず、毎年残念な気持ちになっています。でも確定申告が終わると気持ちも軽くなり、気温も高くなっていよいよ春が来るなあという感じになります。 さて、それでは今回の更新内容を紹介します。 そして最後にイベントのお知らせもあります。 freeeアクセシビリティー・ガイドライン Ver. 202104.0リリース・ノート axe改めaxe DevToolsのルールに関する情報を追加 まず、freeeでも活用していてガイドラインの参考情報でも取り上げているアクセシビリティーのチェック・ツールaxeがい
NIKKEI Primeについて 朝夕刊や電子版ではお伝えしきれない情報をお届けします。今後も様々な切り口でサービスを開始予定です。
TikTokなどで人気の手話歌。しかし手話文化に対し無知ゆえにろう者がないがしろにされる事態も 日本人の手話には「日本手話」と「日本語対応手話」の2種類があり、これらは異なる言語 どんな言語にも思い込みを持たず、理解や関心を寄せることが、共生社会の一歩となる 取材：日本財団ジャーナル編集部 「手話歌（手話ソング）」というジャンルの動画があることをご存知でしょうか？ 人気曲の歌詞を手話で表現するというもので、YouTubeやTikTokなどで「手話歌」と検索すると、数多くの動画が投稿されています。 しかし、ろう者（※）の立場からは、違和感を覚えるようなものもあるそうです。 情報・コミュニケーションのバリアを解消して、一人一人の価値を最大に発揮できる調和した社会をつくることを目的に掲げる団体、NPO法人インフォメーションギャップバスター（外部リンク）の代表であり、自身もろう者である伊藤芳浩（い
福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般
dialog要素を使用したアクセシブルなモーダルウィンドウの実装メモです。このブログのハンバーガーメニューで使われている実装と同じものになります。 dialog要素は現在全てのモダンブラウザでサポートされているため、iOS Safariをどこまで対応するかに依りますが実務で使用しても差し支えないでしょう。
ことでんの社長へ返信を140文字区切りで細かく説明するのは大変だし、しつこくなりそうなので箇条書きにします
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
花王が挑む、600サイト・1200名を巻き込んだ全社ウェブアクセシビリティプロジェクトの全貌【前編】 - Findy Engineer Lab
企業がウェブアクセシビリティの向上に取り組む際、まずは少人数で小さな改善から始めていく方法を選択するケースがほとんどです。しかし、2022年のGAAD（※1）で、ある企業の革新的な取り組みが大きな話題になりました。 その企業とは、大手消費財化学メーカーとして知られる花王株式会社。花王が発表したのは、全社を挙げたウェブアクセシビリティ推進プロジェクトの発足と取り組み内容についてでした。 ウェブアクセシビリティの啓蒙に取り組むFindyでは、花王でウェブアクセシビリティの推進に携わる後藤 亮さんと渡邊 佳菜恵さんにお話を伺うべく、ウェブアクセシビリティの専門家として活動されている株式会社ディーゼロのゆうてん（@cloud10designs）さんをインタビュアーに迎えて対談を実施。本記事では、対談の内容を前・後編に分けてたっぷりお届けします。 社員数が3万人を超える大企業である花王が、どのように
アクセシビリティ上の問題を仕込んだサイトを生成します 勉強の教材、業務の資料としてお使いいただけます 用途にかかわらず無料でお使いいただけます 障壁（バリア）の設定 プリセット版 問題をあらかじめ設定（プリセット）した駒瑠市サイトです。カスタマイズ版にのみ存在する障壁もあります。 プリセット版で使うWCAGのバージョンを選択してください WCAG 2.0以外のバリアは、まだあまり揃っていません。WCAG 2.2のバリアはまだありません。 WCAG 2.0 WCAG 2.1 WCAG 2.2 altの不具合の多い駒瑠市駒瑠市のロゴ、COOL CHOICEのロゴ、情報が不足したalt（「温暖化の状況」ページのグラフ）、altと重複したキャプションの提供（トップページ「あなたにもできる取り組み」）、文字画像にする必要がない上にaltが不適当な画像（トップページ「駒瑠市の本日のCO₂排出量」）、市
『アウター・ワールド』のフォントサイズがまたデカくなる。大作たちを悩ます字小さすぎ問題 - AUTOMATON
デベロッパーのObsidian Entertainmentは3月5日、『アウター・ワールド』の新たなパッチで「フォントサイズの変更」機能を追加すると発表した。同作は昨年11月のパッチでもテキストサイズの拡大を実施したばかりで、今回の修正は二度目の対応となる。 本作はObsidianが手掛けた『Fallout: New Vegas』の遺伝子を色濃く受け継いだ作品で、苛烈な資本主義がはびこる星系を生き抜く一人称視点のRPG。一貫したディストピア的世界観や安定したゲームバランスが評価を受けるSF作品だ。 画像は発売当時のフォントサイズが小さかった仕様のもの 手堅い評価を受ける『アウター・ワールド』だが、発売当初から抱える問題がいくつかあった。そのうちのひとつは、ゲーム内で表示される字のサイズだ。会話しているキャラクターの台詞にしろシステムを構成するUIにしろ、とにかくフォントが小さすぎたのである
CSS Modules の命名に迷ったら
先日、こちらの記事「Tailwind 考」を発端に、Tailwind CSS を愛用されている方達の間では「命名を考えなくてもよい」という点を、高く評価されているように感じました。実際、stylede-components はコンポーネント毎に命名するのが一般的ですし、CSS Modules も書き方によっては、セレクター名称をたくさん考えなければいけません。 職場で働く同僚の間でも、要素に直接スタイルをあてない書き方だと「命名規則で迷いそう、ガイドラインが必要そう」という声を聞きます。普段 CSS Modules を利用している筆者ですが、コーディング時命名に迷うことはかなり稀です。「迷わないために何を基準にすべきか？」について、わたしが普段ヒントにしている点を紹介します。 UI コンポーネントを細分化する まずはじめに検討するのは、UI コンポーネントの細分化です。UI コンポーネント
公開日 : 2023年7月19日 (2024年3月20日 更新) カテゴリー : アクセシビリティ 国連の「障害者の権利に関する条約 (Convention on the Rights of Persons with Disabilities)」の批准に伴う国内法制度の整備の一環として、「障害を理由とする差別の解消の推進に関する法律」(いわゆる「障害者差別解消法」) が2016 (平成28) 年4月1日より施行されています。 現在はその改正法 (「障害を理由とする差別の解消の推進に関する法律の一部を改正する法律」) が2021 (令和3) 年6月4日に公布されており、政令により2024 (令和6) 年4月1日に施行されることになっています。併せて基本方針 (「障害を理由とする差別の解消の推進に関する基本方針」) も改訂され2023 (令和5) 年3月14日に閣議決定されたところで、こちらも
ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情を読んで考えたこと - 午前2時の正夢
元ネタ 生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情 これを読んで色々と考えたことがあった。 特に自分が広告代理店に勤務しているがあるべき抑止力になれなかったというのが大きい。 webサービスを開発しているわけでアクセシビリティとは無縁ではいられない。 多少なりともアクセシビリティに関わるなら社内でこういった企画が出たときに止めないといけないなと思った。 本来はこういう可燃性の高い話題は触れたくないが、明らかに無知とそれを許容した無教養が今後も出てくると思い、それらをせめて自分の組織においては抑止したいとおもう。 デジタルエージェンシーと”バズ”の功罪 小難しい見出しをつけたが承認やイメージアップといったものに踊らされて判断を誤ったのだとしか言いようがない。 近年SNSを使ったブランドイメージ構築が盛んだ。 シャープさんのような中の人運
なおや@不可能を可能にする男 on Twitter: "(できればご協力を) twitterにて長文を投稿する際、画像を出す方が増えていますよね。 わたしたち #全盲 の場合、そのままでは確認ができません。 画像に説明を追加ボタンから出したところに、本来投稿する予定だった文をコピペしていただければ読めますので、できればお願いします。"
(できればご協力を) twitterにて長文を投稿する際、画像を出す方が増えていますよね。 わたしたち #全盲 の場合、そのままでは確認ができません。 画像に説明を追加ボタンから出したところに、本来投稿する予定だった文をコピペしていただければ読めますので、できればお願いします。
a11yとテストを同時に改善する話
これまで、a11y 改善・テスト拡充にあたり「どのように改善すべきか？どのように書くべきか？」という点がハードルだと感じていました。Chrome で a11y tree を確認するには、dev tools の隅の隅をつつく必要があり、あまり体験の良いものではなく、気に入ったエクステンションもありませんでした。 Testing Library は「誰もがアクセスできるクエリー」を優先的に使用することを推奨していますが、アプリケーションがはじめから a11y に考慮された作りになっているとは限りません。これらの背景から「data-testid」のような、テスト向け属性に頼るワークアラウンドで乗り切ることも少なくありませんでした。 Full page accessibility tree 今年 1 月にリリースされたChrome98 の新機能として「Full page accessibility
by Mary Cullen エディンバラ大学の博士課程で神経言語プログラミングと機械学習を学ぶナオミ・サフラさんは、2015年8月から原因不明の病気によって手が不自由になってしまい、タイピングによるコーディングが難しくなってしまったそうです。そんなサフラさんが、自身がコンピューター科学の研究と仕事を続けていくために採用した「手が使えなくてもプログラミングを行う方法」について、自身のブログで語っています。 What Does a Coder Do If They Can't Type? | Objective Funk http://nsaphra.github.io/post/hands/ サフラさんは、2015年8月から手を動かすたびに焼かれるような痛みにたびたび襲われるようになったとのこと。リウマチの専門医からは、アメリカ人として初めて「線維筋痛症」と診断されてしまったそうです。また
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ワンタイムパスワード(OTP)のベストプラクティスじゃない入力フォームに出会う - hogashi.*
実装しながら理解するモーダルのアクセシビリティ with React
東洋経済COVID-19ダッシュボード制作メモ（１）コンセプトと配色｜荻原 和樹 / Kazuki OGIWARA
Microsoft、Webページの問題を調査する「webhint」のWebブラウザー拡張機能を正式公開／Webページのアクセシビリティやパフォーマンス、セキュリティに関する問題をチェック
ハンバーガーボタン 何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku
React Spectrum Libraries
【2024年】ハンバーガーメニューの作り方決定版【コピペ可能】 | techlab / baigie
webアクセシビリティ実装チェックリストを作った - Qiita
デジタル庁ウェブサイトにいただいたフィードバックの反映状況について｜デジタル庁
デザインシステムのa11y対応に役立つ新しいWeb Standard
UIにおける見えるけど利用できない非活性な領域の実装とinert属性について
外国人から見た名前入力に関するBADなUIデザイン｜CULUMU / インクルーシブデザインスタジオ
Building a dialog component | Articles | web.dev
日常生活で耳が聞こえづらい人向け、聴力強化イヤホン「Jabra Enhance」の実力
Webアクセシビリティ入門
react-modal のアクセシビリティまわりの実装を読む
Markdown の Table 記法を CSS で実現する | blog.jxck.io
機械学習を使ってUIを補完するAppleの研究の紹介 - dely Tech Blog
ソニー、全商品で障害者・高齢者配慮 開発時のルールに - 日本経済新聞
なぜ手話歌にモヤモヤする？ 手話文化の大前提を識者に聞いた | 日本財団ジャーナル
アクセシビリティからデザインを学ぼう
「ビヨンセの公式サイトも訴えられた」企業Webサイトがアクセシビリティに取り組むべき理由とは？ | イベント・セミナー
dialog要素を使用したモーダルウィンドウの実装例 ｜ TAKLOG
駒瑠市〜アクセシビリティ上の問題の体験サイト〜
改正障害者差別解消法とウェブアクセシビリティ | Accessible & Usable
突然原因不明の病気で手が不自由になったプログラマーが働くための方法とは？