ブラウザのキーボードを制御する inputmode
October 26, 2019 created( August 1, 2022 updated ) input[type]によるキーボードの表示制御Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。 例えば、type="email"を指定すると、 <input type="email"> emailが入力しやすいキーボードが表示されます。 しかし、この指定方法には副作用もありました。 例えば、type="number" を指定した場合、 <input type="number"> このように、入力フィールド内に余計な入力補助要素 が表示したり、フィールドにhoverした状態でmouse wheelを動かすと 入力済みの値が勝手に増減 したりします。 前者はCSSで後者はJava
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
フォームの入力必須項目のマークアップ | Accessible & Usable
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : ユーザビリティ / アクセシビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
How To Use WordPress Tutorial [2024]
What’s up y'all! More the reading type? Looking to start a website? The post: WordPress is definitely a solid choice for creating awesome, professional websites. Now you’ve just got to figure out how to use WordPress… Good news: as always, we’ve got your back fam! Here we’ve got a complete walkthrough of one of the best tools for building a website best website builders around including what you n
![How To Use WordPress Tutorial [2024]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c951618c3f76b3491f33f029f93696b921f1280/height=288;version=1;width=512/https%3A%2F%2Fe8y8n8b5.rocketcdn.me%2Fwp-content%2Fuploads%2F2020%2F01%2Fcapw-featuered-graphic-how-to-use-wordpress.jpg)
（ＢＬＯＧ）リンク・フォーカス時の点線が画面外まで拡張される問題
text-indent: -xxxxemの弊害 CSSを使ってJavascriptのロールオーバーイメージを実現する方法は既に一般的になって、あちこちのサイトでも見られるようになりました。 ところが、問題点をいくつか見つけたので書いておきます。 自分のサイトの粗が出る「諸刃の刃」のような記事になりそうで本当は書きたくなかったんですが... まずはじめにCSS背景切り替えの概要Firefox1.5でクリックした時に左に長い点線の枠が出現するタブキーで現在位置が分からなくなる解決策というより、気休め的な方法過剰な見栄え制御決定的な回避策(アクセシビリティ向上案) まずはじめにCSS背景切り替えの概要 あちこちのサイトやCSS関連の書籍で紹介されていると思いますので、ここでは軽く書きます。 リンクの画像にマウスが重なるとその画像が切り替わるという仕掛けです。 このサイトのヘッダー部分にあるナビゲ
TRANS - alt=""を越えて。
集中的にアクセシビリティやユーザビリティを最近になってやっと学び始めました。JIS X 8341やWCAG1.0を読み進める中で、もっと自分自身勉強したいと思うようになってきました。そこで、JISやWCAGを学ぶ中で、自分がシニアや障害を持つ人との現場で、またそういった現場で働いている人たちの意見を踏まえた上で、疑問に思うことを列挙しておこうと思います。いずれは、こういうことをちゃんと実装レベルで解決できるようになりたいなと思いを込めて。 alt=""は空文字なのか、半角スペースなのか、それとも全角スペースなのか？ 少し前に「ブロガーのためのアクセシビリティガイドライン」を書きました。この際に、はじめはalt=""と空文字を打つと書いていたのですが、よくよく調べてみると、空文字だと音声ブラウザによっては「画像」と読み上げてしまうことがあるようです。また、全角スペースの場合は、日本語環境以外
ページ内リンクはどう実装すべきかについて考えてみた。
ナビゲーションスキップは主に音声ブラウザ向けに、グローバルナビゲーションなどをスキップするために実装されるものだが、前々からずっとナビゲーションスキップをどのように書けば最適なのか、についてはずっと疑問に思ってきた。というわけで、調べてみた。 前提：まずは最適なHTML（XHTML）を書くこと。 これが大前提。音声ブラウザによっては、heading要素（h1とかh2）を順にスクロールすることができるから。というわけで、XHTML＋CSSによるWeb標準での実装は大前提。というより、これをしっかりと書いておけば、ナビゲーションスキップを埋め込まなくても、音声ブラウザにとってはテーブルレイアウトに比べて、かなり便利になるようだ。 検討事項その1：そもそもナビゲーションスキップは見えるようにすべきか否か。 ナビゲーションスキップを見えるようにするべきか、しないべきかについて、まず考えておく必要が
Dive Into Accessibility
この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）をダウンロードする HTML（英語版）をダウンロード PDF（英語版）をダウンロード Dive Into Accessibilityを読む 目次 掲載された順序のままにならべてある、すべての情報はこちら。はじめてココ の文を読むときにおすすめの読み方。 人に基づいた情報分類 ここではどんな人に役立つかによって、情報が分けられています。 障碍に基づいた情報分類 ここではどういった障碍があるときに役立
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
マイクロソフト アクセシビリティ ホーム
マイクロソフトの製品などについてお問い合わせしていただく際は、チャットや電話やコミュニティへの質問を選択いただけます。 お電話が難しい場合はチャット、チャットが難しい場合はお電話など、ご自身の状況にあった方法でお問い合わせいただければと思います。 メールとFAXによるお問い合わせの受付は 2020 年 8 月末日をもって終了させていただきました。 チャットでお問い合わせをしていただくことで、より迅速に回答させていただき、オンラインサポートをさせていただくことも可能になります。
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
FPN-団塊〜シニア層向けのWeb設計 やっちゃいけない10のＵＩ
6．ビジネス分析フレームワークを学ぶ ビジネス分析フレームワークの学習と使い方 ビジネス分析 フレームワークや 経営学 の学習をどうビジネスリサーチに役立てるか、その考え方と留意点について解説します。… 2021.05.08 2021.05.09 115 view 3．ビジネスリサーチの報告書作成 ファクト、ファクト、ファクト〜事実に基づくこと 「What's Your Story?」という提案や提言がないレポートは意味がない、ということがよく言われますが、ビジネスリサーチの報告書は、内容の8〜9割は ファクト … 2021.01.19 2021.05.16 303 view 4．インプリケーションと提言 リサーチを通じて気付いたことは？公開情報から点と点を結ぶイン… インサイダー情報はそのままでは役に立たない！？ビジネスリサーチの依頼の中で、「業界の空気感はどうなっているか？」「この技術
シニアはログインでつまづく？！ - Trans
最近、シニア向けのあるWebサービスを構築している。その中で、シニア（特に、団塊世代、もしくはそれ以上）の方が、どういったところでWebサービスにてつまづくのかが少し分かってきたので、自分の備忘録も兼ねてメモしておく。 先に言っておくと、シニアはまずログイン、もしくは新規登録でつまづく。「中に入れない」「何かパスワード間違えているみたいなんだけど」そういった質問が、どんどん寄せられる。このWebサービスを構築する前に、できる限りネット上でシニアのネット行動特性みたいなものは調べてみたが、その多くは「ログイン後」、もしくは「ログインする必要がないサイト」のことだったと、今更ながら気が付いた。例えば、 ユーザビリティ研究所: シニア向けウェブサイト構築のための10のポイント 使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から) そう、シニアのネット上の行動特性はある程度研究が進ん
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選