サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
qiita.com/ymrl
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー(<input> 要素や<textarea> 要素の <placeholder> 属性)の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
開発している Web アプリケーションをスクリーンリーダーでも扱えるようにするにあたって、 VoiceOver を使いはじめてみたら思ったより簡単だったので、やり方についてまとめてみます。 この記事内では macOS High Sierra (10.13.6(17G65)) を前提としていますが、 VoiceOver の操作方法などはバージョンが変わってもあまり変わらないんじゃないかと思います。 VoiceOverとは Appleが macOS や iOS に搭載しているスクリーンリーダーです。視覚障害者向けに画面上に並んでいるものを音声読み上げしてくれます。 視覚のアクセシビリティ - Mac - Apple(日本) 視覚のアクセシビリティ - iPhone - Apple(日本) VoiceOver は macOS に内蔵されているので、 Mac さえあれあばスクリーンリーダーを試して
この記事は freee Engineers Advent Calendar の1日目です。 こんにちは。freee株式会社でフロントエンドエンジニアをしている @ymrl です。freeeでは給与計算freeeの開発をしています。 僕はフロントエンドエンジニアを名乗っていますが、実際はサーバーサイドの開発もしています(freeeではフロントエンドとサーバーサイドの担当に線引きをしていません)。しかし自分としてはフロントエンドのほうが得意だし、UIを作るのが心底楽しいし、サーバーサイドに比較的苦手意識を持っています。 今日はそういう状態の僕が、どういうふうに開発しているかという話をします。 技術に自信がないのでペアを組んだ 給与計算freeeの開発チームでは、ひとつの機能を開発するときに エンジニアのペア制 というのをとっています。 かつて僕が給与計算freeeのチームに異動してすぐの頃、僕
会社の人が書いたRubyのコードの正規表現で /[\p{katakana}]*/みたいなのがでてきて、なんだこれって思ったので調べた。 へー 'アイウエオ' =~ /\A[\p{katakana}]+\z/ #=> 0 'あいうえお' =~ /\A[\p{katakana}]+\z/ #=> nil 'アイウエオあいうえお' =~ /\A[\p{katakana}]+\z/ #=> nil 'イロハニホヘトチリヌルヲ' =~ /\A[\p{katakana}]+\z/ #=> 0 'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセス' =~ /\A[\p{katakana}]+\z/ #=> 0 'イロハニホヘトチリヌルヲワカヨタレソツネナラム' =~ /\A[\p{katakana}]+\z/ #=> 0 'テンノウズアイル' =~ /\A[\
こんにちは、freee株式会社 の @ymrl です。フロントエンドエンジニアなるものをしています。 この記事は freee Engineers Advent Calendar の2日目です。 革命について freee では最近フロントエンド開発を取り巻くいろいろなものを大きく変化させていて、これを 革命《レボリューション》 と呼んでいます。これはフロントエンド界の地殻変動の速さに付いて行きづらくなっているRailsアプリケーションのフロントエンドをエイヤッと近代化して、具体的にはRailsが用意している Sprockets によるフロントエンドの precompile のレールからはずれようとする動きです。 主力サービスである 会計freee は、最初のgitリポジトリへのコミットが2012年7月で、開発初期から jQuery UI や各種 jQuery プラグインや Backbone.
社内向けに書いたドキュメントが好評だったので公開しちゃいます。 基本編1 本体と三角形を分けて実装します <div class="balloon"> こんにちはこんにちは! <div class="triangle"></div> </div> .balloon { position: relative; width: 200px; height: 30px; background-color: #ccc; text-align: center; } .balloon .triangle { position: absolute; bottom: -10px; left: 50%; margin-left: -10px; width: 0; height: 0; border-top: 10px solid #ccc; border-left: 10px solid transparent
<form method="post" action="/"> <div> <label> username <input type="text" name="username" /> </label> </div> <div> <label> password <input type="password" name="password" /> </label> </div> <div> <input type="submit" /> </div> </form> とりあえずユーザー名に myname@example.com パスワードに password とか入力して送信して、またこのページに戻ってくるとユーザー名とパスワードが自動入力されます。 同じサイト内のパスワードフィールドのあるフォーム この状態で同じサイト内の他のパスワードフィールドのあるページに移動してみます。 <form
このページを最初にブックマークしてみませんか?
『@ymrlのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く