アクセシビリティ対策

閲覧数: 25(0)

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際にも言ったように、見た目はバランス良くなったとしても記事へのアクセシビリティが低下するので、その対策を考えてみた。マウスの位置に反応して背景の色を変えてみたらどの記事が選ばれているか判りやすくなるのではないかと思い試してみた。実装結果はこんな感じ。

これなら背景色がライトブルーになっている記事が選ばれていると一目瞭然のはず。後はマウスを乗せた時の背景色の変わり具合の調整。単純にマウスを乗せた時に背景色が変わるのでは味気ない。あまり手の込んだスクリプトやライブラリは今回は使いたくない。いろいろ悩んだ結果がこれ。この一見単純なCSSにより、マウスが乗ると右から左に向かってライトブルーの帯が移動する感じで変化するようになります。スマホからでは確認出来ません。マウスカーソルが必要です。単純な割に動きがあって気に入っています。

  .post-archive .hentry:hover {
    background: linear-gradient(to left, lightblue 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}
カテゴリーIT閑話, 公開タグ, ,
ページナビのテキスト
blank
2021年4月1日

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank
2021年3月25日

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

閃きは大事だw
blank
2021年3月23日

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

ElasticPress 3.5.6
blank
2021年3月19日

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

管理画面を制限する
blank
2021年2月22日

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

検索精度を高める
blank
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

スポンサーリンク

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください