まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
『JRで車いすユーザー乗車拒否にあいました』の方について『車イス乗車拒否の女性、１０年前にも拒否されてメディアにの取材に応じる 社民党幹事として活動』とネットユーザの証言
１０年前の記事は２０１０年１０月の掲載なので、おおよそ１０年半前といったところでしょうか。 特定非営利活動法人 共に生きるネットワークまなびやー｜BtoBプラットフォーム 業界チャネル https://b2b-ch.infomart.co.jp/company/detail.page?IMCOMPANY=10644653 ご自身のブログにも過去記事を掲載されているようです＞乗車拒否は乗者拒否/琉球新報連載１４ : コラムニスト伊是名夏子ブログ http://blog.livedoor.jp/natirou/archives/51754463.html
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
車いすを押してきた人間として、いま複雑な気持ちでいる
俺は、爺さんと親父と２人の車いすを押してきた人間として、映画館の対応で炎上している今の騒動を複雑な気持ちで見ている。 少し愚痴を書き込みたい。 単純な話として、もし自分の働いているところにああいう車いすユーザーが来たら、表面的な対応は別としても内心では腹が立つ。これはもうしょうがない。 クソみたいなクレーマーは多いし、ちょっとこっちが仏心を出すとそこにつけこむクソ客も多い。 とりあえず言ってみて通ればめっけもん、一度通ればそっからはソコを最低ラインとしてさらに言う、対応できなきゃ文句を言う。対応する側としてはクソ客以外の何物でもない。 ただ、そういう対応する側からすると速やかにおかえり願えないかなと思うようなゴリゴリ押してくる車いすユーザーが先陣を切ってくれなければ、変わらなかっただろうな、とも思う自分が居る。 爺さんの時は、俺も車いすを押したが、主に調べたのは親父やおふくろだった。 何を
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
Colorbase
All-in-one color tool for creators
少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を
先日のアップデートでシャニマスのUI周りに色々と手が加えられた。 その中でも個人的に嬉しかったのは、ソートに関連するチェックボックスのON/OFFが見やすくなっていたことだ。 大多数のユーザーにとっては「まあ確かにね」くらいのものかもしれない。しかし私は「これでようやくまともにソート機能が使える」とひそかに歓喜した。一部のユーザーも共感してくれるのではないだろうか。 なぜなら私の目に映った変化は以下のようなものだったから。 チェックの光沢の有無でかろうじて判別していた（ひよこ鑑定士か？）この見え方の差異は、私が『色覚マイノリティ』、いわゆる『色弱者』であることに起因する。 『色弱者』って何？光（色）を感じる視細胞が何らかの原因により欠損、または十分に機能しないことによって色の見え方が一般とは違う人のことを、本記事では『色弱者』という呼称で表記する。 日本人男性の5％、女性の0.2％がこの色
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。
佐川・抜け首・なん on Twitter: "「当時としては、ワガママとされ、暴力的とされ、迷惑とされ、非常識とされ、だけどその騒ぎのおかげで後輩達が恩恵を受けている」 私はいつも「川崎バス闘争」を思い出す。 公共交通機関に「車椅子の人を一人で乗せろ」として、「闘争」があったのだ。"
「当時としては、ワガママとされ、暴力的とされ、迷惑とされ、非常識とされ、だけどその騒ぎのおかげで後輩達が恩恵を受けている」 私はいつも「川崎バス闘争」を思い出す。 公共交通機関に「車椅子の人を一人で乗せろ」として、「闘争」があったのだ。
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
Search, watch, and cook every single Tasty recipe and video ever - all in one place! News, Politics, Culture, Life, Entertainment, and more. Stories that matter to you.
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは。フロントエンド開発センター UIT Accessibilityタスクフォース 岡﨑です。私たちは、Webサイトのアクセシビリティに関するガイドラインの策定・推進、社内に向けたアクセシビリティの勉強会やe-ラーニングを通じて、LINEとそのファミリーサービスのアクセシビリティ向上を目指しています。 色に対する配慮 アクセシビリティの国際規格となっているWCAGでは、テキストにおける色の取り扱いで以下のことが求められています。 色に依存した表現にしないこと コントラスト比を確保すること なぜ、色に対する配慮が必要なのでしょうか？ 困っているのはロービジョンユーザーだけではない LINE STYLEの"Alwa
この文章について これは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。 イベント映像 この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです 登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
「わかりやすさ」を デザインする情報アーキテクチャ必修入門 / Introduction to IA for "Design for Understanding"
MdN Bau-ya “「わかりやすさ」をデザインする 情報アーキテクチャ（IA）必修入門” (2023/1/18開催) https://www.street-academy.com/myclass/149720 上記イベントで使用したスライドを公開用に編集したものです。 作者：森田 雄 / 株式会社ツルカメ https://twitter.com/securecat https://turucame.jp/ Made with Canva https://www.canva.com/
受託の会社が資金調達せずに自社サービスを立ち上げて、有料導入5000社に行くまでの振り返り - ヴェルク - IT起業の記録
2024年1月9日にboardの有料登録社数が5000社を突破したので振り返りです。 boardの正式リリースは2014年8月20日なので、約9年半ほどで、推移はこんな感じでした。 ＊「社数は累計ですか？」と聞かれることがよくあるのですが、累計ではなくその時点のアクティブな数です。 1000社刻みで定点観測的に書いているので、過去の記事も貼っておきます。 受託の会社が資金調達せずに自社サービスを立ち上げて、有料導入1000社に行くまでの経営・受託とのバランス（BPStudy発表時の補足） 受託の会社が資金調達せずに自社サービスを立ち上げて、有料導入2000社に行くまでの振り返り 受託の会社が資金調達せずに自社サービスを立ち上げて、有料導入3000社に行くまでの振り返り 受託の会社が資金調達せずに自社サービスを立ち上げて、有料導入4000社に行くまでの振り返り boardとは 見積書・請求書
Webアクセシビリティ難しすぎる問題
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
こんにちは。伊原 力也（@magi1125）と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。 ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。 また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。 ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。
一人から始めるWebアクセシビリティ
Public file shared from https://slack.com/
近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します（あくまで執筆現在の脳内アウトプットになりますのでご了承ください） フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
AraiTakao @tko99999_jp Airpodsを片耳ずつ交換して、Google翻訳の音声読み上げ機能を使い友達と『会話をする』という今までに無い新しいコミニケーションスタイルがティーンによって誕生してる、、、 pic.twitter.com/WkmYrNbkPy 2020-01-22 14:14:39
車椅子ユーザーの「JRに乗車拒否された」ブログ、合理的な配慮なく炎上。必要なのはトラブルではなく賛同（篠原修司） - エキスパート - Yahoo!ニュース
車椅子ユーザーのコラムニスト、伊是名夏子さんが4月4日に投稿した「JRで車いすは乗車拒否されました」とのブログ記事が炎上し、いまも燃え続けています。 炎上が続く背景には、JRの駅員に対して合理的な配慮を求める伊是名さんが、自身は合理的な配慮をまったくしていないことにあると分析します。 炎上したブログの内容とは？ まず初めに、炎上している記事の内容について紹介します。詳細はブログを読んでいただくとして、まとめると 無人駅の来宮（きのみや）駅で降りたいため現地での車椅子対応を当日に乗車駅の小田原駅で依頼したところ、駅員は熱海駅までの乗車を提案。 1時間ほど「来宮駅での対応をして欲しい」と交渉したのちに熱海駅に向かうと、熱海駅では駅長ふくめて4人で対応をしてくれた。 帰路では事前連絡をお願いされていたため前日に連絡したところ、来宮駅で駅員が待機してくれており、希望の時間の電車に乗れた。 という内
Web・コーディング界隈で読み間違いしやすい用語一覧
日本人向けの記事のため表記がカタカナとなっております。そのため完全に正確な英語の発音を保証しているわけではございませんのでご了承ください。（より正しい発音が気になる方は各自で発音記号をお調べください。） また私自身は帰国次女でもない純粋な日本人＆英語力凡人レベルです。明らかに間違っているものがありましたらコメントやTwitterなどでご指摘ください。 もちろん他にもこれが間違いやすいよ、という用語もあればお待ちしております🙏 ❓がついてるのは決めきれないorネイティブでも揺れがあるor議論が必要 なものです。 a11y エイイレブンワイ absolute アブソルート Adobe アドビ Airbnb エアビーアンドビー ajax エイジャックス align アライン（text-align テキストアライン など） AMP（Accelerated Mobile Pages） アンプ An
Zホールディングス株式会社
Zホールディングス株式会社
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
わたしはページ内検索を普通に使いたい
以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で
小太刀右京/Ukyou Kodachi on Twitter: "イギリス行った時、「日本よりたくさん車椅子の人がいるな」と思ったのです。イスラエルでも同じ事を思いました。美術館にもゲームショップにも本屋さんにもパブにもいる。でも、これは違うわけで、人口比は大差ないはずなのです。「これがバリアフリーの差かあ」と、自分の認識の甘さを恥じ入りました"
イギリス行った時、「日本よりたくさん車椅子の人がいるな」と思ったのです。イスラエルでも同じ事を思いました。美術館にもゲームショップにも本屋さんにもパブにもいる。でも、これは違うわけで、人口比は大差ないはずなのです。「これがバリアフリーの差かあ」と、自分の認識の甘さを恥じ入りました
見えない人はWebをどう閲覧？ 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】：東京新聞 TOKYO Web
見えない人はWebをどう閲覧？ 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】
全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub
こんにちは、 freeeでデザインシステムを作っていたりアクセシビリティーのいろいろをやっていたりする id:ymrl です。 freeeではfreeeアクセシビリティー・ガイドラインを策定して、誰でも使えるアクセシブルな製品開発ができるよう取り組んでいます。これまでも、開発者（エンジニア、プロダクトマネージャー、デザイナー）向けには実習を含むアクセシビリティー研修を行ってきました。 そしてこのたび10月から 対象を全新入社員向けに拡大 してアクセシビリティー研修を行うようになり、あわせて開発者向けの研修も内容を整理したので、今回はその紹介をします。 なぜ全員に研修をするのか これまでのアクセシビリティーの取り組みは、プロダクト開発を中心に進めてきました。「だれもが自由に経営できる統合型経営プラットフォーム」をビジョンに掲げている以上、まずは提供しているSaaSが誰でも使えるものになってい
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
広く表現の自由を守るオタク連合 on Twitter: "この手の話では「前もって連絡しろ」とぬかすやつが大勢出てくるが、そもそも健常者が気にしないことを車椅子ユーザーが多大な負担でもってクリアしなければいけないこと自体が差別であるという理解がいつになったら共有されるのだろうか。 https://t.co/xjQmdF7Nm8"
この手の話では「前もって連絡しろ」とぬかすやつが大勢出てくるが、そもそも健常者が気にしないことを車椅子ユーザーが多大な負担でもってクリアしなければいけないこと自体が差別であるという理解がいつになったら共有されるのだろうか。 https://t.co/xjQmdF7Nm8
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend
#insideFE slide with @tokimariri. Web App Checklist😉: 💡Rendering patterns 💡CDN 💡Perf Budget 💡a11y 💡PWA 💡WASM in Web Worker 💡Monitoring tools 💡DX (including LGTM!) and so on! 🙌
Intro 筆者は、 Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。 もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。 この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。 「自分は今 Push で実装しているのか、 Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。 (本エントリでの Ossification は、一般に言われている Pro
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
「SEOに強いHTMLの書き方」についての個人的な見解
2022年におけるフロントエンド開発のベースライン
Sign-in form best practices | Articles | web.dev
キーボード操作を意識したHTML/CSSコーディング
やってほしくない緑とオレンジの使い方(カラーUDの話)｜ほうじ | 少数色覚デザイナー
シャニマスのチェックボックスから見る色弱者の世界｜謝罪Ｐ
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
なんでもSPAにするんじゃねぇ！という主張のその先 - console.lealog();
2022年におけるフロントエンド開発のベースライン
都知事、ベトナム語しゃべってる…？タガログ語もネパール語も話せるの…!? 各言語でコロナ感染対策を呼びかけた背景
LINE社員1,361名の"色覚に関するアンケート"
Webエンジニアとしていま知っておきたいWebアクセシビリティ
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
ウェブアクセシビリティを無料で学べる資料まとめ（10年分）｜magi1125
私のフロントエンドディレクトリ構成・テスト観点 2022
ワイヤレス•イヤホンを片方ずつ交換して、教室で読み上げ機能を使えば、喋らずに音声でコミュニケーションできると話題に
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
Web のセマンティクスにおける Push と Pull | blog.jxck.io