てまりのユニバーサルデザイン

ひかり電話をauからNTTに切り替えたところ、固定電話から携帯電話へ発信ができなくなりました。固定電話の設定で、「選んでケータイ」を解除すると解決します。

携帯電話へかけられない

ひかり電話をauからNTTに切り替えました。

問題なく開通していると思っていたのですが、固定電話から携帯電話へつながらないことが発覚しました。

携帯電話へ発信すると、「先頭が０から始まる電話番号にはおつなぎできません」とナレーションが流れます。

これは困ります。・・・0から始まらない携帯番号なんてあるのか？

この現象は固定電話から携帯電話へかけるときだけに発生し、何か番号が自動で付加されているような気がします。

「選んでケータイ」を解除

Googleでこの問題を検索してみます。

Panasonicのよくある質問で「ひかり電話にしてから「00で始まる番号」にかけられない」の回答がありました。

「選んでケータイ」という機能が悪さしているようなので、解除にすれば解決すします。

固定電話の型番ごとに解除方法が書いてあるので、操作手順に従います。

「選んでケータイ」を解除すると、無事、携帯電話にかけることができました。

ひかり電話切り替え時は要確認

今回我が家では、子供が親の携帯電話にかけられない問題が発生しました。

ひかり電話切り替え時は、携帯電話にかけられるかもチェックしておいた方が良いようです。

スマホサイトを作る時、ボタンサイズはどれくらいが良いか、アクセシビリティガイドライン（WCAG）やApple、Googleサイトを参考に考えます。44px以上、無理がなければ48px以上で良さそうです。

WCAG関係なく44px以上がおすすめ

WCAG2.1（英語）※日本語解説では、「ターゲットは少なくとも 44 × 44 CSS ピクセルである必要がある」という基準があります。

Level AAAの達成基準といのは、公共サイトの法定基準や企業サイトの努力目標のAAを超えています。そのため、アクセシビリティ検証では意識する機会が少ないと思います。

ただ、ボタンの押しやすくすることで、多くのスマホユーザーのストレスを軽減できるメリットがあります。

アクセシビリティ基準値関係なしに44px以上のリンク範囲を確保すると良いでしょう。

無理がなければ48px以上

スマホ、ブラウザを作っているAppleとGoogle。どちらもアクセシビリティの意識が高い企業です。

この２つのサイトも参考に見てみます。

Apple、Googleのボタンは、それぞれ、48×48px、56×51pxとなっていました。

余裕があればボタンのサイズを48px以上、確保しても良いでしょう。

日本の場合、Apple、Googleほどシンプルに設計するのが難しく、ぎゅうぎゅうに詰め込むことも多い思うので、本当に設計に余裕があれば。

デザインに迷わない

ボタン最小サイズは44px、可能であれば48px。

アクセシビリティ基準の魅力は、デザインを定量化できるところです。

タップ可能な範囲を44pxと意識していれば、ボタンサイズ、アイコンサイズ、余白が決まってくるので迷いません。

ボタンを押しやすくなるだけではなく、デザインの効率化も図れます。

+Styleのスマートプラグを購入しました。他のスマートプラグと違い、使用電力を計測して、それをトリガーにできるのが魅力です。今回は使用電力の計測だけ試しました。

充電器の使用電力計測

RAVPOWERの65W充電器の使用電力を試します。

この充電器、コンセントに挿しているだけで、待機中も熱くなります。

+Styleの専用アプリで使用電力を確認してみると、常時3.3W消費していることが分かりました。

アプリでほぼリアルタイムで使用電力を計測できます。

そしてこの数字で見ると、電力がもったいなく感じ、充電器を抜きたくなります。

これは教育に良いかもしれません。

エコや防災の観点で、子供に使用電力を学ばせるときに、+Styleのスマートプラグは役立つでしょう。

楽天モバイルの5G提供エリアを参考に、5G基地局周辺へ行きました。iPhone12で速度計測してみると、自宅の光回線以上の速度を出しています。ただ、エリアが狭すぎるのが残念です。

5G基地局を見つけよう

携帯電話基地局は、ビルの上や高い電柱に設置されています。

四角い箱が付いているアンテナです。

基地局は、楽天モバイルの5G提供エリアで場所を特定し、Googleストリートビューで確認できる場合もあります。

5G基地局周辺に行ってみよう

5G対応のiPhone12を片手に、基地局へ行ってみます。

基地局の200～300m先あたりで5Gに切り替わるのですが、速度は20Mbs程度。表示だけの5Gのようでした。

基地局手前50mで、ようやく460Mbsという高速通信が可能になりました。

ミリ波ではなくsub6

5Gには範囲が狭くて超高速なミリ波と、範囲が広くて高速なsub6があります。

日本版iPhone12はsub6しか対応していないため、今キャッチしているのはsub6のはずです。

速度的にはsub6で納得の数字ですが、有効距離が50mというのは、あまりにも狭すぎるのでは・・・。

基地局50m以内にカフェがないと、5Gを使う機会を作れません。

5Gを日常で使えるのはまだ先のようです。

散歩していてスマホを見たら5Gにつながっていました。4Gの100倍と言われる通信速度を堪能しようと思います。しかし、速度が出ず、実際は4Gにつながっている可能性が高かったです。

5Gで速度計測

都会とは言えない場所で5Gにつながりました。キャリアは楽天モバイル。端末はiPhone12Proを使っています。

5Gの実力を知るため、さっそくfast.comで速度計測してみます。

・・・23Mbps？

これは4Gの速度では？？

4Gで速度計測

少し歩いて、4Gの状態で速度計測してみます。

むしろ速度が上がった？？

実際は4Gでも5Gと表示される場合あり

楽天公式サイトに説明がありました。

●5Gと表示されているのに、通信速度が遅い

［ご注意］
・エリア境目などで、実際には4Gサービスが提供されているにもかかわらず、「5G」と表示される場合があります。

境目にいたのでしょう。

楽天5Gの提供エリアを確認し、Googleストリートビューで調べてみると、5G基地局アンテナが映っていました。

場所を特定したので、今度はアンテナ方面に向かって歩いていこうと思います。

Webサイトのナビゲーションは、現在のページをaria-current=”page”でマークアップすることが適切でした。ただし、パンくずリストについては、現在のページをaria-current=”location”とした方が良いようです。

aria-currentの”page”と”location”の違い

MDN Web Docsの解説を確認します。

aria-current=”page”

Represents the current page within a set of pages.

一連のページ内の現在のページを表します。

aria-current=”location”

Represents the current location, for example the current page in a breadcrumbs hierarchy.

パンくずリスト（ブレッドクラム階層）の現在のページなど、現在の場所を表します。

上記の説明を見ると、ページナビゲーションでは「aria-current=”page”」。パンくずで「aria-current=”location”」となります。

どちらも現在のページであることは変わりないので、使い分けが必要なのか疑問です・・・。

パンくずのサンプルコード

パンくずの見た目に関わる「＞」や文字の色はCSSで設定します。

リストのマークアップは、階層の順番があることから、ulよりolの方が望ましいようです。

参考ページ：Button Contrast Checker

Webサイトのナビゲーションで、現在のページをWAI-ARIAでマークアップするには、何を使えばよいでしょうか？aria-current=”page”が適切です。

aria-selectedではなくaria-current

ページのナビゲーションで、現在のページのリンクにaria-selectedを設定してしまう誤りがあります。

正しくは、aria-current=”page”を使います。

例えば「商品情報｜企業情報｜お問合せ」というナビゲーションがあった場合、現在「企業情報」のページが開かれている場合、下記のようなコードになります。

WAI-ARIAの解説はMDNが分かりやすい

W3CのWAI-ARIA仕様書より、Mozillaの運営するMDN Web Docsの方が、aria-currentの解説は分かりやすかったです。

WAI-ARIAで迷ったときは、MDNも参考にすると良いかもしれません。

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を見ており、教材としてはコストパフォーマンスが高く、お勧めです。