MDN wants to learn about developers like you: https://www.surveygizmo.com/s3/5171903/MDN-Learn-Section-Survey-Recruiter-Pathway

どのようにすべてのタイプのユーザーを対象に設計できますか?

この翻訳は不完全です。英語から この記事を翻訳 してください。

この記事ではあらゆる種類のユーザーのための Web サイトを設計する基本的なヒントを紹介します。

前提条件 あなたはすでにアクセシビリティとは何か?を読んでいますか?,ここではアクセシビリティについて詳細にカバーしていませんので
目的 ユニバーサルデザインとは、障害や技術的制約にかかわらず、すべての人のためのデザインを意味します。 この記事では、ユニバーサルデザインの最も重要なクイックウィンを紹介します。

概要

ウェブサイトを構築する際に考えなければならない課題のトップの一つがユニバーサルデザインです。障害、技術的な制約、文化、場所などに関わらず、すべてのユーザーが包含されるものです。

アクティブラーニング

まだ、アクティブラーニングがありません。 Please, consider contributing.

深く掘っていく

カラーコントラスト

テキストの読みやすさを維持するためにバックグラウンドカラーと一緒にテキストカラーとのコントラストを良くしなければなりません。視覚的に障害をもつ人々や路上でスマートフォンを使っている人々などを助けるために余計にやさしくしなければなりません。

W3Cは前景と背景の間の明るさの比のアルゴリズムの計算をして良いカラーの混合を定義しました。計算はかなり複雑なように見えますが、私たち自身の仕事で信頼できるツールにできました。 

Pacielloグループカラーコントラストアナライザーをダウンロードしてインストールしてみましょう。

注意: あなたはオンライン上でコントラストチェッカーを選択的にウェブ用のカラーコントラストチェッカーのようなものをいくつか見つけることができるでしょう。カラーの値を画面上で見つけ出すのでローカルのカラーチェッカーを私たちはお薦めします。

例えば、どのようにカラーコントラストアナライザーを使えばいいのかこのページでカラーテストを行ってみましょう。

Colour contrast on this page: excellent!

テキストと背景明るさの比は 8.30:1 でそれは最小の標準を超えていて (4.5:1) 、視覚障害のある多くの人でもこのページを読めるようにすべきである。

フォントサイズ

ウェブサイトにおけるフォントサイズの相関位置と絶対位置のどちらも指定することができます。

絶対単位

絶対単位は比例を計算しません。しかし、サイズをストーンに設定して参照します。そうなので、話すために、そして、ピクセルで示すことが最も多いです。例えばCSSはこのように宣言されています。 

body { font-size:16px; }

… あなたがブラウザに言うと何かが起こるかもしれません。フォントサイズは16ピクセルにしなければなりません。モダンブラウザでは100%ズームと要素を設定した時にあなたが要求した16ピクセルのふりをすることによってこのルールを得ているかもしれません。

もう何年間もインターネットエクスプローラーはインターネットエクスプローラー8になるあたりまで断固として16ピクセルは16ピクセルとして表示をしてきました。この場合では拡大することはなく、そしてそれはまだ周りにあることによってそのようにふるまわねばなりません。 

相関単位

比例単位と呼ばれているものも、相関単位は親要素に関連して計算されます。相関単位はアクセシビリティに親しみのあるもので、なぜならそれらは、ユーザーシステム上に設定され尊重されるものだからです。 

相関単位は em 、% や rem:で表現されます。

Percent-based sizes: %
Thisこの単位は以前の要素で表現されたフォントサイズN%で示すように指示します。 もし、親がない場合、デフォルトのフォントサイズ計算による基本的なサイズがブラウザで考えられます。 (たいてい16ピクセルに同等になります。)
Em-based sizes: em
This unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100. It is said that "em" is the width of a capital “M” in the alphabet (roughly speaking, an “M” fits into a square).
Rem-based sizes: rem
This unit is proportional to the root element's font size and is expressed as portions of 1, like em.

Suppose we wanted a base font size of 16px and an h1 (main heading) at the equivalent of 32px, yet if within the h1 we find a span with the subheading class, it too must be rendered at the default font size (usually 16px).

Here is the HTML we're using:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font size experiment</title>
</head>
<body>
    
    <h1>This is our main heading
        <span class="subheading">This is our subheading</span>
    </h1>

</body>
</html>

A percent-based CSS will look like this:

body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */
h1 { font-size:200%; } /* twice the size of the body, thus 32 pixels */
span.subheading { font-size:50%; } /* half the size of the h1, thus 16 pixels to come back to the original size */

The same problem expressed with ems:

body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */
h1 { font-size:2em; } /* twice the size of the body, thus 32 pixels */
span.subheading { font-size:0.5em; } /* half the size of the h1, thus 16 pixels to come back to the original size */

As you can see, the math quickly gets daunting when you have to keep track of the parent, the parent's parent, the parent's parent's parent, and so on. (Most designs are done in pixel-based software, so the math has to be done by the person coding the CSS).

Enter rem. This unit is relative to the root element's size and not to any other parent. The CSS can be rewritten thus:

body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */
h1 { font-size:2rem; } /* twice the size of the body, thus 32 pixels */
span.subheading { font-size:1rem; } /* original size */

Easier, isn't it? This works as of Internet Explorer 9 and in every other current browser, so please feel free to use this unit.

Note: You may notice Opera Mini does not support font sizing in rem. It will end up setting its own font size, so don't bother feeding it font units.

Why would I want to use proportional units?

Because you don't know when a browser is going to come around and refuse to zoom up text whose size is expressed in pixels. Also, check your website's statistics: you may receive visits from older browsers.

We would advise the following:

  • Describe fonts in rem units, most browsers will be very happy with them;
  • Let older browsers display fonts with their own internal engine. Browser's engines will ignore any property or value in the CSS if they can't cope with them, so that your website is still usable if not true to your designer's vision. Older browsers are on the way out anyway.

Note: Your mileage may vary. If you have to cater to older browsers, you'll have to use ems and do a bit more math.

Line width

There is a longstanding debate about line length on the web, but here's the story. Back when we had newspapers, printers realized that the reader's eyes would have trouble going from one line to the next if the lines were too long. The solution? Columns.

Of course the problem doesn't go away when we switch to the Web. The reader's eyes act like a shuttle going from line to line. To make it easier on people's eyes, limit line width to around 60 or 70 characters.

To achieve this, you can specify a size for your text's container. Let's consider this HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font size experiment</title>
</head>
<body>
    
<div class="container">
    <h1>This is our main heading
        <span class="subheading">This is our subheading</span>
    </h1>

    <p>[lengthly text that spans many lines]</p>
</div>

</body>
</html>

We have a div with class container. We can style the div either to set its width (using the width property) or its maximum width so that it never gets too large (using the max-width property). If you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the max-width property to allow up to 70 characters per line and no more:

div.container { max-width:70em; }

Alternative content for images, audio, and video

Websites often include stuff besides plain text.

Images

Images can be either decorative or informative, but there's no guarantee that your users can see them. For example,

  • Visually impaired users rely on a screen reader, which can only handle text.
  • Your readers may be using a very strict intranet that blocks images originating from a CDN.
  • Your readers may have disabled images to save bandwidth, especially on mobile devices (see below).
Decorative images
They're just for decoration and don't convey any real information. They could most often be replaced by a background image. Make sure they feature an empty alt attribute: <img src="deco.gif" alt=""> so they don't clog up the text.
Informative images
They are used to convey information, hence their name. They can, for instance, feature a graph, or show a person's gesture, or any other information. At minimum, you must provide a relevant alt attribute.

If the image can be described succinctly, you can provide an alt attribute and nothing more. If the image cannot be described succinctly, you will have to either provide the same content in another form in the same page (e.g., complement a pie chart with a table providing the same data), or resort to a longdesc attribute. This attribute's value is a URL pointing towards a resource explicitly describing in detail the image's content.

Note: the use and even the existence of longdesc has been debated for quite some time. Please refer to the W3C's Image Description Extension (longdesc) for the full explanation and thorough examples.

Audio/video

You must also provide alternatives to multimedia content.

Subtitling/close-captioning
You should include captions in your video to cater to visitors who can't hear the audio. Some users have hearing challenges, lack functioning speakers, or work in a noisy environment (like on the train).
Transcript
Subtitles only work if somebody watches the video. Many users don't have time, or lack the proper plugin or codec. Additionally, search engines rely mainly on text to index your contents. For all these reasons, please provide a text transcript of the video/audio file.

Image compression

Some users may choose to display images, but still have limited bandwidth available, especially in developing countries and on mobile devices. If you want a successful website, please compress your images. There are various tools to help you, either online or local:

ドキュメントのタグと貢献者

このページの貢献者: xianheiba, mdnwebdocs-bot, silverskyvicto
最終更新者: xianheiba,