ugrás a tartalomhoz

Nem javasolt tagek vakbarát lapokon

suexID · 2005. Dec. 7. (Sze), 11.22
Sziasztok!

A közeljövőben tervezem egy világszerte nagy népszerűségnek örvendő rock banda hazai lapjának elkészítését. Mivel a zene tipikusan egyike azoknak a témáknak, amiket a vakok és gyengénlátók is élvezhetnek, ezért gondoltam arra, hogy a lapot is ilyen (vakbarát) szellemiségben valósítom meg.

Olvastam több cikket is a témában, kiindulópontként Jano lapja szolgált és az ott linkelt tartalmakat végigolvastam. Lenne ezzel kapcsolatban pár kérdésem:
  • A vakbarát lapokon használhatok-e imagemapet? A W3C féle lapon olyasmit olvastam, hogy a szerver oldali imagemapek használata ellenjavalt, a http://mek.oszk.hu/html/irattar/vakosfelulet.htm lapon viszont nem tesz különbséget a szerver és kliens oldali megoldások között.
  • A longdesc paraméternél megadható php fájl is, vagy csak statikus (html) lapok használhatók? Gondoltam ugyanis rá, hogy a lap alapját képező CMS-be integrálnék egy funkciót, miszerint a képhez nem csak alt, title tagokat kellene megadni, hanem egy hosszabb leírást is. Ez a leírás aztán mehetne egy adatbázisba, utána onnan egy php fájl olvasná ki. Ez így korrekt eljárás lenne?


Akinek van tapasztalata ilyen téren, és szívesen segítene nekem, annak előre is köszönöm!
‹ Select HTML elem megjelenésének megváltoztatása? Táblázatban görgetősáv ›
 ■
1

Üdv!

janoszen · 2005. Dec. 7. (Sze), 12.36
1. Ne használj szerver-oldali image mapeket. Én idestova ... 7 éve egyáltalán nem használok imagemapeket. Az imagemapek arra valók, hogy ha egy kép különböző részeihez akarsz mondjuk leírást csatolni (mint pl. egy látkép, tevrajz, stb) akkor lehessen használni. Egyébként ne.

Longdesc paraméterrel ajánlott text/plain fájlt megadni, de azt hiszem, megadhatsz HTML fájlt is. Miután ez még nem támogatott, igazából pillanatnyilag mindegy.

A vakbarátsághoz sajnos nem elég az, hogy a WCAG szabványoknak megfelel az oldal, hanem pl nagyon zavaró felolvasóprogramok használatánál a következő konstrukció is:

 <ul>
  <li>
   <a>Menüpont</a>
   <ul>
    <li>
     <a>Menüpont</a>
    </li>
    <li>
     <a>Menüpont</a>
    </li>
    <li>
     <a>Menüpont</a>
    </li>
   </ul>
  </li>
  ...
</ul>
Ezt úgy olvassa fel a JAWS pl, hogy:

X elemű lista, listapont hivatkozás Menüpont hivatkozás vége,három elemű lista... stb.

Példa egy vakbarát honlapra: http://www.kontenerpiac.hu/

Lehet hozzá az MVGYOSZ-tól ajánlást szerezni (mint a fent említett lapon). A megfelelő e-mail címét így nem tenném ki ide, de ha a kapcsolat menüponton keresztül üldesz üzenetet, elmondom a mikéntjét. Az ajánlást csak akkor kapod meg, ha a W3C WAI WCAG 1.0 min. A szintjének és az 508-as szekcióban leírt ellőírásoknak megfelel az oldalad és az MVGYOSZ munkatársa tesztelte. Tehát, ha nem felel meg a szabványoknak, nem is érdemes teszteltetni.

Végezetül egy javaslat: töltsd le a JAWS magyar verziójának a demóját (40 percig megy egy indulással) és teszteld azzal az oldalt.

Remélem, segítettem.
2

Ez mutatja a struktúrát

Jano · 2005. Dec. 7. (Sze), 14.02
Világszerte ez az elterjedt módja a menük jelölésének. Ilyenkor ugyanis az almenüről tudni, hogy melyik főmenüponthoz tartozik. Ez a te véleményed, hogy idegeítő a JAWS felolvasási módja, vagy tudod, hogy vakok is ezt gondolják.

Kgyt?
3

Vakok...

janoszen · 2005. Dec. 7. (Sze), 14.12
Erre speciel a vakok hívták fel a figyelmemet. Ezen én is kicsit meglepődtem, de igaz, hogy ha 10-15 menü esetén az ember könnyen elveszti a tájékozódást.
4

És mi legyen helyett?

Jano · 2005. Dec. 7. (Sze), 14.20
És mit javasoltak helyette?
5

Én megoldásom...

janoszen · 2005. Dec. 7. (Sze), 14.29
Az én lehetséges két megoldásom a következő lenne:

1.

<div id="menu">
 <h1>Főmenü</h1>
 <ul>
  <li><h2><a>Menüpont</a></h2></li>
  <ul>
   ...
  </ul>
 </ul>
</div>
2.

<div id="menu">
 <h1>Főmenü</h1>
 <ul>
  <li><a>Menüpont</a></li>
  <li><a>Menüpont</a></li>
  <li><a>Menüpont</a></li>
 </ul>
 <h2>Almenü</h2>
 <ul>
  <li><a>Menüpont</a></li>
  <li><a>Menüpont</a></li>
 </ul>
</div>
Mindkét kódban a fejléceket CSSsel elrejtjük a látók számára.

Mint látható, az 1. kódban minden almenü szerepel, míg a második kódban csak az aktuális almenü. (Az első kódot nem teszteltem.)

Ennek a módszernek az az előnye, hogy a JAWS a fejlécek "alatt" kiemeli, hogy az elemekhez melyik fejléc tartozik.
6

nem az igazi

tiku I tikaszvince · 2005. Dec. 7. (Sze), 14.50
Az első változat nem valid, a másodiknál pedig oda a hőn áhított szemantikusság

Szerintem ez az a pont, ahol el kell dönteni, hogy a szabványnak megfeleő és szemantikus lapot készítesz, vagy nem...

TikuVoltam
Ma is holnap fekszünk le, mint tegnap
8

Valóban...

janoszen · 2005. Dec. 7. (Sze), 14.55
Sajnos, igazad van.

Az első változatot kellene valahogy validdá tenni.

A második változatnál helyreállítaná a szemantikusságot, ha az ember rel=chapter, section, subsection-nel ellátott diveket alkalmazna? Védül is, a menü részegysége...

Mindenesetre a 2. példa teljesen használható felolvasóprogrammal a vak tesztelők bevallása szerint.
10

Mégsem...

janoszen · 2005. Dec. 7. (Sze), 15.11
Üdv!

A következő fájlt töltöttem fel validálásra a W3C validátorának:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Test</title>
 </head>

 <body>
  <div id="menu">
   <h1>Menü</h1>
   <ul>
    <li><h2><a>Menüpont</a></h2></li>
   </ul>
  </div>
 </body>
</html>
Azt mondta rá, hogy valid. ul>li-n belül lehetnek blokk-szintű elemek. Tehát az első példa használható. Csak JAWS-szal kellene meghallgatni.
11

Ul-ben csak LI!

Jano · 2005. Dec. 7. (Sze), 17.48
Az első példádban az a probléma, hogy az UL-ben közvetlenül újabb UL-t nyitsz. UL-ben csak LI elemek lehetnek és ha annak van al listája akkor azt az LI elemen belül kell nyitni!
12

Valid....

janoszen · 2005. Dec. 7. (Sze), 18.26
Figyelj, hidd már el, hogy a validátor azt mondja rá, hogy valid. Egyébként ul-en belül lehet csak li, de az li-n belül más is lehet.

De ha nem hiszel nekem, fogd a kódot, másold be egy notepadbe és töltsd fel a validátornak. Az UTF-8 miatt üvöltözni fog, de más baja nem lesz.
13

DTD...

janoszen · 2005. Dec. 7. (Sze), 18.27
Most néztem meg a DTDt, at LIben LEHET blokk szintű elem.
14

Látom...

janoszen · 2005. Dec. 7. (Sze), 18.28
Látom a hibát, az első példában az LI-t a beágyazott UL UTÁN kellett volna bezárni. Bocsánat mindenkitől. :) Elírtam és nem értettem, mi volt a bajotok. :D Szóval a helyes kód az első példához:

<div id="menu">
 <h1>Menü</h1>
 <ul>
  <li>
   <h2><a>Menüpont</a></h2>
   <ul>
    ...
   </ul>
  </li>
 </ul>
</div>
Persze, aztán még lehet fokozni a gyönyöröket ugrópontokkal, ugrás a következő menüre, ugrás az előző menüre, stb.
15

Ettől még a lista bemondás marad

Jano · 2005. Dec. 7. (Sze), 18.46
Nem egészen értelek: azt mondtad a zavaró az, hogy bemondja a Jaws, hogy lista, lista vége stb. Ennél a megoldásnál ha marad az egymásbaágyazott lista ugyanúgy befogja mondani. Vagy itt az a lényeg, hogy beleraktál egy H2-t és ezt már máshogy olvassa fel? Vagy azért jó mert a H2-nél tudni fogja, a hallgató, hogy most a külső listában van?

Bocs tényleg érdekel.
16

Segít.

janoszen · 2005. Dec. 7. (Sze), 19.18
Azt hiszem, segít. A JAWS valahogy kielemeli, hogy most melyik heading alatt van a felhasználó. Az 1. változatot nem teszteltem JAWS-szal, csak a 2-at tesztelte nekem egy vak felhasználó. A headingek helyes használtata nagyban növeli a használhatóságot. Össze fogok rakni egy demót és megkérem az ismerősömet, hogy tesztelje le. Kíváncsi vagyok, mit mond rá.
9

Köszönöm

suexID · 2005. Dec. 7. (Sze), 14.57
Először is köszönöm a részletes választ!
A helyzet az, hogy engem nem is annyira az ajánlások érdekelnek mint inkább a valódi funkcionalitás. Tehát nekem az lenne a fontos, hogy a lap vakok számára is gyorsan kezelhető legyen és ne okozzak nekik kellemetlenségeket.

Az ajánlással kapcsolatban majd megkereslek a kapcsolati lapodon, egyelőre még csak a cms kódja íródik, a sablonok valamikor január közepére készülnek el.

Még egyszer köszönöm a segítséget!
7

Mot nézem csak...

janoszen · 2005. Dec. 7. (Sze), 14.52
Most néztem csak a PHPs kérdésedet:

Szóval, az, hogy a tartalmakat dinamikusan generálod-e vagy sem, az a böngészőnek oly mindegy. :)

Egyébként dícséretes, hogy ilyen szemlélettel állsz neki oldalt készíteni.