Understanding WCAG 2.0

Skip to Content (Press Enter)

SCR21: Tartalom hozzáadása a dokumentum objektum modell (DOM) segítségével

Alkalmazás

HTML-en és XHTML-em belül alkalmazott ECMAScript

Ez a technika az alábbiakra vonatkozik:

A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések

Ez a példa sikeresen tesztelésre került a Windows XP operációs rendszeren futó ésJAWS 7, illetve WindowEyes 5.5 segítő techhnológiákat alkalmazó IE 6 és Firefox 1.5.0.1 böngészőkkel. Fontos megjegyezni, hogy a képernyőolvasók nem fogják automatikusan felolvasni az újonnan hozzáadásra került tartalmakat. A kihagyás elkerülése érdekében fókuszáljon az új elemre, vagy bizonyosodjon meg arról, hogy az új tartalom az aktuális pozíció alatt került-e hozzáadásra és a felhasználó meg fogja azt találni, miközben a lapot görgeti.

Leírás

A technika célja az, hogy a tartalom a document.write vagy object.innerHTML alkalmazása helyett, a dokumentum objektum modell (DOM) segítségével kerüljön hozzáadásra a tartalomhoz. A document.write()módszer nem alkalmazható a hibátlan MIME típussal (application/xhtml+xml) működő XHTML-el, az innerHTML pedig nem képezi a DOM részét, és ezért kerülendő az alkalmazása. Abban az esetben, ha a tartalom a DOM alkalmazásával kerül hozzáadásra, akkor a felhasználói programnak a tartalom leválogatásához hozzá kell férnie a DOM-hoz. A createElement()funkció a DOM-on belüli elemek létrehozására is alkalmas. A createTextNode()funkció az elemen belüli szöveg előállítására szolgál. Az appendChild(), removeChild(), insertBefore()és replaceChild()az elemek és csomópontok hozzáadására, illetve eltávolítására szolgálnak. Más DOM funkciók attribútumok hozzáadására és elemek létrehozására alkalmazhatók.

Megjegyzés: Fókuszálható elemek hozzáadásakor a tabindex attribútum nem alkalmazható a tabulálási rend kizárólagos meghatározására, mivel ez problémát okozhat a tartalom közepébe illesztett fókuszálható elemek esetében. Az új elemhez társított alapértelmezett tabulálási rend nem határozhatja meg kizárólagosan a tabindex attribútumot.

Példák

1. példa

Az alábbi példa a kliens-oldali szkriptek segítségével történő űrlap hitelesítést mutatja be. Hibák esetén egy megfelelő hibaüzenet kerül megjelenítésre. A példa a DOM funkció segítségével jeleníti meg a címet, a hiba jellegét ismertető rövid szöveget, és a hibák rendszerezett listáját tartalmazó üzenetet. A cím tartalma hivatkozás formájában kerül megjelenítésre, amely a fókuszálás módszerével irányítja rá a felhasználó figyelmét a hibára. A lista elemek is hivatkozások formájában kerülnek feltüntetésre, amelyek megnyitáskor a hibás űrlapmezőre fókuszálnak.

Az egyszerűség kedvéért a példában csak két szövegmező kerül hitelesítésre, de ez könnyedén kiterjeszthető egy általános űrlapkezelő alkalmazássá. A kliens-oldali hitelesítés előnyei közé tartozik az, hogy azonnali visszajelzéssel szolgál a felhasználó felé, és ezzel megtakarítja neki a szerverről visszaérkező hibajelzések megjelenítéséhez szükséges várakozási időt, illetve csökkenti a szerver szükségtelen igénybevételét.

Az alábbiakban szereplő szkript az eseménykezelőket csatolja az űrlaphoz. A szkriptek aktiválása esetén a validateNumbers() funkció kerül alkalmazásra az űrlap elküldése előtt elvégzendő kliens-oldali hitelesítésre. A szkriptek mellőzése esetén az űrlap azonnal elküldésre kerül a szerver felé, ahol szintén hitelesíthető a dokumentum.

Példa kód:


window.onload = initialise;
function initialise()
{
  // Ensure we're working with a relatively standards compliant user agent
  if (!document.getElementById || !document.createElement || !document.createTextNode)
    return;
  // Add an event handler for the number form
  var objForm = document.getElementById('numberform');
  objForm.onsubmit= function(){return validateNumbers(this);};
}

A példában a hitelesítési funkció szerepel. Fontos, hogy a hibajelzés a createElement(), createTextNode(), és az appendChild() DOM funkciók segítségével került megszerkesztésre.

Példa kód:


function validateNumbers(objForm)
{
  // Test whether fields are valid
  var bFirst = isNumber(document.getElementById('num1').value);
  var bSecond = isNumber(document.getElementById('num2').value);
  // If not valid, display errors
  if (!bFirst || !bSecond)
  {
    var objExisting = document.getElementById('validationerrors');
    var objNew = document.createElement('div');
    var objTitle = document.createElement('h2');
    var objParagraph = document.createElement('p');
    var objList = document.createElement('ol');
    var objAnchor = document.createElement('a');
    var strID = 'firsterror';
    var strError;
    // The heading element will contain a link so that screen readers
    // can use it to place focus - the destination for the link is 
    // the first error contained in a list
    objAnchor.appendChild(document.createTextNode('Errors in Submission'));
    objAnchor.setAttribute('href', '#firsterror');
    objTitle.appendChild(objAnchor);
    objParagraph.appendChild(document.createTextNode('Please review the following'));
    objNew.setAttribute('id', 'validationerrors');
    objNew.appendChild(objTitle);
    objNew.appendChild(objParagraph);
    // Add each error found to the list of errors
    if (!bFirst)
    {
      strError = 'Please provide a numeric value for the first number';
      objList.appendChild(addError(strError, '#num1', objForm, strID));
      strID = '';
    }
    if (!bSecond)
    {
      strError = 'Please provide a numeric value for the second number';
      objList.appendChild(addError(strError, '#num2', objForm, strID));
      strID = '';
    }
    // Add the list to the error information
    objNew.appendChild(objList);
    // If there were existing errors, replace them with the new lot,
    // otherwise add the new errors to the start of the form
    if (objExisting)
      objExisting.parentNode.replaceChild(objNew, objExisting);
    else
    {
      var objPosition = objForm.firstChild;
      objForm.insertBefore(objNew, objPosition);
    }
    // Place focus on the anchor in the heading to alert
    // screen readers that the submission is in error
    objAnchor.focus();
    // Do not submit the form
    objForm.submitAllowed = false;
    return false;
  }
  return true;
}
// Function to validate a number
function isNumber(strValue)
{
  return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
}

Az alábbiakban az a súgó funkció kerül bemutatásra, amely a hibajelentés, illetve a társított űrlapmezőre való fókuszálás beállításához nyújt segítséget.

Példa kód:


// Function to create a list item containing a link describing the error
// that points to the appropriate form field
function addError(strError, strFragment, objForm, strID)
{
  var objAnchor = document.createElement('a');
  var objListItem = document.createElement('li');
  objAnchor.appendChild(document.createTextNode(strError));
  objAnchor.setAttribute('href', strFragment);
  objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
  objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
  // If strID has a value, this is the first error in the list
  if (strID.length > 0)
    objAnchor.setAttribute('id', strID);
  objListItem.appendChild(objAnchor);
  return objListItem;
}
// Function to place focus to the form field in error
function focusFormField(objAnchor, objEvent, objForm)
{
  // Allow keyboard navigation over links
  if (objEvent && objEvent.type == 'keypress')
    if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
      return true;
  // set focus to the form control
  var strFormField = objAnchor.href.match(/[^#]\w*$/);
  objForm[strFormField].focus();
  return false;
}

A példa űrlap HTML kódja.

Példa kód:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>ECMAScript Form Validation</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="validate.js"></script>
</head>
<body>
<h1>Form Validation</h1>
<form id="numberform" method="post" action="form.php">
<fieldset>
<legend>Numeric Fields</legend>
<p>
<label for="num1">Enter first number</label>
<input type="text" size="20" name="num1" id="num1">
</p>
<p>
<label for="num2">Enter second number</label>
<input type="text" size="20" name="num2" id="num2">
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Submit Form">
</p>
</form>
</body>
</html>

A példa a kliens-oldali szkriptekre korlátozódik. Ebben az esetben szükséges a szerver-oldali hitelesítés. A példa a kliens-oldali szkriptek aktív állapotában megszerkesztett hibaüzeneteket szemlélteti.

A Form Validation hivatkozás egy működő példára mutat.

Források

A források csak információs célokat szolgálnak, és csak angolul elérhetőek.

(jelenleg nincsenek)

Ellenőrzések

Folyamat

Azon lapok esetében, amelyek dinamikusan állítanak elő új tartalmat.

  1. Vizsgálja meg a forráskódot és ellenőrizze, hogy az új tartalom a document.write(), innerHTML, outerHTML, innerText vagy or outerText segítségével készült-e.

Elvárható eredmények

  • Az 1. pont igaz.

Teljesítési feltételek:

Ez a weboldal A Technikák és Gyakori Hibák a Web Akadálymentesítési Útmutató 2.0-hoz része. Ez a dokumentum elérhető egy HTML fájlban is. Nézze meg a A WCAG 2.0 dokumentumait ezen dokumentum és a WCAG 2.0 egyéb dokumentumai között fennálló kapcsolatok áttekintéséhez.

Copyright © 2008 W3C® ( MIT, ERCIM, Keio), Minden jog fenntartva. Alkalmazandók a W3C felelősségi, védjegyoltalmi és dokumentumhasználati előírásai.