Understanding WCAG 2.0

Skip to Content (Press Enter)

C17: Szöveget tartalmazó űrlap elemek méretezése

Alkalmazás

(X)HTML, CSS

Ez a technika az alábbiakra vonatkozik:

Leírás

A technika célja a szöveges alapú űrlap vezérlők újraméretezésének biztosítása, abban az esetben, ha a felhasználói programban megváltozik a szöveg mérete. Ez lehetővé teszi a felhasználók részére a beviteli mezőkbe beírt szövegek olvasását, amelyek az igényeiknek megfelelő méretben jelennek meg.

A szöveges alapú űrlap vezérlők közé olyan elemek tartoznak, mint a beviteli mezők (szöveg és szövegmező) és gombok.

Példák

1. példa : Egy kapcsolat felvételi űrlap

A "Lépjen velünk kapcsolatba" űrlapon bizonyos bemutatkozó információk, illetve a felhasználó kereszt-és családnevének, telefonszámának, illetve e-mail címének rögzítésére szolgáló űrlapvezérlők találhatók. Az összes szöveg és űrlap vezérlő méretezhető módon kerül szerkesztésre. Ezek a beállítások magukban foglalják az űrlapvezérlők szöveg karaktereinek méretét is mivel a karakter méretek nem öröklődnek az Internet Explorerben.

Az XHTML komponens:

Példa kód:

<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />

A CSS komponens:

Példa kód:

h1 { font-size: 2em; }
            p, label, input { font-size: 1em; }

Az Example of resizing input with CSS. kód működő példája.

2. példa: Rádió gombok

Az alábbi példa az IE szövegméret tulajdonságával működik. A Firefox 2.0 böngészőben azonban nem működik.

Az XHTML komponens:

Példa kód:

<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />

A CSS komponens:

Példa kód:

input.geomsize {
width: 1.2em;
height: 1.2em;}

Ellenőrzések

Folyamat
  1. Gépeljen be szöveget egy erre alkalmas űrlap vezérlőbe.

  2. Növelje meg a tartalom szövegének méretét 200 %-ra.
  3. Ellenőrizze, hogy az űrlap vezérlőbe beírt szöveg mérete 200 %-ra nőtt-e.
Elvárható eredmények
  • A 3. pont igaz.


Teljesítési feltételek: