スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも
「住所は英数字もすべて全角で入力してください」はなぜそうなったのか - Qiita
Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっていったのかが気になってる。いま存在しているのは過去の仕様や慣習の踏襲として理解できても、そもそもなぜそれらが生まれたのかが理解できない。 https://t.co/ZLz0Pw9GOK — ymrl (@ymrl) July 29, 2024 これについて
重要情報はスクロールしないと見えないが、スクロールバーがない EC事業者に業務停止命令
4月には、定期契約の解除を妨げるため、条件上は解約できるにもかかわらず、解約できないように見える表示をしていたことも分かっている。 これらを受けて消費者庁は同社に6カ月の営業停止命令を出すとともに、再発防止とコンプライアンス体制の構築を指示。代表取締役の中村智紀氏には6カ月間、同様の業務を新たに開始しないことを命じた。 関連記事 LINEで販売、高額な“痩せるお茶”にご用心 「追加料金なし」は実質うそ 消費者庁が注意喚起 消費者庁は、「追加料金なし」と聞いてダイエット商品を購入したが、実際には高額な別料金を請求されたとする相談が多く寄せられているとして注意喚起した。問題の事業者は実際には17～23万円の追加料金を求めていた。 「LIFEBOOK 21％引き」は嘘……「富士通 WEB MART」で二重価格 消費者庁が措置命令 PC直販サイト「富士通 WEB MART」で、ノートPC「LIFE
リンクとボタンを｢押せる｣だけでデザインしない
リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」[1]という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタンは明確に異なる機能や振る舞いをもっている。その振る舞いやそれに対するユーザーのメンタルモデルから結果ビジュアルが同じになるのならいいのだが、ただ単純に「押せる」ことだけを基準にデザインされてしまうのは具合が悪い。このエントリーでは、リンクとボタンをデザインするにあたって「押せる」だけではなく、他にも判断材料となるものがあることを共有したいと思う。 前提と定義 今回の話はウェブブラウザで動作するUIを前提に考える。途中で言及するが、リンクがURLに関係していることと、URLをユーザーが意図的に変更できることが大きく関係するので、ネイティブアプリ
当初の懸念どおりブラウザのプッシュ通知は邪悪に使われはじめている。実装側はクリックまで購読確認を待つべき。 - mizchi's blog
追記: 2019/11/12 2年経ったけど体験が悪化し続けた結果、 Firefox がこの記事の通りになりましたね… www.fxsitecompat.dev プッシュ通知、ネイティブアプリの機能郡をWebに持ち込むPWA技術の売りの一つだが、当初から懸念されていたとおり、非常にノイジーなものとなってしまっている。自分も気づけばあらゆるサイトの購読確認を、無意識で拒否を押すようになってしまった。 hagex.hatenadiary.jp 少し前の記事。最近はどこかで wordpress のプラグインになったのか、目にする機会が非常に多くなり、非常にストレスフル。最初は技術的な目新しさからか、ある程度容認していたが、さすがにこの状況が悪化する一方で、本気でやばいんじゃないかと思っている。とくに初見のブログの記事を読む前に、購読確認が出るのが最悪の体験となっている。 そもそもプッシュ配信とは
【SUGEEEE】 Retool でローコードに業務用アプリ作って簡単に業務改善｜ノースサンド
こんばんは、ノースサンドのキングです。 今日はバックオフィスで大活躍のモダンなツール「Retool」を紹介します。 最近とある仕事でヘビーユーズしてますね、はい。 このツールを実際に使った人からは... このツールを使って１週間かかっていた業務が1日でできるようになりました！(40代男性)いくつもの画面をタブで開いて、あっちで検索、こっちで検索して情報収集しなきゃいけなかったのがこの画面一つ開いておけばわかるようになってとても便利です！！(20代女性)みたいな声が聞こえてきます。もう絶賛ですね。 Google検索しても日本語の記事が全然Hitしないので、これは布教しなきゃいけない！！！という勝手な使命感から記事にしました。 ご一読あれ。 ちなみに↑の怪しい広告とか勧誘みたいな引用コメントは 年齢 性別 共に架空のもので、冗談です。 実際に言われたわけではありません。ホントはありがとうくらい
不便で仕方ない「住所入力の全角・半角問題」はなぜなくならないのか 専門家に原因を聞く
ECサイトやSaaSのアカウントを作るため、入力フォームに全角で住所を打ち込み。番地や郵便番号などの数字は半角で書き、情報を登録しようとしたら「この情報は半角では入力できません。全角で入力してください」。よく見るとページ内に「番地は全角で入力してください」という注意書きがあったので、再度打ち直し──入力フォームを使ったことがある人なら、多くの人がこんな面倒な経験を味わっているのではないだろうか。 こういった仕様は巷（ちまた）にあふれており、ネットで「全角・半角問題」などと呼ばれている。ユーザーに不便を強いているにもかかわらず、このような入力フォームはなぜなくならないのか。 この課題のソリューションとして、ユーザーが入力フォームに打ち込んだ文を自動で半角・全角に統一するなどの機能を持つJavaScriptライブラリ「InputManJS」を提供するグレープシティ（仙台市）の若生尚徳さん（ツー
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
Windows：PowerAutomate Desktopをインストールして使ってみる
すげーのが出たぞーーー 誰よりも早く触って記事にしてみたかったので書きなぐってみた。 概要 PowerAutomate Desktopとは MS謹製のRPAツール。全てのRPA製品を過去にするかもしれないやべーやつ。 ついさっき(2021/03/02 23:00くらい)に発表されたばっかり。 インストールしてみる １. MSのサイトにアクセス インストーラをダウンロード インストーラを実行→[次へ]をクリック 同意して[インストール]をクリック インストール完了 起動→利用開始 [サインイン]をクリック メールアドレスを入力 アカウントを選択 完了 作成画面を確認してみる フロー名を入力 別窓が出てきた ...なんか色々項目多くない？ ざっくり確認してみた 変数 条件 ループ 遅延 システム ファイル フォルダー 圧縮 UI オートメーション UI オートメーション-Windows UI
iOSブラウザのセレクトボックスUIが使い辛すぎ問題 | キノコログ
WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザーが商品の購入を行う際に、必ず経由するであろう「フォーム」の入力。 ここがストレスなく入力できるかが、成約の肝となるのだが…。 ユーザーに入力する際に、選択肢の中から項目を選んでもらう「セレクトボックス」というものがある。 複数の選択肢の中から、ユーザーに選んでもらう、というフォームを設けたい場合は、「セレクトボックス」が最も使われていると思う。 （ラジオボタンやチェックボックスよりも癖がないため） 「セレクトボックス」とは、↓コレのことである。 今見ている端末によって、このSELECTの仕様が異なっていると思うが、iPhone端末はこんな表示になっている。 いわゆる
高齢者のユーザビリティ：課題と変化
65歳以上のユーザーは、Webサイトやアプリを利用する際に固有の課題に直面する。このユーザー層のデジタルリテラシーは向上しているが、デザインは高齢のユーザーに対応したものにする必要がある。 Usability for Seniors: Challenges and Changes by Lexie Kane on September 8, 2019 日本語版2020年6月17日公開 多くの裕福な国で、最も急速に増加している年齢層が65歳以上だ。グローバルに見ても、人は長生きするようになり、年を取っても元気でいられるようになった。Pew Research Instituteが実施した調査によると、2019年には65歳以上の人の73％がインターネットに接続していた（訳注：総務省の令和元年版情報通信白書によると、2018年の個人のインターネット利用率は、60～69歳で76.6％、70～79歳で5
Webアクセシビリティ難しすぎる問題
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
Webエンジニアとしていま知っておきたいWebアクセシビリティ
この文章について これは 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業界で「エンジニア」の肩書で仕事して
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
行政デジタル化、浸透の鍵はユーザーインタフェース (1/2) - ITmedia NEWS
菅義偉首相が、行政手続きでの押印の原則廃止を進めている。デジタル化を進める上で重要なのは、情報の表示の仕方や必要な情報を探す操作方法といった「ユーザーインタフェース」の改善だ。 菅義偉（すがよしひで）首相が、行政手続きでの押印の原則廃止を進めている。はんこは、署名の手間を省く便利な道具として普及した。押印をデジタル化できるかも、人々が使いやすさを感じられるかにかかっている。新型コロナウイルス対策の給付金支払いを巡る混乱で露呈したのは、デジタル化の遅れだけではない。単にサービスをオンラインで提供するだけではなく、情報の表示の仕方や必要な情報を探す操作方法といった「ユーザーインタフェース（UI）」を重視した利用者目線が不可欠だ。 「（求められているのは）まずUIを徹底的によくしろということだ」。平井卓也デジタル改革担当相は就任翌日の会見で、新設するデジタル庁の方針について聞かれ、こう強調した。
Flutter、Linuxデスクトップアプリの開発対応へ、アルファ版を発表。Canonicalと協業で
Flutter、Linuxデスクトップアプリの開発対応へ、アルファ版を発表。Canonicalと協業で Dart言語製のUIフレームワークである「Flutter」開発チームは、FlutterによるLinuxデスクトップアプリケーションの開発対応のアルファ版を、Ubuntuディストリビューションなどの開発元であるCanonicalと共同で発表しました。 Canonical enables Linux desktop app support with Flutter! Linux devs get Flutter support for their operating system of choice. Install the Flutter SDK via snap. Build and test on Linux using Visual Studio Code or Android St
“twitter.com”の「IE 11」と旧UIのサポートが終了 ～「GoodTwitter」拡張機能などに影響／サポート済みブラウザーやデスクトップ向けクライアントアプリへの移行を【やじうまの杜】
リニューアル第一弾となる新しいWeb UIのおしらせ
こんにちは、技術書典のWeb担当 @vvakame です。 そしてこの記事の編集を担当した技術書典代表 @mhidaka です。 一年の大半という長きに渡り、燻っていましたが遂にアーキテクチャを刷新した新しいWeb UIをリリースしました！ 大規模変更となるためOpt-Inでの公開です。一週間くらい様子を見て問題がなさそうであれば移行Stepを進め、Opt-Outに切り替えます。 ここまで大きな変化が技術書典WebのUIに起こったことはありません。不安に感じるかもしれませんが、 ユーザーにとっては変化がないことのほうが改善が行われないリスクだと判断しました。今後もやきもきさせてしまうことがあるかもしれませんが、暖かく見守ってください。 今回は何もかもを作り直しており、さらなる前進のための基盤を整えました。 アーキテクチャの刷新は大変に大きな変更なのでUIの構造自体は旧来のものを維持していま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Native for Webのこれまでから読み解くReact GUIのこれから
