実装方法のヒント

ウェブアクセシビリティの基準達成のため、日ごろ弊社で行なっている実装方法や考え方について一部紹介いたします。

見出し要素を使いましょう

見出し要素(h1~h6)を使用することで、視覚的にも聴覚的にもコンテンツの理解や情報の探索を助ける手がかりとなり、読み取りの負担を軽減し可読性を高めることができます。

見出しに見えるけど見出しでない

1つ目と2つ目の見出しに大きな文字サイズと太字のスタイルが適用され、視覚的には見出しと認識できます。しかし、h1 要素~ h6 要素が使用されておらず、スクリーンリーダーでは見出しと認識されません。そのため、見出しとして読み上げたり、スキップしたりするための手がかりにはなりません。

ノートパソコン

概要

ノートパソコンは、主にパーソナルコンピュータ(いわゆる「パソコン」)の機能をオールインワンとし、携帯性や運搬性を重視したものであるが、その当初は後述するように持ち歩くのにもそれなりの腕力を必要とするものであった。後に様々な技術の進歩を取り入れる形で小型化・軽量化(ダウンサイジング)が進んでいる。

古くは小型高密度化でそれ相応の製造コストが掛かることから、デスクトップパソコンと比して販売価格が割高となる傾向は避けられず、またオールインワンタイプの宿命として拡張性も限定的、かつモジュールも専用部品を使うことから、デスクトップ機のように部品交換で機能を向上させたりすることにも、それらが高価であるとかそもそも部品交換に対応していないなど、困難が付きまとった。

(略)

(出展:ノートパソコン - Wikipedia

<p><span style="font-size:xx-large"><strong>ノートパソコン</strong></span></p>
<p><span style="font-size:x-large"><strong>概要</strong></span></p>
<p>ノートパソコンは、主にパーソナルコンピュータ(いわゆる「パソコン」)の機能をオールインワンとし、携帯性や運搬性を重視したものであるが、その当初は後述するように持ち歩くのにもそれなりの腕力を必要とするものであった。後に様々な技術の進歩を取り入れる形で小型化・軽量化(ダウンサイジング)が進んでいる。</p>
<p>古くは小型高密度化でそれ相応の製造コストが掛かることから、デスクトップパソコンと比して販売価格が割高となる傾向は避けられず、またオールインワンタイプの宿命として拡張性も限定的、かつモジュールも専用部品を使うことから、デスクトップ機のように部品交換で機能を向上させたりすることにも、それらが高価であるとかそもそも部品交換に対応していないなど、困難が付きまとった。</p>

見出しの達成方法には以下のようにあります。

  • 見出しマークアップは、支援技術がテキストの見出し状態を利用者に提示することを可能にする。
  • スクリーンリーダーは、コードを認識し、そのレベル、ビープ音、又は他の聴覚インジケーターを備えた見出しとしてテキストをアナウンスすることができる。
  • スクリーンリーダーはまた、見出しマークアップをナビゲートすることもできる。これは、スクリーンリーダー利用者が関心のあるコンテンツをより迅速に見つけるための効果的な方法である。

(出展:H42: 見出しを特定するために、h1 要素~ h6 要素を使用する | WCAG 2.0 達成方法集

視覚的には文字の大きさや太さ、レイアウトから見出しを判別できますが、スクリーンリーダーでは見出し要素 h1 〜 h6 を使用しない限り見出しであることは伝わりません。見出し要素はページ内容の様子を伝える重要な手がかりになります。

見出し要素 h1 〜 h6 は階層構造を持ちます。また、h1 〜 h6 の順番を飛ばしてはいけません。

例えば、h1 の次にあまり大きくない見出しをつけたい時、h2 と h3 を飛ばして h4を使いたくなりますが、h1 と h4 の間にあるべき h2 と h3 がないためユーザーに混乱を生じさせます。このような場合は、h2 と h3 を新設したり、そのページ用に小さい見出しのレイアウトを CSS で作成する等の方法で対処すべきです。HTML 上では h1, h2, h3... の順番を保持しましょう。

見出し要素を使いましょう

1つ目の見出しに h1 要素、2つ目の見出しに h2 要素を使用します。

これで見出しについては「適合」となります。

ノートパソコン

概要

ノートパソコンは、主にパーソナルコンピュータ(いわゆる「パソコン」)の機能をオールインワンとし、携帯性や運搬性を重視したものであるが、その当初は後述するように持ち歩くのにもそれなりの腕力を必要とするものであった。後に様々な技術の進歩を取り入れる形で小型化・軽量化(ダウンサイジング)が進んでいる。

古くは小型高密度化でそれ相応の製造コストが掛かることから、デスクトップパソコンと比して販売価格が割高となる傾向は避けられず、またオールインワンタイプの宿命として拡張性も限定的、かつモジュールも専用部品を使うことから、デスクトップ機のように部品交換で機能を向上させたりすることにも、それらが高価であるとかそもそも部品交換に対応していないなど、困難が付きまとった。

(略)
<h1>ノートパソコン</h1>
<h2>概要</h2>
<p>ノートパソコンは、主にパーソナルコンピュータ(いわゆる「パソコン」)の機能をオールインワンとし、携帯性や運搬性を重視したものであるが、その当初は後述するように持ち歩くのにもそれなりの腕力を必要とするものであった。後に様々な技術の進歩を取り入れる形で小型化・軽量化(ダウンサイジング)が進んでいる。</p>
<p>古くは小型高密度化でそれ相応の製造コストが掛かることから、デスクトップパソコンと比して販売価格が割高となる傾向は避けられず、またオールインワンタイプの宿命として拡張性も限定的、かつモジュールも専用部品を使うことから、デスクトップ機のように部品交換で機能を向上させたりすることにも、それらが高価であるとかそもそも部品交換に対応していないなど、困難が付きまとった。</p>

上記で達成基準に「適合」となり必要十分な対応を行いました。

以下は、達成基準とは関係なく、小見出しを使って読みやすくすることを考えてみます。

小見出しで読みやすくする

※この項目は基準達成に必須ではありません。

ウェブページで長い文章を読むのは負担です。小見出しを設けることによって、拾い読みやスクリーンリーダーの見出しスキップができるようになるため、どの辺にどんな内容が書いてあるか見当をつけやすく、情報を得やすくなります。

このページの例文も、上では省略していた部分も掲載するとそれなりの長文となります。当サイトのように短文が多いサイトの中では、読むのが大変そう、と感じてしまいます。そこで、適度なところで区切って h3要素で小見出しを設けることにします。どこで区切るかは、意味のまとまりや字数のバランス、またサイトの性質などによって適宜決めていきます。

ノートパソコン

概要

小型軽量化が進むノートパソコン

ノートパソコンは、主にパーソナルコンピュータ(いわゆる「パソコン」)の機能をオールインワンとし、携帯性や運搬性を重視したものであるが、その当初は後述するように持ち歩くのにもそれなりの腕力を必要とするものであった。後に様々な技術の進歩を取り入れる形で小型化・軽量化(ダウンサイジング)が進んでいる。

デスクトップに取って代った2000年代

古くは小型高密度化でそれ相応の製造コストが掛かることから、デスクトップパソコンと比して販売価格が割高となる傾向は避けられず、またオールインワンタイプの宿命として拡張性も限定的、かつモジュールも専用部品を使うことから、デスクトップ機のように部品交換で機能を向上させたりすることにも、それらが高価であるとかそもそも部品交換に対応していないなど、困難が付きまとった。

しかし2000年代には多くのユーザーにとってデスクトップパソコンが過剰性能気味となった一方、ノートパソコンの価格も下がり、内部拡張のニーズも減少していった。こうした経緯により、一般のユーザーにも、ノートパソコンがメインのパソコンとして受け入れられるようになっている。

日本のお家芸から台湾・中国へ 進み続ける高機能化

ノートパソコンの製造には、電子部品の小型・低消費電力化や、機械的構造(剛性・衝撃や圧迫に対する強度・対水ぬれ性など)の高度な設計など総合的な技術が求められることから、長い間日本のお家芸であった。しかし1998年頃から、大型の機種の生産を台湾や中国などに移管するメーカーや、現地企業に設計・生産を委託し独自の設計・製造からは撤退するメーカーなども相次いだ。現在日本国内で生産しているのは直販メーカーが中心で、国内市場向けに迅速な対応が求められるBTOによる組み立てが行われている。

近年では電子部品の高性能、高密度化や、部品実装技術の向上、素材の性能向上などの発展により小型化、軽量化が進み、演算性能も飛躍的に向上している。また、バッテリーの性能向上もノートパソコンの発展に大きく貢献している。様々な機能がモジュールの形で実装しやすくなっているなどの事情もあり、後述するように多機能化も依然進行中である。

<h1>ノートパソコン</h1>
<h2>概要</h2>
<h3>小型軽量化が進むノートパソコン</h3>
<p>ノートパソコンは、主にパーソナルコンピュータ(いわゆる「パソコン」)の機能をオールインワンとし、携帯性や運搬性を重視したものであるが、その当初は後述するように持ち歩くのにもそれなりの腕力を必要とするものであった。後に様々な技術の進歩を取り入れる形で小型化・軽量化(ダウンサイジング)が進んでいる。</p>
<h3>デスクトップに取って代った2000年代</h3>
<p>古くは小型高密度化でそれ相応の製造コストが掛かることから、デスクトップパソコンと比して販売価格が割高となる傾向は避けられず、またオールインワンタイプの宿命として拡張性も限定的、かつモジュールも専用部品を使うことから、デスクトップ機のように部品交換で機能を向上させたりすることにも、それらが高価であるとかそもそも部品交換に対応していないなど、困難が付きまとった。</p>
<p>しかし2000年代には多くのユーザーにとってデスクトップパソコンが過剰性能気味となった一方、ノートパソコンの価格も下がり、内部拡張のニーズも減少していった。こうした経緯により、一般のユーザーにも、ノートパソコンがメインのパソコンとして受け入れられるようになっている。</p>
<h3>日本のお家芸から台湾・中国へ 進み続ける高機能化</h3>
<p>ノートパソコンの製造には、電子部品の小型・低消費電力化や、機械的構造(剛性・衝撃や圧迫に対する強度・対水ぬれ性など)の高度な設計など総合的な技術が求められることから、長い間日本のお家芸であった。しかし1998年頃から、大型の機種の生産を台湾や中国などに移管するメーカーや、現地企業に設計・生産を委託し独自の設計・製造からは撤退するメーカーなども相次いだ。現在日本国内で生産しているのは直販メーカーが中心で、国内市場向けに迅速な対応が求められるBTOによる組み立てが行われている。</p>
<p>近年では電子部品の高性能、高密度化や、部品実装技術の向上、素材の性能向上などの発展により小型化、軽量化が進み、演算性能も飛躍的に向上している。また、バッテリーの性能向上もノートパソコンの発展に大きく貢献している。様々な機能がモジュールの形で実装しやすくなっているなどの事情もあり、後述するように多機能化も依然進行中である。(略)</p>

お気軽にお問い合わせください

プライバシーマーク