月: 2021年7月

Webアクセシビリティで、選択状態を伝えるaria-selected。ナビゲーションのaタグに、現在選択しているページとして設定したくなりますが、その使い方は誤りです。

間違ったaria-selectedの使い方

例えば企業サイトで「商品情報｜企業情報｜お問合せ」というナビゲーションがあったとします。

現在、表示されているページが企業情報のとき、下記のようなaria-selectedの使い方は誤りです。

企業情報ページが選択されているという解釈で、aria-selected=”true”を使いたくなるかもしれません。私は誤って使っていました。

aria-selectedを使えるタグは？

aria-selectedを使えるタグが気になって調べました。

使えるかどうかはタグではなく、ロールで決まるようです。

WAI-ARIAの解説では、４つロールが記載されています。

gridcell、option、row、tab。

思った以上に限られていますね。optionは普通のselected属性を使うため、一般的なWebサイトだと、tabぐらいしかaria-selectedを使う機会はないかもしれません。

ページナビゲーションのaタグ（linkロール）に、aria-selectedを使うのは誤りでした。

aria-selectedは間違いやすい

私と同じような誤りをしている人はいるようです。

海外のサイトで、aria-selectedの誤用を指摘している「aria-selected – when (not) to use it」という記事がありました。

詳しくは書かれているので、参考になります。

ページナビゲーションの現在位置に使うのは、aria-currentが適切です。

ごくまれにクリッカブルマップのコーディングを行います。「Image Map Generator」を使うのが早いです。より正確にエリア指定をするときは、ブラウザを拡大しましょう。

直感的な「Image Map Generator」

「Image Map Generator」は英語ですが、操作性がよく、HTMLコーディングをやっていれば迷わず使えるジェネレーターです。

画像上のリンクエリアを、クリックで囲んでいきます。

ただし、そのままでは直線を引くといった、精度の高いエリア指定は難しいと思います。

400％くらい拡大しよう

ブラウザには拡大機能があるので、これを利用します。

400％くらいまで拡大すれば、エリア指定はより簡単で正確になります。

エリア指定が終わり「Show Me The Code!」を押せば、でクリッカブルマップのコードが表示されます。

長男（小5）が世界に興味を持てず、学校のテストも壊滅的な状態でした。国や地域を覚えるきっかけになればと、地球儀ARを導入してみます。使ってまだ2日ですが、子供が興味を持つ良い商品だと感じます。

ARと地球儀の相性は抜群

「ほぼ日のアースボール」という、地球儀とARを組み合わせた商品があります。

Amazonで3,980円。地球儀にしては安い方でしょう。

スマホやタブレットに専用アプリをインストールして地球儀にかざせば、国旗などの情報を見ることができます。

国だけではない充実したコンテンツ

アプリでは、ほぼリアルタイムの地球の雲のようすや、気温を見ることができます。他にも恐竜の分布といった子供が楽しめるコンテンツが全部で19種類あります。（2021年7月現在）

長男は気温が好きで、国を覚えようとはしません。しかし、気候から興味を持つのも良いでしょう。

三男が国や国旗に詳しい

小5の長男が、小1の三男に国の問題を出していました。

自分がテストで分からなかったので、分からない仲間が欲しいようです。もしくは、弟と比べて安心感を得ようとしているのか？

長男「この緑の国旗は？」

三男「ブラジル」

長男「・・・。」

長男「この国旗は？」

三男「カナダ」

長男「・・・この国旗は？」

三男「韓国」

長男「・・・オーストラリアはどこ？」

三男「ここ」（正解）

長男「マジかよ・・・。」

私もマジかよと思いました。保育園で国旗の本を三男が好んで読んでいたことは知っていましたが、正確に記憶しています。

長男の学習用のつもりでしたが、三男の好奇心を伸ばすのにも役立ちそうです。

次男、四男も興味深く地球儀ARを見ており、教材としてはコストパフォーマンスが高く、お勧めです。

被保険者報酬月額算定基礎届を電子申請をしようとして苦労しました。日本年金機構の説明動画を見たのですが、「簡単」「簡単」と繰り返されており、先に進まず・・・もうその時点で簡単ではなかったです。

「簡単」であることの説明に1分以上

※2021年7月の情報です。動画が今後差し替わる可能性はあります。

日本年金機構の電子申請ページに利用案内動画が２つあります。

上の動画が導入編？下が詳細編のようです。上の「GビズIDと届書作成プログラムを利用した電子申請」を再生しましょう。

YouTube広告が再生された後、オープニングで「いつでも、どこでも、簡単に！」というナレーション入りのタイトルが表示されます。

そこから、タブレットの変身シーン（？）を挟み、1分10秒あたりでまた「いつでも、どこでも、簡単に！」が再生されます。

・・・進まない。最初の広告と合わせて1分半は、本編までの待ちです。

現時点で5万回再生。人件費は1分半で100円程度なので、すでに全国500万円分の人件費を消耗しています。

本当に簡単なら、1分半で説明が終わっているような。

「簡単」「簡単」と繰り返す時点で、時間を消耗するため、必然的に簡単ではなくなります。

「簡単」連呼、再び

申請方法の確認で、より必要なのは下の動画「届書作成プログラム操作説明編」です。

また広告の後、「はじめてでもわかる！」「簡単に！」「電子申請が簡単にできる」と、30秒間ナレーションが入ります。

・・・何度「簡単」を聞けばいいのか。

実際は最高難易度のシステム

3時間くらいかけて電子申請をしました。

ここまで簡単ではないシステムは久しぶり。過去最高難易度だったかもしれません。

YouTubeのコメントでも「難しすぎる！」「表現してる内容の意味が解らない！」「郵送の方が比較にならないほど簡単」と声が上がっています。その通りです。

おそらく指揮系統・体制の問題で、思うように開発はできないと思いますが・・・全国で経理処理の人件費を不毛に消費するので、改善を願います。

前回に引き続き、マグネット式シャワーフックを作っています。最終的に６つのネオジム磁石で、安定して使えるフックが完成しました。

補助具を３Dプリント

前回作ったシャワーフックの下に添える補助具をプリントします。

補助具には、3つの磁石を仕込めるようになっています。

シャワーフックと補助具は磁石で吸着するため、ネジ止めは不要です。

ついに安定したフック

６つのネオジム磁石を使うことで、ようやく安定して使えるフックが完成しました。

しかし、シャワーフックがなくなった期間が長すぎて、誰もフックを使いません。

シャワーを床に置くクセが出来ていました。

シャワーを使い終わったら、フックにかけるよう周知徹底も必要です。

浴室のシャワーフックがなくなり、３Dプリンターで作っています。前回はフックに仕込んだ磁力が弱すぎて失敗しました。今回は３倍の磁力で試します。

３倍ネオジム磁石

浴室の壁に磁石でシャワーフックを取り付けます。

前回は20mm×5mmのネオジム磁石１つを使い、磁力が足らず耐えられませんでした。

今回は３つの磁石を仕込めるようにします。

３倍の磁力となりました。

ネオジム磁石は１つでも超強力です。

これで固定できるか・・・？

まだ磁力が足りない

一般的なシャワーヘッドなら耐えられると思いますが、うちのシャワーヘッドは重すぎて、フックが傾いてしまいました。

感覚的に４つの磁石では不安。５つでギリギリ。６つで安心。

あと３つ磁石が入るように改修します。

なぜか浴室のシャワーフックがなくなりました。探しても見つかりません。あきらめて３Dプリントしましたが、シャワーヘッドの重さに耐えられず、失敗です。

シャワーフックを３Dプリント

シャワーの付け根のサイズを測り、シャワーフックをモデリングしました。

強力ネオジム磁石を差し込める穴を空けています。

お風呂場に壁は磁石がくっつきます。

・・・少し、磁力が足りないような。

うちのシャワーヘッドは重くてデカいです。

シャワーヘッドをかけて手を離すと、フックが外れてしまいます。

これは失敗。

磁石の量を増やせる形状に改修します。

鍋を見事に焦がしました。重曹を使うと魔法のようにキレイになります。今まで試さなかったことを後悔するほど、簡単に焦げ付きが落ちます。

鍋を焦がす

ジャガイモを少量の水分で煮込んでいたら、鍋を焦がしました。

たわしで焦げを付きを落とすのは、なかなかの重労働です。

そこで、有名な重曹を使う方法を試しました。

100円ショップで重曹購入

ダイソーでたっぷり入った重曹を買えます。

鍋に焦げが浸るくらいの水を入れ、スプーン2杯くらいの重曹を入れます。

鍋の水を沸騰させる

鍋を加熱しましょう。そして菜箸で混ぜます。

沸騰している鍋をかき混ぜると、黒い焦げが落ちていくのが分かります。

「コゲ落とし」で仕上げ

お湯を流すと、鍋の焦げは9割型落ちていました。

残りはダイソーで買った、フライパンの焦げ落としを使います。

少し磨けば、すべての焦げが落ちます。

見事にキレイになりました。

なんで今まで、たわしと洗剤を使っていたのか・・・。

子供たちに早めに焦げ落としの知識を伝えられたことは良かったです。

リモート会議中にヘッドセットの電源が切れる凡ミスをしました。ヘッドセットに充電ケーブルを挿すのを限りなく簡単にして、充電を習慣化しましょう。

マグネット式USB充電ケーブル

ケーブルと端子がマグネットで脱着可能なUSB充電ケーブルがあります。

ワンタッチで充電可能になります。

習慣的に充電を行うには、その行為自体を簡略化するのが良いと言われます。

ヘッドセットを使い終わったら、マグネットでパチッと充電開始できるようにしました。

複数の機器を１つのケーブルで充電

端子をヘッドセット、ヘッドホンなど複数の機器に差し込んでおけば、１つのマグネットケーブルで充電できるようになります。

ただし、私の持っている骨伝導ヘッドホンは、充電カバーを開けて端子を差すと、カバーが耳の裏に当たってしまいました。

全ての機器で、使えるわけではありません。

マグネットは壊れやすい？

1回目の脱着で、マグネットが外れました。

よくあることなので、これくらいであれば接着剤でくっつけて直しましょう。

ヘッドホン初心者が、耳が痛くならないヘッドホンを探して迷走しています。最終的に、オーソドックスなオーバーヘッド型が良いという結論になりました。

骨伝導ヘッドホンは締め付けが痛い

テレワークの時、ヘッドホンを付けることが多くなりました。

電話や来客に気づけるよう、耳をふさがない骨伝導ヘッドホンを購入しました。

しかし、実際つけてみると締め付けが痛くて長時間使えません。

長時間利用なら、オーバーヘッド型が良いという情報があり、あきらめて買い直しました。

Anker Soundcore Life Q30

外音取り込み機能があり、1万円以下のヘッドホンを探します。

見つけたのが「Anker Soundcore Life Q30」です。

ヘッドホンに慣れていないためか、大きくて圧迫感あるような気もしますが、骨伝導のネックバンド型より、長時間利用で痛くなりません。

そして音の良さに驚きました。

ヘッドホンによって音が全然違うものなのですね。

音楽を流すと、テンションが上がります。

一つだけ問題があるとすれば、外音取り込みが思ったほど性能が高くないこと。

耳をふさがないタイプに比べれば、やはり聞こえづらくはなります。