table要素をスクリーンリーダーが表として扱うかはCSS次第だったりする件
2017年12月4日 著 みるく姐さん@milk54さんが、Web Accessibility Advent Calendar 2017の2日目のために、Re: A Responsive Accessible Tableという記事を書いてくださいました。その中で、A11YJ Slackの#q_and_aチャンネルにおける自分の発言を引用してくださったのですけど、それでふと思ったのがアクセシビリティオブジェクトの存在って実はあまり認知されていないかもしれない、ということです。別の表現をするなら、CSSをどう書こうともマークアップで意図したセマンティクスが変わることは無いと信じて疑わない人が少なく無いかもしれない、ということ（自分もかつてはその一人でした）。 @milk54さんの立てた「NVDAがなぜCSSでdisplay: blockにすると「テーブル」と読み上げないか？」という問いの裏には
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
