Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

目に見えないフォントを使ってメニューボタンをもっとアクセシブルにしてみた

最近アクセシビリティの勉強を始めました。
そこで、アクセシブルなオフキャンバスを開閉するメニューボタンを実装してみました。
見えない文字がメニューボタンに埋め込まれているので目が見えない人もスクリーンリーダーを使ってメニューボタンの存在に気づくことが出来ます。
ここで利用したのが文字が表示されないAdobe製のフォントです。下のリンクよりダウンロードできます。


HTMLやCSSの実装も簡単でfont-familyを指定するだけです。

CSS

@font-face{
	font-family:Blank;
	src:url(%{HTTP_THEMES_DIR}callisto@blog2015/font/AdobeBlank.otf);
}
.hideVisually{
	font-family:Blank;
}

HTML

<button class="blogHeaderNaviBtn" id="nav-open-btn">
	<span class="blogHeaderNaviBtnLine"></span>
	<span class="blogHeaderNaviBtnLine"></span>
	<span class="blogHeaderNaviBtnLine"></span>
	<span class="hideVisually">メニュー(オフキャンバスメニューを開閉します)</span>
</button>

堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド