当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>


提供: WordPress Codex 日本語版
移動先: 案内検索
(リソース: 原文タグ更新)
(画像のテスト: )
44行目: 44行目:
To test whether your images are informative or purely decorative, imagine reading the page out to someone over the phone. Did you stop to describe an image? If "yes", then this image needs an alternative description. If "no", then the image can be used with a null (<tt>alt=""</tt>) attribute.
画像を説明するために停止しましたか? 「はい」の場合、このイメージは別の説明が必要です。
「いいえ」の場合、イメージには null属性 (<tt>alt=""</tt>) を付けて使われるでしょう。

2015年6月21日 (日) 18:19時点における版




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

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

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

WordPress とアクセシビリティ

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



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

Heading structure also plays an important part of search engine optimization. Search engine spiders check for heading tags as they index your pages, so your heading structure (and the content beneath each heading) may affect your search engine ranking.


Read just the headings of your pages out loud. Do they describe the content that they precede? Do they break the page down logically? If you were back in school, what would your English teacher think of the page? ;-)


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.


Color choices also affect people's ability to "see" a page. Approximately 10% of all internet users have problems seeing colors, especially those suffering from color blindness. 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最新版との差分