少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
アクセシビリティに配慮したタブメニューの実装例 – TAKLOG
アクセシビリティに配慮したタブメニューの実装メモです。 タブメニューのHTML前回投稿した記事「タブやアコーディオンの非表示コンテンツにはhidden=“until-found”を使うべし」で触れたように、タブパネルの非表示の状態管理はhidden="until-found"、タブはa要素で実装するようにします。 タブが横並びの場合横並びのタブメニュー実装例
やさにちウォッチのルビ(ruby - ふりがな)のスタイル (改訂版)
この記事は アクセシビリティ Advent Calendar 2021 アイコン別ウィンドウで開きます の第1日目の記事です。 この記事は PowerCMS X Advent Calendar 2021 アイコン別ウィンドウで開きます の第1日目の記事です。 この記事は やさしい日本語 Advent Calendar 2021 アイコン別ウィンドウで開きます の第10日目の記事です。 ※ Advent Calendar用に新規記事の作成も考えましたが、ルビをフル活用した ウェブコンテンツに関する実装ノウハウとして纏まっているほうが後の役に立ちそうだったので大幅に加筆して、改訂版としました。 「やさにちウォッチ」 アイコン別ウィンドウで開きますは私たち(アルファサード株式会社) アイコン別ウィンドウで開きますが運営する「やさしい日本語の情報をやさしい日本語で発信する」オウンドメディアです。す
Focus visibleの導入: Snow Monkeyでドロワーメニューのフォーカスの枠線を表示させない方法 - Photosynthesic blog
こんにちは、みみです。 Snow Monkeyのドロワーメニュー、便利ですよね。でもモバイルでみた時にアレ？と思う人が多いと思います。ドロワーメニューの一番上のメニューにふわっとした枠線が付くやつ。アレを取りたいなーと思う人は結構居ると思います。 2020/12/13 18:25追記: Snow Monkey ver.12 より改善されて、フォーカスがでなくなっています！なので一番手っ取り早いのはSnow Monkeyをアップデートすることです！ というわけで、以下は、諸事情で今スグアップデート出来ない方や、:focus-visibleそのものに興味が有る方へのコンテンツとなります… でもあれって実はとても大事な線なのです。キーボード操作で画面を操作する人には命綱と言っても良いものです。いわゆるアクセシビリティに関わる処ですが、Snow Monkeyはアクセシビリティ対応も素晴らしく、キー
ハンバーガーボタン 何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku
もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン
:focus-ringの代用としてwhat-inputを試す - yuhei blog
前回の記事で紹介した:focus-ringのポリフィルはイマイチだった。element.focus()で制御したときにいい感じにならないというつぶやきを見て知った。 具体的な例として、モーダルを閉じた後の挙動について考えたい。 モーダルを閉じた後は、フォーカスはモーダルを開いたボタンに戻るように実装する。そのために、button.focus()のようにしてフォーカスをスクリプトで制御する。この際、:focus-ringのポリフィルだとfocus-ringが有効になる処理が実行されず、キーボード操作をしていても適切なスタイルが表示されないことになる。 調べてみるとWhat Input?という似たライブラリがあった。ユーザーの入力端末を検出する機能があり、同じくfocus-ringの制御をすることが目的らしい。:focus-ringのポリフィルとは違い、入力端末の検出結果をhtml要素の属性な
Solved With CSS! Dropdown Menus | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. Some of those solutions focus around not only making the web prettier, but making it more accessible, and making st
「画像置換はアクセシブル」じゃないよ、という話
少し前に Twitter などで触れてた話だが、Web Accessibility Advent Calendar 2016 5 日目の記事として出そうと思って置いておいたネタ。すでに最近では「いにしえのテクニック」となってしまった感もあるので、いまさらこんな話どうでもいいような気がしないでもないが、画像置換とアクセシビリティの話。 そんな訳で、先日たまたま、画像テキストのCSS置換に代わる2016年版のベストプラクティスという記事を読んだ。簡単に言えば「画像置換はやめて Web フォントや SVG、もしくは普通に img 要素使おう」という内容で、それ自体にはまったく異論がないのだけど、後半に書かれている次の一文だけはどうも引っかかった。 画像置換は、控え目に言っても少数の例でアクセシビリティの観点からいまなお妥当であるといえます。これは驚くことではないでしょう。なぜならこれらの手法を使
RedLine Magazine : 気になった初期化CSS
気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが
実践アクセシブルHTML - 可変フォントサイズとレイアウト
フォントサイズ固定に残念な思い 6月20日に、Macromedia Flash Conferenceへ行ってきました。その一番最後の時間枠は、FlashのコンクールというかコンテストというかでFlashの作品をいろいろ募集している、さまざまなサイトの紹介をするスペシャルセッションでした。こういった場では、かなり大きいスクリーンに画面を表示させて、たくさんの受講者みんなで見るというスタイルが採られるわけですが、いくら大きなスクリーンであっても小さな文字なんかを判読するのは困難です。 そのスペシャルセッションのスピーカーの方が、サイトの内容の一部を読み上げたりしながら、「あ、これはちょっと見づらいですね」などといいながら、フォントサイズを大きくしようとブラウザを操作したのですが、そのサイトは文字の大きさを固定しているようで、大きくできませんでした。ちょっと、その中のどのサイトだったかは定かでは
Markers
マーカーリスト Markersは、“モノ”選びの達人・マーカーという“ヒト”を通じて“モノ”と出逢えるショッピングサイト。Markers編集部と一緒に、こだわりの“モノ”選びをしてくださるマーカーをご紹介します。
ページをレイアウトしてみよう その1テーブルレイアウト
データシートのような表組みをWebぺージに掲載する手段は、HTMLのtableというタグを使うことである。行と列のセルを複数設定すると、ちょうど方眼紙のような体裁が作れることから、画像やテキストをWebページ上の好きな位置に表示させる代替手段に使われることもある。この方法をWebサイト制作用語で「テーブルレイアウト」という。 ■テーブルレイアウトの欠点 多くのサイトオーサリングツールがレイアウトの手段として「レイアウトグリッド」や「レイアウトテーブル」といった名前の機能を搭載している。方眼に見立てて生成したテーブルに素材を放り込むという作業手順は、紙ベースのレイアウト用ツールと操作感覚が非常に似ている。そのためデザイナーには馴染みやすく、学習もしやすい。HTMLだけでレイアウトの工夫が完結するため、サイトオーサリングツールで100%作業が完結させられる点も良いところだ。 ところがテーブルレ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transitioning Hidden Elements
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
http://shoonm.com/2010/03/html5css3.html
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
デザインってオモシロイ -MdN Design Interactive- TOP