PDFをdownloadさせるlinkはfile名だけで判断させず内容と更新日を本文へ書く
- PDFをdownloadさせるlinkは、file名だけで判断させず、内容、対象者、更新日、HTMLの案内を示します。差し替えと削除の作業を分け、古い資料へ読者を送らない方法を解説します。
カテゴリー: ホームページ制作
電話番号のtel linkは発信させたい番号だけへ付け受付時間と用件を本文へ残す
- 電話番号のtel linkは、発信を受ける番号だけへ付けます。受付時間、受ける用件、formとの役割、休業時の案内を分け、読者が電話する前に判断できる状態を作る方法を解説します。
WordPress 4.8のtext widgetは文章を飾る前にsidebarへ置く情報を決める
- WordPress 4.8のtext widgetは、文字を整えてsidebarへ置けます。本文の代わりにせず、置く情報、link先、theme変更後の確認を分けて考える方法を解説します。
aria-liveは画面内で変わった結果だけを短く伝えform全体を読み直させない
- aria-liveはJavaScriptで変わった結果をスクリーンリーダーへ伝える属性です。formのerrorや送信結果を短く知らせ、politeとassertiveを分け、画面の本文と同じ案内を確認する方法を解説します。
WordPress 4.8の画像widgetは画像を置くだけで終わらせずlink先と代替textを確認する
- WordPress 4.8の画像widgetは管理画面からsidebarへ画像を置ける機能です。画像選択だけで終わらせず、link先、代替text、表示するpage、スマートフォンでの見え方を確認する方法を解説します。
WordPressの検索結果が0件なら空のpageにせず検索語を残して探し直せる入口を置く
- WordPressのsite内検索で結果が0件のときは、空の検索結果pageにしません。検索語、探し直すform、関連する分類、問い合わせ先を分け、読者が次に進める案内を作る方法を解説します。
fetch()は404を通信失敗として扱わずresponseのstatusを確認する
- fetch()はHTTP 404や500を受けてもresponseを返します。通信できない場合、HTTP status、本文の形式、画面へ出す案内を分け、問い合わせformや一覧の失敗を確認する方法を解説します。
WebP画像は変換して終わりにせず写真と透過画像を分けて配信条件を確認する
- WebPは写真と透過画像を圧縮して配信できる画像formatです。変換後の見た目、必要な透過、表示できない環境の代替画像を分け、画像を軽くする目的と公開後の確認方法を解説します。
disabled属性は送信しない値に使い確認画面で見せる入力はreadonlyと分ける
- disabled属性を付けたform controlは利用者が操作できず、送信時の値にも含まれません。確認画面ではreadonlyやhidden inputと役割を分け、送信結果まで確認する方法を解説します。
sessionStorageは同じ閲覧画面で続ける入力の補助に使い注文や問い合わせの正本を保存しない
- sessionStorageは一つの閲覧画面で続く入力を補助する保存領域です。localStorageやserver保存と混同せず、入力途中の表示と注文、問い合わせの正本を分ける方法を解説します。
position: stickyは常時表示したい部分に使い親の範囲と本文を隠さないようにする
- position: stickyは親の範囲内で要素を表示位置へ留めるCSSです。position: fixedと混同せず、本文を隠さない幅と高さ、狭い画面での解除を確認する方法を解説します。
linkは移動に使いbuttonはpage内の操作に使う
- linkは別のURLへ移動するため、buttonは同じpage内の操作を実行するために使います。見た目で置き換えず、keyboard操作と戻る操作で確認する方法を解説します。
aria-labelは文字のないbuttonへ操作の名前を付け見た目の文言と分けて使う
- aria-labelは文字のないbuttonやlinkへ操作名を付ける属性です。見た目の文字を隠す道具にせず、何をするbuttonかをHTMLと画面で一致させる方法を解説します。
aria-currentはmenuの現在pageだけへ付けリンク先と現在地を分けて伝える
- aria-currentはmenuやパンくずで現在地を示す属性です。現在pageだけへ付け、link先を示す役割と現在地を伝える役割を分ける方法を解説します。
CSSのoutlineは消す前にkeyboardで移動した位置を見えるようにする
- CSSのoutlineを消すと、keyboardで操作する人が現在位置を見失うことがあります。link、button、formでfocusを見えるようにし、実際にTabで確認する方法を解説します。
CSS Gridは二次元の配置が必要な部分に使い既存layoutの置換と分ける
- CSS Gridは行と列を同時に決めるlayoutです。card一覧や情報のまとまりに使い、既存layoutの全面置換と混同しない設計と確認方法を解説します。
