Akadálymentesítés, fontsize change, Javascript

Sziasztok!

Van egy általam készített honlap, amit akadálymentesítenem kell. Sokat olvasgattam hogyan kell, stb..
Szeretnék integrálni bele egy Javascriptes Fontsize changert.
Na ez meg is volna, csak akadt egy probléma.
A leggyakrabban használt tagokban csinálja is a változást, DE
az olyan tagokban, amiben közvetlen van megadva a font méret, azt nem változtatja.
Tehát:

JÓ ITT:
<style> .test { font-size: 12px; } </style>
<span class="test">Szöveg.....</span>

ÉS NEM JÓ ITT:

<span style="font-size: 12px">Szöveg 2.....</span>

Amiért fontos ez: az általam írt tartalom kezelő a felhasználóknak TINYMCE-t használ, ami ilyen kódot generál :D

1874 megtekintés

jQuery-vel pl. megy ez:
$("span").css("fontSize","22px");

0 szavazat

A hozzászóláshoz be kell jelentkezni

Hát azt sajna nem ismerem

0 szavazat

A hozzászóláshoz be kell jelentkezni

akkor így:
for(var i=0; i < document.getElementsByTagName("span").length; i++) { document.getElementsByTagName("span")[i].style.fontSize = "22px"; }

0 szavazat

A hozzászóláshoz be kell jelentkezni

Kíváncsi lennék, mit olvastál arról hogy hogyan kell. Érdekel, tényleg.

Szerintem ugyanis tök rossz ez az irány.

Böngészők remek támogatást nyújtanak sokmindenre. Ilyen például saját színek, minimális betűméret stb. beállításának lehetősége, egyetlen gombnyomásra betűméret növelés stb. Ennek a szolgáltatásnak szerintem valóban itt a helye, a böngészőben, nem a html oldalon.

Véleményem szerint a helyes a11y (magyarul: a15s :-))) irány: ne használj a normálisnál rosszabb értékeket (például az átlagos honlaphoz képest kisebb betűket, rosszabb kontrasztú színpárokat), de akinek ez nem elég, annak a böngészőjében, és nem a te oldaladon kell megtalálnia (helyesebben: valószínűleg már rég megtalálta és használja) a megoldást.

Amit neked tenned kell: meggyőződni arról, hogy például nincs képen szöveg, vagy ha van akkor van megfelelő alt tag is; billentyűzetről is navigálható az oldal; a html-beli logikai sorrend megfelel a tartalom logikájának, tehát például szövegfelolvasó értelmes sorrendben olvas fel; esetleg egyéb css aural kiegészítők stb.

0 szavazat

A hozzászóláshoz be kell jelentkezni

Ez akadálymentes honlap felépítése ennél kicsit bonyolultabb.
Ez csak egy plusz lenne benne.

0 szavazat

A hozzászóláshoz be kell jelentkezni

Értem, hogy ennél bonyolultabb.

Nem értem, hogy miért kell megismételni a böngészőkben benne lévő funkciókat.

Tegyük fel egy pillanatra, hogy mondjuk gyengénlátó vagyok, az alapértelmezettnél nagyobb betűket tudok csak elolavsni. A te leendő honlapodra látogatva a lehetőségek a betűméret megnövelésére:

1. Mivel sok-sok más honlapnál szükségem volt már rá, ezért régesrég beállítottam a böngészőmet nagyobb betűk használatára. Tehát semmi teendőm.

2. Mivel sok-sok más honlapnál szükségem volt már rá, megtanultam hogy a Ctrl-+ nagyítja a betűket, ezért reflexből azt ütöm le.

3. Megkeresem, hogy az adott honlap milyen egyéni, és csak arra a honlapra jellemző megoldást nyújt a betűméret növelésére. (Mindezt úgy, hogy most nem is látom, mi van a képernyőn, mert túl pici. Vagy a betűméretnövelő opció eleve naggyal van?)

Nem látok egyetlen épeszű indokot sem, hogy miért választanám a 3-ast az 1-es vagy 2-es megoldás helyett.

De tényleg szeretnék tanulni, ezért örülnék ha értelmesen elmagyarázná valaki!

Véleményem szerint helyes a11y támogatáshoz vezető út az alábbi: Először meg kell ismerni, milyen támogatást nyújtanak a böngészők. Aztán ennek ismeretében a honlapot olyanra kell tervezni, hogy a böngésző élhessen ezekkel az a11y szolgáltatásokkal. Amit meg esetleg az a11y böngészőmodul nem tud megoldani az oldal segítségével, arra kell az oldalnak kitalálnia valamit. Nem pedig arra, amit a böngésző is meg tud tenni helyette.

0 szavazat

A hozzászóláshoz be kell jelentkezni

Szia!

A "px"-ben megadott betűméreteket a fentebb javasolt Ctrl+/Ctrl- az Internet Explorerben nem tudja nagyítani! (Mármint a Text size -> Small, Normal, Big stb menüje, a hotkey-t nem tudom.) Ezért sosem szabad PX betűméreteket használni. Ez nagyon fontos.

Ha a weblapot STANDARDS módra kapcsolod, akkor elég a BODY tegre megadni a betűméretet, 80-90% körüli általában jó, de vesd össze az igényelt pixelméreteddel. Fontos, hogy a %-ban megadott fontra hatnak a böngészők beállításai, tehát aki "vaksi" az úgyis nagyobbra állította már és jó lesz.

A TINYMCE-t is át lehet konfigurálni, hogy ne PX-et rakjon a font size-ba:

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advance…

Ha mindez megvan, akkor a böngésző fentebb említett alapfunkciója is tud méretezni, illetve a BODY-n egyszerűen javascriptből átírod a méretet, 90%, 100%, 110% és kész a nagyítás.

(document.getElementsByTagName('body')[0].style.fontSize = "100%" ... nem tesztelem!...)

Végül pedig fontos, hogy a többi betűméret is %-os legyen, pl "h1", "h2" "h3", így arányosan nőnek majd a BODY alap szöveg fontmérettel. Aki ezt elrontja, annak a folyószöveg lehagyja a címsorokat a növeléskor.

(Egyébként a www.useit.com is javasolta a kapcsolgatót, bár én magam nem nagyon örülök ennek!

""In this day and age, [...] most people who need to increase their font sizes in their web browser already know how to do it." WRONG" http://www.useit.com/alertbox/guesses-data.html

(Van részletesebb is, de most hirtelen nem lelem.)

Még annyi, hogy a !important-tal a fenti PX-es dolgot is megoldhatod, de semmiképp se használj PX-et (IE miatt).

.test { font-size: 12px !important; } ez felülbírálja az inline megadott méretet is.

0 szavazat

A hozzászóláshoz be kell jelentkezni

> A "px"-ben megadott betűméreteket a fentebb javasolt Ctrl+/Ctrl- az Internet Explorerben nem tudja nagyítani! (Mármint a Text size -> Small, Normal, Big stb menüje, a hotkey-t nem tudom.) Ezért sosem szabad PX betűméreteket használni. Ez nagyon fontos.

Hotkey IE6-ban nincs, IE7-től kezdve a fix méretet is nagyítja. A hotkey ugyanis nem a Text size, hanem a Zoom menühöz tartozik.

""In this day and age, [...] most people who need to increase their font sizes in their web browser already know how to do it." WRONG"

És ugyanitt:

""I've observed usability studies on sites that included text resize widgets [...] most, if not all, the participants [...] had no idea what it was." RIGHT"

Lehet, hogy először a célközösséget kéne jobban megismerni. Azok az emberek a célközönség, akik egyszerre fogyatékkal élők, és ráadásul totális számítástechnikai analfabéták, olyan szinten, hogy még arra is képtelenek, hogy megkérjenek valakit, állítsa be számukra nagy betűméretűre a gépet... (Az ilyen emberek egyáltalán hogyan fognak eljutni az oldalra, és hogy fogják tudni azt haszálni (pl. navigálni rajta)? Tényleg jó lenne látni egy teljes folyamatot az elejétől a végéig.) Vagy pedig olyanok, akik fogyatékkal élnek, de megtanulták, hogy a számítógépük milyen lehetőségeket nyújt az akadályok leküzdésére.

0 szavazat

A hozzászóláshoz be kell jelentkezni

Szia!

Ez igaz, bár én sosem értettem ennek a teljes nagyításnak a hasznát. Csak arra jó, hogy még a 19"-os monitoromon is jobbra-balra kelljen scrollozgatni olvasás/navigálás közben. :-(

Szerencsére a Text Size menü megmaradt és továbbra is úgy működik mint eddig, így aki 19" vagy kisebb monitorral rendelkezik talán azt választja a képszerű nagyítás helyett. Ahol pedig még mindig igaz az, hogy PX-ben megadott méretet nem lehet nagyítani.

Sajnos most már FF-ben is default a képszerű nagyítás. Előbb-utóbb talán megértem mire jó. Lehet, hogy a monitorok növekedése miatt találták ki? Ötlet, olvasnivaló link?

Köszi,
Lion

0 szavazat

A hozzászóláshoz be kell jelentkezni

Sajnos most már FF-ben is default a képszerű nagyítás. Előbb-utóbb talán megértem mire jó. Lehet, hogy a monitorok növekedése miatt találták ki? Ötlet, olvasnivaló link?

Jó például az olvashatatlanul kicsi betűs Flash animációkat és/vagy apró betűs képes linkeket tartalmazó oldalak nagyítására.

Olyankor is jó, amikor a szöveg nagyítása miatt szétesik az oldal, pedig fontos lenne, hogy ne essen szét.

Arra is jó, hogy a böngészőablaknál nagyobb, a böngésző által az ablak méretéhez kicsinyített képeket nagyobb felbontásban (több lépésben) lehessen nagyítani, ne csak egy bitesen (ablakhoz igazított kép vagy eredeti méretű kép).

0 szavazat

A hozzászóláshoz be kell jelentkezni

Köszönöm, megfogadok pár tanácsot.

TinyMCE meg érdekes, mert hiába admi meg hogy PX-ben adja meg az értékeket, (mikor kiválasztom még OK), de a megjelenített kódban meg a méretek: small,large....

ÉS ezt se akarja a JS befolyásolni.

De kipróbálaom azt amit írtál, hogy PT-ben megadni méretet, hátha ott nem lesz hülye.
:D

0 szavazat

A hozzászóláshoz be kell jelentkezni

PT-t sose mondtam. Az valami papíros betűméret, nyomdai. Hacsak nem nyomtatásra készülő dokumentumokból áll a weblap, felejsd el. :-)

Kipróbáltam a TinyMCE configot amit mondtam:

theme_advanced_font_sizes : "Smallest=70%,Smaller=80%,Normal=100%,Larger=110%,Largest=120%",

Teljesen jó lett a HTML kód, százalékos:

span style="font-size: 70%;"
span style="font-size: 80%;"
span style="font-size: 100%;"
span style="font-size: 110%;"
span style="font-size: 120%;"

(Csak ez a méret kevés, kell nagyobbakat is felvenni, győzzön nekik nevet adni az ember. Lehet, hogy egyszerűbb egyszerűen így megadni:

theme_advanced_font_sizes : "70%,80%,100%,110%,120%",)

A baj ezzel csak az, hogy a userek folyamatosan kérdezgetik, hogy mi az a %, mennyi ez PT-ben, én meg folyamatosan mondom, hogy a PT az egy inch alapú mértékegység, monitoron meg nem vonalzóval mérünk, mert ahány monitor annyi méret.

Gondolom ezért van alapból a TinyMCE-ben az beírva, hogy

12pt=normal,17pt=large stb

így a user azt látja, hogy "12pt", de a HTML kódba meg a méret NEVE kerül be. (amiket te is írtál, x-small, small, stb.)

Ezekkel a nevekkel meg az a baj, hogy rossz volt a CSS specifikáció és amiket megadtak, hogy egymáshoz képest mekkorák legyenek, azok .... nem nagyon emlkészem, kb 2 éve foglalkoztam ezekkel a "méret megnevezésekkel".... asszem nagyon elszállnak egymástól a méretek. Pl van ház méretű óriási, de nincs olyan amivel gyakorlatban is lehetne boldogulni.

Végül, hogy ne legyen fenékik tejfel, a %-osnak meg az a tulajdonsága, hogy a szövegkörnyezettől függ. (A nevesített az nem, azok abszolút méretek!)

table style=font-size: 120%

td
span style=font-size: 120%

akkor abban a TD-ben már a 120% 120%-a lesz! És bizony ez úgy is összejöhet, hogy class=nagyobb 2x egymásba ágyazva hasonló módon (pl table + benne td vagy span) A user meg nem érti, ha mindkettő "nagyobb" style akkor a második miért mégnagyobb. :-)

0 szavazat