• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

アクセシビリティ

提供: WordPress Codex 日本語版
移動先: 案内検索

このページ「アクセシビリティ」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

ウェブデザインにおいてアクセシビリティとは、ウェブページを誰でも利用できるようにすることです。これには、たとえばポインティングデバイスとしてマウスを利用できない人、手話を主に利用する聴覚障害を持つ人、特別な支援ソフトウェアやハードウェアデバイスを利用してウェブにアクセスする人などが含まれます。ウェブサイトの所有者であるあなたはアクセシビリティにについて理解することが求められます。

アクセシビリティ声明

"アクセシビリティとは製品、デバイス、サービス、あるいは環境がどれだけ多くの人に利用にとって利用可能になっているかということを示す度合いのことである。" Cynthia Waddell

WordPress はコミュニティとパブリシングの民主化を両立させる原則の上に開発されています。標準とベストプラクティスに従う WordPress 開発は、柔軟性と選択の自由を損なうことなく環境をよりよくしていきます。私たちは常に、より多くの人にとってアクセシブルな環境を作るために行動します。

参加とフィードバックはいつでも歓迎します。あなたのコメントが WordPress のアクセシビリティ向上の助けになるでしょう。

WordPress とアクセシビリティ

WordPress (とまともな品質のテーマ)を使っていれば、アクセシビリティの高いサイトを作るために特に追加でしなければならないことはありません。それでもアクセシビリティ標準に準拠したコンテンツを作成するためにいくつか心がけることがあります。

見出しを正しく使う

見出しというのは単に大きくて目立つテキストではありません。ページを論理的な下位構造に整理して、ページを理解しやすく、読みやすくするものです。ただし、それらを正しく使わなければ効果はありません。

Document heading outline
見出しは h1 から h6 のタグを使って定義されます。h1 は最も重要性の高い見出しを定義し、h2 は最も重要な副見出しを定義する、といった具合です。下がっていって h6 は最も重要性の低い見出しを定義します。小論文を書くように論理的に見出しを使いましょう。テキストを強調するのに使うのではなくて

見出し構造は、検索エンジン最適化(SEO)の重要な部分を担っています。 検索エンジンのスパイダーは、インデックスしたページの見出しタグをチェックします、従って、見出しの構造(および各見出しの下のコンテンツ)は、検索エンジンのランキングに影響を与える可能性があります。

見出しのテスト

大きな声に出して、ページの見出しだけを読みます。 先行したコンテンツを記述していますか? 論理的にページを分解していますか? 学校に戻ったら、英語の先生は、このページをどう思うだろうか? ;-)

イメージの説明

In the simplest of examples, web users who have a visual impairment may use software that "speaks" page content to them. In this situation, they rely upon your help to "hear" your content - including any informative images. Therefore, when you include a graphic or photograph, it may be appropriate to provide an alternative description in the alt part of the <img> tag. This description will be used in place of the image.

...and the most wonderful thing appeared: <img scr="ball.jpg" alt="a beautiful red and blue ball" />.

Those who rely on screen reading software might hear, "and the most wonderful thing appeared: image - a beautiful red and blue ball."

In some cases the image is purely decorative. In these cases an alternative description is not necessary. You should always include the alt attribute, but in these cases, you can simply leave it empty.

...and the ball bounced higher and higher 
as <img scr="ball.jpg" alt="" /> the child bounced it....

Those who rely on screen readers might hear, "and the ball bounced higher and higher as the child bounced it."

Some people use the alt attribute to add keywords to their pages in the belief that this will improve their search engine ranking. That is not the primary purpose of the attribute and, in reality, it offers little or no real SEO benefits. But using the alt (or the title) attribute in this way will create significant problems for users who actually rely upon them.

画像のテスト

イメージは、情報的または純粋に装飾的であるかどうかをテストするには、電話で誰かにページを読んでるところを想像してみてください。 画像を説明するために停止しましたか? 「はい」の場合、このイメージは別の説明が必要です。

「いいえ」の場合、イメージには null属性 (alt="") を付けて使われるでしょう。

リンクを記述

Link text should describe the resource that it links to - even when the text is read out of context. Some assistive software scans a page for links and presents them to the user as a simple list. In these situations, all the links will be read out of context. So it is important the text used in a link is descriptive.

悪い例

To read more client success stories, <a href="http://example.com/client-stories/">click here</a>
The phrase "click here" will not make any sense when read out of context.

良い例

Read <a href="http://example.com/client-stories/">more client success stories</a>
The phrase "more client success stories" is understandable - even when read by itself.

This is one accessible design technique that will improve your SEO. Google pays close attention to the text that you use for links.

リンクテスト

To test whether you have good link texts, imagine reading just the text from all links in your page content to someone over a phone. Do they still make sense?

リーダブルなページを作成する

Sometimes, the simplest thing you can do is to create a more readable page. Reading from a screen is much harder than reading a printed page. Crowded text, lots of images, a jumble of font styles, and too much information makes a page very difficult to read.

While developing your WordPress site, take extra time to pay attention to the white space or "empty" space around the different elements on the page. Make sure the fonts are large enough to be readable. Position navigation elements in logical places.

Also bear in mind that some your visitors may have dyslexia or may not use the same first language as you do. Keep sentences short and simple. Try to avoid abbreviations unless you explain them first.

可読性テスト

Is your page still readable when you increase the text size using the browser's zoom functionality? Do any of the non-text elements on the page create a distraction? If there are any animations or other movement on the page, consider removing these elements.

See the Testing Readability Resources for a list of online testing tools.

賢明なカラーを使う

色の選択は、ページを「見る」ための人々の能力に影響を与えます。すべてのインターネットユーザーの約10%が色の見え方に問題を持ち、特に色弱に苦しんでおります。 Visitors with a visual impairment may prefer higher contrast pages whilst those with reading difficulties may need a lower contrast. Try to strike a reasonable balance and avoid extremes.

You don't have to design your site around these issues, but being better informed makes for a more accessible site.

カラー選択のテスト

If you find that your eyes are becoming tired when reading your own pages, consider lowering the text:background contrast. If you have to squint or strain to read text, increase the text:background contrast slightly.

See the Testing Color Resources section for some free color testing tools.

バリデート!

It's nice when you design your website to work in Firefox, but when viewed with Internet Explorer or Safari, things may look different. Page content may be scrambled, hidden or even lost. Not all browsers display all pages exactly the same way. But they can display most valid pages effectively and pleasingly. Don't aim for pixel perfection. Instead aim for "looking good" in each of your test browsers.

Check your website's code through validation tests. Validation represents the best way of ensuring that your pages are displayed to their best advantage across a whole range of web software.

Make WordPress Accessible

Make WordPress Accessible is the official blog for the WordPress accessibility group - dedicated to improving accessibility in core WordPress and related projects. Our aim to provide accessibility suggestions, feedback and assistance to WordPress core, theme and plugin developers.

Anyone can join in the discussions. Just log into the blog using your WordPress.org username and password. You can also follow discussions via email or subscribe to feeds for both posts and comments.

We look forward to seeing you soon.

リソース

全般

可読性テスト(英語のみ対応)

カラーテスト

最新英語版: WordPress Codex » Accessibility最新版との差分