Techniques for WCAG 2.0

SCR36: Mozgó, gördülő vagy automatikusan frissülő tartalmakat statikus ablakban, illetve tartományban megjelenítő mechanizmus biztosítása

Alkalmazás

Minden olyan technológia, amely képes a tartalom mozgatására, villogtatására, frissítésére, illetve statikus szövegblokkok előállítására.

Ez a technika az alábbiakra vonatkozik:

2.2.1 teljesítési feltétel (Állítható időzítés)
- Hogyan teljesül a 2.2.1 (Állítható időzítés)
- A 2.2.1 teljesítési feltétel értelmezése (Állítható időzítés)

Leírás

Bizonyos weblapokon a hely hiánya miatt automatikusan gördülő szöveg kerül megjelenítésre. A kisebb szövegablakokban gördülő szöveg jól értelmezhető a gyorsan olvasó felhasználók számára, de problémát jelenthetnek a lassabban olvasóknak, vagy segítő technológiát alkalmazóknak. Ez a technika megállítja a szöveg mozgását és statikusan elérhetővé teszi a teljes szöveg blokkot. A szöveg vagy egy különálló ablakban vagy a lap egy nagyobb részén válik elérhetővé. Ezt követően a felhasználók a saját tempójuknak megfelelően olvashatják a szöveget.

Ez a technika nem alkalmazható olyan mozgó szövegek esetében, amelyek nem jeleníthetők meg teljes terjedelmükben a képernyőn. (pl. egy hosszú csevegés).

Megjegyzés: Ez a technika együttesen alkalmazható a stílusváltó technikával, abban az esetben, ha egy nem megfelelő tartalom megfelelő alternatív verziója kerül megjelenítésre. További információkért tekintse meg a C29: Megfelelő alternatív verzió biztosítása stílusváltó segítségével (CSS) és Understanding Conforming Alternate Versions című részeket.

Példák

1. példa: Növekvő gördülő szöveg

A nagyméretű szövegblokk a lap egy kis részén gördül keresztül. A felhasználó egy gomb segítségével állíthatja meg a gördülést és jelenítheti meg a teljes szövegblokkot.

Megjegyzés: Az alábbi példakódhoz bekapcsolt és engedélyezett CSS és JavaScript szükségesek.

A CSS komponens:

Példa kód:

#scrollContainer {
        visibility: visible;
        overflow: hidden;
        top: 50px; left: 10px;
        background-color: darkblue;
      }
      .scrolling {
        position: absolute;
        width: 200px;
        height: 50px;
      }
      .notscrolling {
        width: 500px;
        margin:10px;
      }
      #scrollingText {
        top: 0px;
        color: white;
      }
      .scrolling #scrollingText {
        position: absolute;
      }
      </a>

A szkript és HTML tartalom:

Példa kód:

<script type="text/javascript">
      var tid;
      function init() {
        var st = document.getElementById('scrollingText');
        st.style.top = '0px';
        initScrolling();
      }
      function initScrolling () {
        tid = setInterval('scrollText()', 300);
      }
      function scrollText () {
        var st = document.getElementById('scrollingText');
        if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
          st.style.top = (parseInt(st.style.top) - 5) + 'px';
        } else {
          var sc = document.getElementById('scrollContainer');
          st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
        }
      }
      function toggle() {
        var scr = document.getElementById('scrollContainer');
        if (scr.className == 'scrolling') {
          scr.className = 'notscrolling';
          clearInterval(tid);
           document.getElementById('scrollButton').value="Shrink";
        } else {
          scr.className = 'scrolling';
          initScrolling();
          document.getElementById('scrollButton').value="Expand";
        }
      }
  <input type="button" id="scrollButton" value="Expand" onclick="toggle()" />
  <div id="scrollContainer" class="scrolling">
    <div id="scrollingText" class="on">
    .... Text to be scrolled ...
    </div>
  </div>
...

Az Expanding Scrolling Text in Place című részben megtalálható a kód egy működő példája.

Ellenőrzések

Ehhez a technikához jelenleg nincsenek elérhető technikák.