Understanding WCAG 2.0

Skip to Content (Press Enter)

SCR33: A tartalom görgetése szkript használatával, valamint a görgetés szüneteltetését megoldó mechanizmus biztosítása

Alkalmazás

Olyan technológiák, amelyek támogatják a tartalom szkripttel szabályozható görgetését.

Ez a technika az alábbiakra vonatkozik:

Leírás

A technika célja, az hogy általa a felhasználó megállíthassa a tartalom szkripttel szabályozott görgetését. A gyengén látó, vagy értelmi fogyatékos felhasználók számára problémát jelenthet, vagy lehetetlenné válhat, a folyamatosan mozgó tartalom olvasása. Ezenkívül a mozgó tartalom elterelheti a felhasználók figyelmét a weblap egyéb részeiről.

Példák

1. példa

Ebben a példában a CSS és a Javascript a szöveget gördülő formátumban jeleníti meg. A mozgás megállítására egy hivatkozás került beillesztésre.

Ez az alkalmazás megjeleníti az egész szöveget és figyelmen kívül hagyja a hivatkozást, ha a Javascript vagy a CSS nem támogatott, illetve inaktív.

Az alábbi kód a webSemantic's Accessible Scroller (2008. július) módosított változata.

Az XHTML komponens:

Példa kód:


...
<div id="scroller">
<p id="tag">This text will scroll and a Pause/Scroll link will be present 
when Javascript and CSS are supported and active.</p>
</div>
...

A CSS komponens:

Példa kód:


...
body {font:1em verdana,sans-serif; color:#000; margin:0}
/* position:relative and overflow:hidden are required */
#scroller { position:relative; overflow:hidden; width:15em; border:1px solid #008080; }
/* add formatting for the scrolling text */
#tag { margin:2px 0; }
/* #testP must also contain all text-sizing properties of #tag  */
#testP { visibility:hidden; position:absolute; white-space:nowrap; } 
/* used as a page top marker and to limit width */
#top { width:350px; margin:auto; }
...

A JavaScript komponens:

Példa kód:


var speed=50        // speed of scroller
var step=3          // smoothness of movement
var StartActionText= "Scroll"  // Text for start link
var StopActionText = "Pause"   // Text for stop link
var x, scroll, divW, sText=""
function onclickIE(idAttr,handler,call){
  if ((document.all)&&(document.getElementById)){idAttr[handler]="Javascript:"+call}
}
function addLink(id,call,txt){
  var e=document.createElement('a')
  e.setAttribute('href',call)
  var linktext=document.createTextNode(txt)
  e.appendChild(linktext)
  document.getElementById(id).appendChild(e)
}
function getElementStyle() {
    var elem = document.getElementById('scroller');
    if (elem.currentStyle) {
        return elem.currentStyle.overflow;
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, '');
        return compStyle.getPropertyValue("overflow");
    }
    return "";
}
function addControls(){
// test for CSS support first 
// test for the overlow property value set in style element or external file
if (getElementStyle()=="hidden") {
  var f=document.createElement('div');
  f.setAttribute('id','controls');
  document.getElementById('scroller').parentNode.appendChild(f);
  addLink('controls','Javascript:clickAction(0)',StopActionText);
  onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction(0)');
  document.getElementById('controls').style.display='block';
  }
}
function stopScroller(){clearTimeout(scroll)}
function setAction(callvalue,txt){
  var c=document.getElementById('controls')
  c.childNodes[0].setAttribute('href','Javascript:clickAction('+callvalue+')')
  onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction
('+callvalue+')')
  c.childNodes[0].firstChild.nodeValue=txt
}
function clickAction(no){
  switch(no) {
    case 0:
      stopScroller();
      setAction(1,StartActionText);
      break;
    case 1:
      startScroller();
      setAction(0,StopActionText);
  }
}
function startScroller(){
  document.getElementById('tag').style.whiteSpace='nowrap'
  var p=document.createElement('p')
  p.id='testP'
  p.style.fontSize='25%' //fix for mozilla. multiply by 4 before using
  x-=step
  if (document.getElementById('tag').className) p.className=document.getElementById
('tag').className
  p.appendChild(document.createTextNode(sText))
  document.body.appendChild(p)
  pw=p.offsetWidth
  document.body.removeChild(p)
  if (x<(pw*4)*-1){x=divW}
  document.getElementById('tag').style.left=x+'px'
  scroll=setTimeout('startScroller()',speed)
}
function initScroller(){
  if (document.getElementById && document.createElement && document.body.appendChild) {
    addControls();
    divW=document.getElementById('scroller').offsetWidth;
    x=divW;
    document.getElementById('tag').style.position='relative';
    document.getElementById('tag').style.left=divW+'px';
    var ss=document.getElementById('tag').childNodes;
    for (i=0;i<ss.length;i++) {sText+=ss[i].nodeValue+" "};
    scroll=setTimeout('startScroller()',speed);
  }
}
function addLoadEvent(func) {
  if (!document.getElementById | !document.getElementsByTagName) return
  var oldonload = window.onload
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload()
      func()
    }
  }
}
addLoadEvent(initScroller)

A Example of using script to scroll content and providing a mechanism to pause it, című részben megtalálható a példa működő verziója.

Források

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

Ellenőrzések

Folyamat
  1. Ellenőrizze, hogy beillesztésre került-e a mozgó tartalom megállítására szolgáló mechanizmus.

  2. Használja a mechanizmust a mozgó tartalom megállítására.

  3. Ellenőrizze, hogy megáll-e a görgetés és nem indul újra magától.

  4. Ellenőrizze, hogy beillesztésre került-e a mozgást újraindító mechanizmus.

  5. Indítsa újra a tartalom mozgását az erre a célra szolgáló mechanizmussal.

  6. Ellenőrizze, hogy a görgetés a megállítás pontjától indul-e újra.

Elvárható eredmények
  • A 3. és 6. pontok igazak.


Teljesítési feltételek: