「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
Table内の3点リーダーってどういう仕組み？max-width: 0ってﾄﾞﾕｺﾄ？ - Qiita
3点リーダーとは 3点リーダー（省略記号）とは、テキストが長くてボックスの領域を超えてしまう場合に「...」でテキストを省略表示する手法です。 3点リーダーを実装するために必要な4つの設定 1、ボックスのwidthの指定 テキストが表示される領域の幅を指定します。 2、white-space: nowrap; テキストの改行を禁止し、1行で表示します。 3、overflow: hidden; テキストが表示される領域の幅を超えた場合、その超えた部分を隠します。 4、text-overflow: ellipsis; 非表示の溢れた部分を3点リーダー（...）で表示します。 See the Pen Untitled by kidorina (@kidorina) on CodePen. 簡単に長いテキストを省略することができます。 Table内での3点リーダーの挙動 Table内で3点リーダー
Chrome, Edge バージョン128 css zoom標準化のメモ書き - Qiita
はじめに ChromeやEdgeのバージョンが128に更新された時、 縦スクロール固定、横スクロールは動的に動かしている要素の位置がずれた。 状況 cssのzoomプロパティが適用されたdiv要素の子要素に対して、 縦スクロールはposition:fixedで固定されるけど 横移動した時に位置を動的に動かすために jQueryのoffset().leftで絶対位置を取得してスクロールしたpxと引き算して動かすということをしていた。 jQueryのバージョンはv1.12.4とかなり古い... 原因 Chromeのバージョンが127から128に変わった時に、 cssのzoomが標準化されて、それに合わせてjavascriptのAPIが色々変更されたらしい。 リリースノート API影響 iframe コンテンツ ドキュメントに適用するズームを変更する 継承されたすべての長さのプロパティに適用され
Python理事会が古参開発者を追い出して開発者コミュニティが騒動に - Qiita
どういうわけか日本では一切話題に上がっていないのですが、Pythonの開発者コミュニティでなんか問題が起きているようです。 どうも話が様々なスレッドにとっ散らかっているうえに半分はDiscordや非公開のところで動いているみたいなので、読み取れていないところが色々あるかもしれません。 誰かが補足してくれるはず。 Proposed bylaws changes to improve our membership experience 最初のきっかけはこのスレッドです。 これは規約の一部を変更する提案であり、その中でも3番目の提案であるAdds provision to remove Members by vote of the Board of Directorsという変更が注目を浴びました。 Python財団にはフェローという制度があり、これはPythonエコシステムやコミュニティに優れた
スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも
RustとWebAssemblyでCanvasタグ使わずにお絵描きしてみた - Qiita
はじめに 前回RustとWebAssemblyで拡大鏡ツール作った際に、mouse操作中でもそれなりのパフォーマンスで画像を加工できたので、 Canvasタグ使わなくてもImgタグに直接お絵描きできそうだと思ったので実際にやってみる。🖌️ 前回作った拡大鏡ツールについて プロジェクトの作成 まず、load時にCanvas代わりとなるImageを表示する。 (今回は白紙の320pxベース) // 省略 #[wasm_bindgen] pub fn set_canvas() -> String { let canvas = DynamicImage::new_rgba8(320, 320); let mut buffer = Cursor::new(Vec::new()); canvas.write_to(&mut buffer, ImageFormat::Png).unwrap(); le
世界1位取った後3年間オセロAIを作り続けたらﾅﾆﾓﾜｶﾗﾅｸなってﾁｮｯﾄﾀﾞｹﾃﾞｷﾙようになった話 - Qiita
2021年、ふとしたきっかけでオセロAIを作り始め、オセロAIコンテストに作ったAIを提出し、なんやかんやあって半年かけてそのコンテストで世界1位になりました。 それで満足…？と思いきや、全然満足せず、コンテスト関係なしにオセロAIを作って早3年。この記事ではオセロAIが色々なところに私を連れて行ってくれた話と、オセロAIが深いという話をします。 この記事は2年ほど前に書いていっぱい読んでいただけた以下の記事「ｶﾝｾﾞﾝﾆﾘｶｲｼﾀ話」の続編、みたいな立ち位置です。単体で読んでも、以下の記事と合わせて読んでも楽しめます。 世界1位からさらに高みを目指す 私が参加したオセロAIのコンテスト(CodinGame Othello)は、コンテストという特性上、かなり厳しい制約が設けられていました。例えば着手する時間です。これは1手あたり0.15秒以下でないといけません。また、コード長にも制限があり
polyfill.ioを使うのは危険かもしれない(危険だった) - Qiita
TL;DR 2024/06/26 実害が出ているようです、polyfill.ioを利用している場合は直ちに利用を止めましょう。 GIGAZINE: JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Codebook: Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 polyfill.ioから配信されるスクリプトが汚染される環境下にあり、危険な可能性があります。利用している方がいらっしゃいましたら外しておくことをおすすめします。または安全なバージョンのものがCloudflareとFastlyから利用できるので、ドメインをpolyfill-fastly.netやpolyfill-fastly.ioに変更して利用しましょう。 背景 自社で使用しているマーケティングプラットフォームサービスで作成したWebページをGo
MDN のローカライズにおける課題へのアプローチを考える - Qiita
日本語記事の見出し ID が日本語になってしまっています！ を思い出してください。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#specifications こんな URL があったとき、en-US の部分を ja にするだけで目的の箇所にページ内リンクして欲しいですよね。しかし、現状の設計だとそれが不可能になってしまっているのです。ID が翻訳されてしまっているがために。 見出し語のローカライズ問題 ローカライズ版では、見出しはベタ書きで訳語を記述しています。前述の通り Specifications に対応する見出しとして 仕様書 と書いています。しかし、これが 仕様 になっていたりするページもあるのです。 そう、辞書ファイルを用意して翻訳するというアプローチを採っていないがために、
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
prismaのような感覚でスプレッドシートを操作できるGASライブラリ "GASsma" - Qiita
はじめに みなさんNode.jsのORMは何が好きですか？TypeORMとかSequelizeとかあると思います。私はprismaが一番好きです。理由は大学時代に習ったMongoDBのクエリとどことなく似ていてとっつきやすかったからです。 ところでGoogle Apps Script(GAS)でスプレッドシートを操作するスクリプトを書いた際、非常に面倒だと思ったことはありませんか？(唐突)例えば以下のデータがあるとします。 このデータから「年齢の列が25歳以上の行を抜き出し、名前の昇順に並び替え、行を連想配列(キーは列名)に変換し、その配列で出力する」スクリプトを書きたいとします。 その場合以下のコードになるはずです。 function myFunction() { const sheet = SpreadsheetApp.getActiveSpreadsheet(); const hog
JavaScript: 豆知識 - Qiita
暗黙型変換 果たしてMath.maxは何と答えるのか!? Number? NaN? それどころか文法違反? 1文字も見落とさずじっくり観察してね。 Math.max(!1,!0) Math.max(-0,null) Math.max(1,0..a) Math.max(1,NaN) Math.max(-1,true) Math.max(-1,"") Math.max(-1,[]) Math.max(-1,[,]) Math.max(-1,[,1]) Math.max(-011,[-1e-1-1]) Math.max(-1,[{}]) Math.max(011,10) Math.max("011",10) Math.max(-["-012"],013) Math.max(" \n011\n ",012) Math.max(" \11\n","\r\f\v") Math.max("0b11","
法律の（かっこ）ネスト問題：深すぎる「◯段ネスト」条文と、読解を拒む「とあるのは」条文《法令.app》 - Qiita
法律の（かっこ）ネスト問題：深すぎる「◯段ネスト」条文と、読解を拒む「とあるのは」条文《法令.app》JavaScriptDX個人開発法令API電子政府 誰でも楽しく法律が読める《法令.app》というWebアプリを作っています。 誰にとっても平等に「条文は読みにくい」 当初はWebアプリにするつもりはなく、Chromeの「拡張機能」で、「漢数字」をローマ数字にするだけで読みやすくなると考えました。「昭和六十年」を「1985年」、「一、○二五、二○○円」を「1,025,200円」にするだけで頭に入りやすくなります。 しかし、拡張機能はセキュリティの制限が厳しくなり（前はできた気がしますが）本文を書き換えるのは「裏ワザ」的になり、今後はさらに厳しそうでした。 次はどうしようかと調べているときに、カルアパ(@lawyer_alpaca)さんの記事を見つけました。「すでに先のことまで大体やられてし
ユーザーが『アイドル』を歌うとサーバーが停止する - Qiita
起きたこと 僕が運営している『オンライン絵しりとり』というサイトで起きた話となります。 これは訪れたユーザー同士で絵しりとりを楽しめるサービスです。 ある日、このサービスをホスティングしているConoHaVPSより、規約に違反しているため利用を制限した旨のメールが届きました。 お客様のVPSにおきまして、弊社会員規約に反するコンテンツが 検出されましたので、ご利用サービスの制限をさせていただき ましたこと、ご連絡申しあげます。 そして、メールが届いたほぼ同時刻にサーバーが停止され、サービスへアクセスできない状態になりました。 メールによると、JASRACより著作権侵害に対する防止措置の申し出があったとのことです。 指摘対象のコンテンツを確認したところ、ユーザーがサイト内のチャットでYOASOBIの楽曲である『アイドル』の歌詞の一部を投稿しておりました。 ご覧の通り、話の流れで流行りの曲をみ
ウェブアクセシビリティ改善に取り組んだ話 - Qiita
こんにちは、グロービスで「GLOBIS 学び放題」のフロントエンドエンジニアをしているAgataです。 「GLOBIS 学び放題」では、アクセシビリティ改善に向けたプロジェクトを開始しました。この記事では活動を通じて学んだアクセシビリティの課題発見方法と解決方法を紹介します。 ウェブアクセシビリティとは？ デジタル庁の『ウェブアクセシビリティ導入ガイドブック』では、ウェブアクセシビリティは以下のように定義されています。 ウェブアクセシビリティは、利用者の障害の有無やその程度、年齢や利用環境にかかわらず、ウェブで提供 されている情報やサービスを利用できること、またはその到達度を意味しています。 障害のある人や高齢者も含めて、様々なニーズがあるユーザーでもサービスを使える状態にするための努力です。 アクセシビリティの配慮例: キーボードのみで操作を可能にすること 例：手の怪我、手の震えでマウス
恋愛で理解するHTTP通信 - Qiita
はじめに HTTP(ハイパーテキストトランスファープロトコル)について恋愛の告白で例えてみます。告白したことがある人もない人も青春に浸りながらHTTPを理解しましょう。 ※本記事はHTTP通信の流れがイメージできることを目的としています。詳細なニュアンスや意味が本来と異なる場合があります。 登場人物 告白する人 - クライアント 告白される人 - サーバー 太郎くんと花子さんです HTTP通信とは HTTPとは告白する人(クライアント)と告白される人(サーバー)の間でデータの送受信を行うために用いられるプロトコルです。プロトコルとは簡単に言えば約束事、決まりのことです。 告白で例えるとプロトコルは言葉と言えます。日本語や英語などです。通信プロトコルは世界強共通(言語)なので世界中あらゆる場所で通信できるのです。 愛があれば言語(プロトコル)の壁を越えることもあるかもしれませんが通信の場合、
MSX-C に関する情報 - Qiita
はじめに 『MSX-C』関連の情報を集めてみました。 MSX-C 『MSX-C』は ASCII が発売した MSX 用の C コンパイラです。元々は エル・エス・アイ・ジャパン株式会社 の『LSI C-80』の OEM だったようです。 『MSX-C』はアセンブラソースを吐くタイプのコンパイラですので、実行形式ファイルを生成するにはアセンブラとリンカが必要です。 See also: ASCII MSX-C (MSX Resource Center) LSI C-86 (Wikipedia) 準拠している C 言語の規格 ANSI C (1989) よりも前に発売された製品なので、後に制定された規格には準拠しておらず、K&R のサブセット的な実装となっています。例えば、MSX-C で利用可能なデータ型は次の 4 (3) 種類のみです。 型 長さ 範囲
buttonタグのsubmitした値がPOSTされなかった話 - Qiita
クリックしたボタンによって処理を分ける formでpostする際において複数のボタンを設置している場合、クリックしたボタンの値を受け取って処理を分岐できる。 例えばメールフォームなどで、確認画面から入力画面に戻るか、送信するかという場合、以下のような処理で実現できる。 <form action="post.php" method="post"> <button type="submit" name="action" value="back">戻る</button> <button type="submit" name="action" value="send">送信</button> </form> $action = (string)filter_input(INPUT_POST, 'action'); if ($action === 'back') { // 入力画面に戻る処理 //
deck.glを使ってGoogle Mapに大量のポリゴンを描画してみる - Qiita
Google Mapはとても優れたプロダクトです。地図と言ったらGoogle Map、と思われる方も多いはずです。 地図を使ったアプリケーション開発においても、ユーザーに広く認知されたGoogle Mapを使いたいという要望を聞く機会が良くあります。 Google Mapを使ったアプリケーション開発を行う際に、Maps JavaScript APIを使って開発を行うことが多いと思います。Maps JavaScript APIはGoogle Mapを使ったWebアプリケーション開発を行う際に使用するJavaScriptライブラリです。 Maps JavaScript APIを使ったアプリケーション開発を進める中で、loadGeoJson()やaddGeoJson()を使って大量のデータを描画した際にパフォーマンスの問題が出てくることがあります。 この記事では、deck.glを使ってGoogl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
