このサイトのWordPressテーマを自作

Posted on

テストツールを通してみたら通ったので、調子に乗り😅WordPress の公式テーマに申請www、あえなく撃沈!!
PageSpeed Insights でスピードチェックも2回目は80台そこそこ^^; 記念にスクリーンショットを撮っててよかった… 何の記念なんだか!! 

投稿フォーマットを有効にしたので、早速試しています。

alignfullクラスの全画面表示、コンテナでラップしている場合、特にサイドバーがある場合どうしたらできるの??

ググったら、マイナスマージンを発見!! 

こちらも早々試しました… でもサイドバーがあるのにあえて、画像をコンテナからはみだして表示する必要はないような…😅

アクセシビリティーの項目について、いただいたフィードバックと合わせて、内容を理解するためにまとめました

キーボードナビゲーション

Tabキーで次の項目に進み Shift + Tabキーで戻る操作

マウスで実行できるアクションはすべて、キーボードでも実行でるがことが原則

ドロップダウンメニューではサブメニュー内もタブで移動し、離れたら閉じる

ハンバーガーメニューや検索アイコンなどのToggleMenuの場合は、最後のメニュー項目をタブで通過すると、フォーカスは閉じるボタンに移動するか、メニューを閉じる。 また最初の要素でShift + Tabキーを押すと、閉じるボタンにフォーカスが移動する(この時にShift + Tabキーを押すと、メニューの最後の要素にフォーカスが移動)

要するにループする必要があるようです

フォーカスについては、色に基づかない視覚的な変更(背景の変更、下線、形状)、または2つの色の違いが色のコントラストのガイドラインを満たす色の変更を組み込む必要がある(tabindexの使用は推奨されない)

ブラウザのデフォルトのアウトラインをnoneにしないことですね

button{
  // outline: none;
}
input{
 // outline: none;
}
a{
 // outline: none;
}

投稿コンテンツやコメント内のリンクは下線を引く(コンテンツ内のリンクを示すために受け入れられている唯一の方法とのこと)

フォーム

デフォルトのWordPressコメントまたは検索フォームを使用している場合、これらはアクセシビリティ対応の基準に合格するが、変更する場合はラベルが必須、送信ボタンを非表示にする場合はscreen-reader-textを使用すること(検索ボタンをアイコンにするとscreen-reader-text必要ですね、検索フォームはラベルは要求されていない感じです)

グローバルナビゲーションをスキップできるようする

<body id="top" <?php body_class(); ?>>
	<?php wp_body_open(); ?>
	<a class="skip-link" href="#content"><?php esc_html_e('Skip to content', 'テーマ 名'); ?></a>
//省略
</header>
	<div id="content">
.skip-link {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    &:focus {
        position:absolute;
        left: 20px;
        top: 20px;
        background: #ffffff;
        padding: 10px 15px;
        width:auto;
        height:auto;
    }
}

今までハンバーガーボタンにはお決まりでつけたいただけのaria属性を少しずつでも理解していきたいと思います