{"id":88771,"date":"2026-08-12T14:25:59","date_gmt":"2026-08-12T11:25:59","guid":{"rendered":"https:\/\/twodots.gr\/?p=88771"},"modified":"2026-08-12T14:25:58","modified_gmt":"2026-08-12T11:25:58","slug":"nu-exista-nicio-sursa-scrisa-a-textului-evanghelic","status":"publish","type":"post","link":"https:\/\/twodots.gr\/ro\/den-yparchei-prosvasimi-grammatoseira-evanagnosto-keimeno\/","title":{"rendered":"Nu exist\u0103 un \u00abfont accesibil\u00bb: ce face de fapt un text u\u0219or de citit"},"content":{"rendered":"<div class=\"td-article-lede\">\n<p><strong>Nu exist\u0103 un font care, prin el \u00eensu\u0219i, s\u0103 fac\u0103 un site web accesibil. Tipografia u\u0219or de citit rezult\u0103 din urm\u0103toarele elemente: caractere distincte, dimensiune \u0219i grosime adecvate, contrast suficient, spa\u021biere stabil\u0103, lungime controlat\u0103 a r\u00e2ndului, reflow corect \u0219i teste efectuate cu persoane reale.<\/strong><\/p>\n<p>Decizia corect\u0103 din punct de vedere comercial nu este aceea de a c\u0103uta un font etichetat ca \u00abaccesibil\u00bb, ci de a defini roluri pentru textul de afi\u0219are \u0219i cel func\u021bional \u0219i de a verifica procesul de finalizare a comenzii, formularele, pre\u021burile, erorile \u0219i con\u021binutul la zoom, \u00een viewport redus \u0219i cu spa\u021bierea adaptat\u0103.<\/p>\n<\/div>\n<div class=\"td-article-toc\">\n<div class=\"td-toc-title\">Cuprins<\/div>\n<ul>\n<li><a href=\"#lathos-erotisi-sosti-grammatoseira\">De ce c\u0103utarea fontului \u00abpotrivit\u00bb porne\u0219te de la o \u00eentrebare gre\u0219it\u0103<\/a><\/li>\n<li><a href=\"#odigies-kai-mythoi-prosvasimotitas\">Cum se transform\u0103 cu u\u0219urin\u021b\u0103 instruc\u021biunile standardizate \u00een mituri<\/a><\/li>\n<li><a href=\"#charaktiristika-grammaton-anagnorisi\">Caracteristicile literelor care faciliteaz\u0103 recunoa\u0219terea<\/a><\/li>\n<li><a href=\"#spacing-kai-leitourgia\">Spa\u021bierea face parte din func\u021bionalitate, nu este un detaliu decorativ<\/a><\/li>\n<li><a href=\"#antithesi-megethos-mikos-grammis\">Contrastul, dimensiunea \u0219i lungimea liniei modific\u0103 acela\u0219i font<\/a><\/li>\n<li><a href=\"#dimiourgikotita-kai-prosvasimotita\">Creativitatea nu este \u00een contradic\u021bie cu accesibilitatea<\/a><\/li>\n<li><a href=\"#workflow-elegchou-typografias\">Un flux de lucru mai fiabil pentru designeri \u0219i speciali\u0219ti \u00een marketing<\/a><\/li>\n<li><a href=\"#ti-prepei-na-kratisei-epicheirisi\">Ce trebuie s\u0103 p\u0103streze o \u00eentreprindere<\/a><\/li>\n<\/ul>\n<\/div>\n<h2 id=\"lathos-erotisi-sosti-grammatoseira\">De ce c\u0103utarea fontului \u00abpotrivit\u00bb porne\u0219te de la o \u00eentrebare gre\u0219it\u0103<\/h2>\n<p>Promisiunea unui font accesibil tuturor este atractiv\u0103 deoarece transform\u0103 o problem\u0103 complex\u0103 \u00eentr-o simpl\u0103 alegere dintr-un meniu derulant. Dac\u0103 alegi fontul aprobat, teoretic ai rezolvat problema. \u00cens\u0103 oamenii nu citesc to\u021bi \u00een acela\u0219i mod. Vederea slab\u0103, dificult\u0103\u021bile de procesare fonologic\u0103, limba, contextul cultural \u0219i condi\u021biile economice sau tehnologice modific\u0103 experien\u021ba lecturii.<\/p>\n<p>Chiar \u0219i W3C subliniaz\u0103 c\u0103, de\u0219i anumite fonturi sunt mai u\u0219or de citit dec\u00e2t altele, nevoile difer\u0103 de la o persoan\u0103 la alta \u0219i nu exist\u0103 un consens care s\u0103 rezolve \u00een mod general dezbaterea dintre fonturile cu serif \u0219i cele f\u0103r\u0103 serif. Acest lucru nu \u00eenseamn\u0103 c\u0103 toate op\u021biunile sunt echivalente. \u00censeamn\u0103 c\u0103 contextul de utilizare are o importan\u021b\u0103 mai mare dec\u00e2t o simpl\u0103 etichet\u0103.<\/p>\n<p>\u00cen cazul unui site de comer\u021b electronic, \u00eentrebarea nu este, a\u0219adar, \u00abcare font este accesibil?\u00bb, ci \u00abpoate clientul s\u0103 recunoasc\u0103, s\u0103 \u00een\u021beleag\u0103 \u0219i s\u0103 ac\u021bioneze pe baza informa\u021biei, \u00een contextul real de utilizare?\u00bb. Un proces de finalizare a comenzii bine conceput necesit\u0103 o ierarhie clar\u0103, pre\u021buri lizibile, mesaje de eroare u\u0219or de \u00een\u021beles \u0219i un layout care s\u0103 r\u0103m\u00e2n\u0103 func\u021bional atunci c\u00e2nd utilizatorul m\u0103re\u0219te sau modific\u0103 dimensiunea textului. Aceast\u0103 rezisten\u021b\u0103 face parte din modul \u00een care <a href=\"https:\/\/twodots.gr\/pos-mia-istoselida-afxanei-tis-poliseis-praktikos-odigos\/\">un site web sus\u021bine v\u00e2nz\u0103rile<\/a>, deoarece reduce incertitudinea chiar \u00eenainte de ac\u021biune.<\/p>\n<div class=\"td-comparison\">\n<p class=\"td-comparison-title\">Patru niveluri care determin\u0103 dac\u0103 un text este u\u0219or de citit<\/p>\n<div class=\"td-comparison-cards td-comparison-cards--horizontal\">\n<div class=\"td-comparison-grid td-comparison-grid--four\">\n<div class=\"td-platform-card\">\n<h3>Tipul caracterelor<\/h3>\n<p>Literele \u0219i cifrele trebuie s\u0103 prezinte suficiente diferen\u021be, astfel \u00eenc\u00e2t I, l, 1 \u0219i alte forme similare s\u0103 nu fie confundate \u00een valori, coduri \u0219i c\u00e2mpuri.<\/p>\n<\/div>\n<div class=\"td-platform-card\">\n<h3>Set\u0103ri tipografice<\/h3>\n<p>Dimensiunea, greutatea, \u00een\u0103l\u021bimea liniei, spa\u021bierea \u00eentre caractere \u0219i lungimea liniei influen\u021beaz\u0103 mai mult aspectul aceleia\u0219i familii de fonturi dec\u00e2t o etichet\u0103 general\u0103 de tip \u201eserif\u201d sau \u201esans serif\u201d.<\/p>\n<\/div>\n<div class=\"td-platform-card\">\n<h3>Aspect adaptabil<\/h3>\n<p>Butoanele, cardurile, elementele de navigare \u0219i formularele trebuie s\u0103 reziste la m\u0103rirea textului \u0219i a spa\u021biului f\u0103r\u0103 decup\u0103ri, suprapuneri sau derulare orizontal\u0103.<\/p>\n<\/div>\n<div class=\"td-platform-card\">\n<h3>Oameni \u0219i con\u021binut<\/h3>\n<p>Limba, dispozitivul, modul de afi\u0219are \u0219i modul de procesare difer\u0103. Standardele reduc obstacolele previzibile, \u00een timp ce testele le dezv\u0103luie pe celelalte.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"odigies-kai-mythoi-prosvasimotitas\">Cum se transform\u0103 cu u\u0219urin\u021b\u0103 instruc\u021biunile standardizate \u00een mituri<\/h2>\n<p>D\u00edaz folose\u0219te ca exemplu cerin\u021bele ADA privind caracterele sans-serif pe anumite ecrane \u0219i \u00een semnalistic\u0103. Regulile au fost create pentru domenii de aplicare clare, dar atunci c\u00e2nd sunt scoase din contextul lor, pot fi transformate \u00eentr-un dogm\u0103 general\u0103 conform c\u0103reia caracterele serif sunt \u00eentotdeauna interzise. U.S. Access Board prevede \u00eentr-adev\u0103r utilizarea fonturilor sans-serif pentru anumite caractere \u00een relief \u0219i pentru anumite semne de semnalizare; acest lucru nu constituie \u00eens\u0103 o regul\u0103 universal\u0103 valabil\u0103 pentru fiecare articol digital sau marc\u0103.<\/p>\n<p>Aceast\u0103 distinc\u021bie este esen\u021bial\u0103 pentru echipele de marketing \u0219i design. Respectarea standardului necesit\u0103 o interpretare precis\u0103 a acestuia: ce mijloc de comunicare acoper\u0103, la ce nivel de implementare se refer\u0103 \u0219i ce comportament testeaz\u0103. Copierea unei recomand\u0103ri dintr-un carusel f\u0103r\u0103 contextul ini\u021bial poate crea un fals sentiment de siguran\u021b\u0103.<\/p>\n<p>Ghidurile reprezint\u0103 doar ni\u0219te limite minime de verificare, nu un substitut pentru cercetarea utilizatorilor. O pagin\u0103 poate trece de o verificare tehnic\u0103 \u0219i, cu toate acestea, s\u0103 prezinte dificult\u0103\u021bi pentru o parte din public. \u00cen schimb, o alegere stilistic\u0103 poate fi p\u0103strat\u0103 dac\u0103 este utilizat\u0103 cu modera\u021bie, la dimensiuni mari \u0219i f\u0103r\u0103 a transmite ea \u00eens\u0103\u0219i informa\u021bii esen\u021biale.<\/p>\n<div class=\"td-article-note\"><strong>Nu extinde\u021bi o regul\u0103 dincolo de domeniul s\u0103u de aplicare:<\/strong> U.S. Access Board impune utilizarea fonturilor sans serif pentru anumite caractere de semnalizare \u00een relief. Aceasta nu reprezint\u0103 o interdic\u021bie general\u0103 a fonturilor serif pe site-uri web, \u00een articole sau \u00een magazinele online.<\/div>\n<h2 id=\"charaktiristika-grammaton-anagnorisi\">Caracteristicile literelor care faciliteaz\u0103 recunoa\u0219terea<\/h2>\n<p>Articolul propune principii vechi \u0219i consacrate: utilizarea adecvat\u0103 a stilului, o \u00een\u0103l\u021bime a literelor (x-height) relativ mare, litere care se disting clar unele de altele \u0219i spa\u021biere propor\u021bional\u0103. Un font script decorativ poate fi potrivit pentru un titlu scurt, dar nu reprezint\u0103 o alegere evident\u0103 pentru un text mic de mare volum. Atunci c\u00e2nd literele mici sunt mult prea mici \u00een compara\u021bie cu majusculele, textul devine mai greu de citit, deoarece majoritatea literelor cu care se \u00eent\u00e2lne\u0219te cititorul sunt mici.<\/p>\n<p>De asemenea, D\u00edaz descurajeaz\u0103 utilizarea caracterelor alc\u0103tuite exclusiv din forme geometrice similare, deoarece acestea \u00eengreuneaz\u0103 distingerea. Principiul poate fi verificat \u00een practic\u0103: compara\u021bi perechi precum litera majuscul\u0103 I, litera minuscul\u0103 l \u0219i cifra 1, sau litere cu forme similare \u00een limba con\u021binutului. \u00cen cazul codurilor, valorilor, adreselor \u0219i formularelor, ambiguitatea caracterelor poate deveni o eroare func\u021bional\u0103, nu doar o problem\u0103 estetic\u0103.<\/p>\n<p>Alegerea trebuie testat\u0103 \u00een condi\u021bii reale de greutate, dimensiune \u0219i mediu. \u00centr-o <a href=\"https:\/\/twodots.gr\/website-design-inspiration-prin-chtioume-ananeosoume-site\/\">actualizarea site-ului web<\/a>, referin\u021bele vizuale reprezint\u0103 un punct de plecare \u0219i nu o dovad\u0103 c\u0103 acela\u0219i stil tipografic va func\u021biona \u00een contextul con\u021binutului real. Un font care pare clar pe un afi\u0219 poate da gre\u0219 pe o fi\u0219\u0103 de produs pentru dispozitive mobile. Identitatea vizual\u0103 nu se pierde atunci c\u00e2nd echipa folose\u0219te un stil diferit pentru textul de afi\u0219are \u0219i altul pentru textul de corp; dimpotriv\u0103, se ob\u021bine un sistem coerent.<\/p>\n<h2 id=\"spacing-kai-leitourgia\">Spa\u021bierea face parte din func\u021bionalitate, nu este un detaliu decorativ<\/h2>\n<p>O distan\u021b\u0103 prea mic\u0103 \u00eentre litere poate face ca acestea s\u0103 par\u0103 unite vizual \u0219i s\u0103 \u00eencetineasc\u0103 recunoa\u0219terea. Design Week asociaz\u0103 spa\u021bierea str\u00e2ns\u0103 cu dificult\u0103\u021bi \u00een mi\u0219c\u0103rile saccadice ale ochilor \u0219i recomand\u0103 ca, \u00een cazul \u00een care reprezint\u0103 o alegere estetic\u0103 con\u0219tient\u0103, aceasta s\u0103 se limiteze la titluri scurte \u0219i de dimensiuni mari.<\/p>\n<p>WCAG 1.4.12 nu impune un spa\u021biu ini\u021bial specific pentru fiecare design. Se cere ca con\u021binutul sau func\u021bionalitatea s\u0103 nu se piard\u0103 atunci c\u00e2nd utilizatorul aplic\u0103 o \u00een\u0103l\u021bime a liniei (line-height) de cel pu\u021bin 1,5 ori dimensiunea fontului, spa\u021bierea \u00eentre paragrafe de 2 ori, spa\u021bierea \u00eentre litere de 0,12 ori \u0219i spa\u021bierea \u00eentre cuvinte de 0,16 ori dimensiunea fontului. Esen\u021ba este adaptabilitatea: containerele, butoanele \u0219i cardurile nu trebuie s\u0103 taie sau s\u0103 suprapun\u0103 textul.<\/p>\n<p>Pentru echipele de produs, acest lucru se traduce printr-un proces specific de asigurare a calit\u0103\u021bii (QA). Activeaz\u0103 suprascrierile \u00een cele patru c\u00e2mpuri, verific\u0103 navigarea, bannerele, butoanele, filtrele, procesul de finalizare a comenzii \u0219i st\u0103rile de eroare. Un sistem de design care func\u021bioneaz\u0103 doar cu valorile implicite nu este robust.<\/p>\n<div class=\"td-chart td-chart--metrics\">\n<p class=\"td-chart-title\">\u0218ase criterii verificabile ale WCAG privind textul \u0219i aspectul paginii<\/p>\n<p class=\"td-chart-intro\">Primele patru valori reprezint\u0103 set\u0103rile de testare pentru WCAG 2.2 SC 1.4.12. Ultimele dou\u0103 se refer\u0103 separat la SC 1.4.4 \u0219i 1.4.10; nu reprezint\u0103 un stil ini\u021bial recomandat.<\/p>\n<div class=\"td-metric-grid\">\n<div class=\"td-metric-card\">\n<div class=\"td-metric-value\">1,5\u00d7<\/div>\n<div class=\"td-metric-label\">\u00cen\u0103l\u021bimea liniei<\/div>\n<p>Con\u021binutul trebuie s\u0103 aib\u0103 o \u00een\u0103l\u021bime a r\u00e2ndului de cel pu\u021bin 1,5 ori dimensiunea fontului.<\/p>\n<\/div>\n<div class=\"td-metric-card\">\n<div class=\"td-metric-value\">2\u00d7<\/div>\n<div class=\"td-metric-label\">Spa\u021bierea \u00eentre paragrafe<\/div>\n<p>Spa\u021bierea dup\u0103 un paragraf este testat\u0103 la cel pu\u021bin de dou\u0103 ori dimensiunea fontului.<\/p>\n<\/div>\n<div class=\"td-metric-card\">\n<div class=\"td-metric-value\">0,12\u00d7<\/div>\n<div class=\"td-metric-label\">Spa\u021bierea dintre litere<\/div>\n<p>M\u0103rirea tracking-ului nu trebuie s\u0103 taie sau s\u0103 acopere con\u021binutul.<\/p>\n<\/div>\n<div class=\"td-metric-card\">\n<div class=\"td-metric-value\">0,16\u00d7<\/div>\n<div class=\"td-metric-label\">Spa\u021bierea dintre cuvinte<\/div>\n<p>Butoanele, etichetele \u0219i cardurile trebuie s\u0103 r\u0103m\u00e2n\u0103 func\u021bionale cu valoarea de testare.<\/p>\n<\/div>\n<div class=\"td-metric-card\">\n<div class=\"td-metric-value\">200%<\/div>\n<div class=\"td-metric-label\">Redimensionare text<\/div>\n<p>SC 1.4.4 impune dublarea textului f\u0103r\u0103 pierderi de con\u021binut sau de func\u021bionalitate.<\/p>\n<\/div>\n<div class=\"td-metric-card\">\n<div class=\"td-metric-value\">320 px CSS<\/div>\n<div class=\"td-metric-label\">Reflow<\/div>\n<p>SC 1.4.10 prevede ca con\u021binutul vertical s\u0103 se adapteze f\u0103r\u0103 derulare \u00een dou\u0103 dimensiuni.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"antithesi-megethos-mikos-grammis\">Contrastul, dimensiunea \u0219i lungimea liniei modific\u0103 acela\u0219i font<\/h2>\n<p>Aceea\u0219i familie de fonturi poate fi u\u0219or de citit cu textul de culoare \u00eenchis\u0103 pe un fundal clar \u0219i extrem de greu de citit cu o grosime sub\u021bire \u0219i o nuan\u021b\u0103 de gri deschis. D\u00edaz propune un compromis util: dac\u0103 o marc\u0103 insist\u0103 asupra unui contrast mai redus, poate oferi o op\u021biune cu contrast ridicat. Acest lucru nu face ca versiunea ini\u021bial\u0103 s\u0103 fie automat ideal\u0103, dar recunoa\u0219te faptul c\u0103 accesibilitatea poate fi \u00eembun\u0103t\u0103\u021bit\u0103 prin controlul exercitat de utilizator.<\/p>\n<p>Criteriile WCAG trebuie citite separat. SC 1.4.4 (AA) impune ca textul s\u0103 poat\u0103 fi m\u0103rit p\u00e2n\u0103 la 200% f\u0103r\u0103 pierderi de con\u021binut sau func\u021bionalitate, \u00een timp ce SC 1.4.10 (AA) verific\u0103 rearanjarea textului la o l\u0103\u021bime de 320 px CSS f\u0103r\u0103 derulare bidirec\u021bional\u0103. SC 1.4.8 este un criteriu AAA \u0219i solicit\u0103 existen\u021ba unui mecanism pentru op\u021biuni precum culori, l\u0103\u021bime de p\u00e2n\u0103 la 80 de caractere, evitarea alinierii complete \u0219i ajustarea spa\u021biului \u00eentre caractere. Aceste distinc\u021bii arat\u0103 de ce un nume de font nu este suficient: tipografia func\u021bioneaz\u0103 \u00een cadrul unui layout.<\/p>\n<p>\u00cen practic\u0103, un articol, o pagin\u0103 de destina\u021bie \u0219i o pagin\u0103 de finalizare a comenzii necesit\u0103 o densitate diferit\u0103. Paragrafele lungi beneficiaz\u0103 de o lungime controlat\u0103 a r\u00e2ndurilor \u0219i de o separare vizibil\u0103. Elementele tranzac\u021bionale necesit\u0103 etichete clare \u0219i spa\u021biu pentru m\u0103rire sau traduceri. Titlurile pot fi mai expresive, at\u00e2ta timp c\u00e2t r\u0103m\u00e2n u\u0219or de recunoscut.<\/p>\n<h2 id=\"dimiourgikotita-kai-prosvasimotita\">Creativitatea nu este \u00een contradic\u021bie cu accesibilitatea<\/h2>\n<p>Punctul cel mai productiv al sursei este respingerea falsului dilem\u0103. Un font sub\u021bire, de tip grotesque, cu spa\u021biere str\u00e2ns\u0103 nu trebuie s\u0103 dispar\u0103 din portofoliul niciunui brand. Poate fi folosit ca element de afi\u0219are scurt, de dimensiuni mari, \u00een timp ce descrierile, butoanele \u0219i informa\u021biile esen\u021biale urmeaz\u0103 o logic\u0103 mai strict\u0103. Inten\u021bia r\u0103m\u00e2ne aceea\u0219i, dar riscul este limitat.<\/p>\n<p>Aceast\u0103 logic\u0103 stabile\u0219te reguli privind rolurile, \u00een loc de restric\u021bii privind familiile. Stabile\u0219ti unde este permis tipul expresiv, care este dimensiunea minim\u0103, ce grosime se folose\u0219te, c\u00e2t text poate cuprinde \u0219i ce familie de fallback se aplic\u0103. Astfel, sistemul de design ghideaz\u0103 deciziile concrete \u0219i leag\u0103 experien\u021ba utilizatorului (UX) de coeren\u021ba m\u0103rcii. Acela\u0219i principiu se observ\u0103 atunci c\u00e2nd un <a href=\"https:\/\/twodots.gr\/dedham-vale-rebranding-topos-brand\/\">rebrandingul transpune identitatea \u00een aplica\u021bii consecvente<\/a> \u00een loc s\u0103 se limiteze la un singur semnal.<\/p>\n<p>Pentru m\u0103rci, avantajul este dublu. Identitatea vizual\u0103 r\u0103m\u00e2ne distinct\u0103, iar echipa nu este nevoit\u0103 s\u0103 improvizeze de fiecare dat\u0103. Accesibilitatea devine o competen\u021b\u0103 de proiectare cu constr\u00e2ngeri, nu o verificare de ultim moment, cu pu\u021bin \u00eenainte de lansare.<\/p>\n<div class=\"td-decision-band\">\n<p class=\"td-decision-label\">C\u00e2nd un font expresiv r\u0103m\u00e2ne o alegere sigur\u0103?<\/p>\n<p><strong>Atunci c\u00e2nd este utilizat \u00eentr-un text scurt afi\u0219at pe ecran, cu dimensiune \u0219i contrast adecvate, \u0219i nu reprezint\u0103 singurul element care con\u021bine o valoare, o instruc\u021biune, o eroare, o etichet\u0103 sau alt\u0103 informa\u021bie care necesit\u0103 o ac\u021biune.<\/strong><\/p>\n<p>Textul principal \u0219i textul func\u021bional necesit\u0103 reguli mai stricte. Astfel, marca \u00ee\u0219i p\u0103streaz\u0103 caracterul f\u0103r\u0103 a transfera costul exprim\u0103rii asupra cititorului.<\/p>\n<\/div>\n<h2 id=\"workflow-elegchou-typografias\">Un flux de lucru mai fiabil pentru designeri \u0219i speciali\u0219ti \u00een marketing<\/h2>\n<p>Verificarea porne\u0219te de la con\u021binutul propriu-zis \u0219i de la costul e\u0219ecului. Titlurile, textul principal, etichetele, pre\u021burile, informa\u021biile juridice, erorile \u0219i \u00eendemnurile la ac\u021biune nu au acela\u0219i rol \u0219i nici aceea\u0219i marj\u0103 de expresivitate.<\/p>\n<p>Testarea calit\u0103\u021bii trebuie s\u0103 se desf\u0103\u0219oare \u00eentr-un mediu adaptabil \u0219i nu doar pe plan\u0219e de lucru statice. Aceast\u0103 abordare completeaz\u0103 <a href=\"https:\/\/twodots.gr\/epanaprosdiorizontas-to-pixel-perfect-web-design\/\">redefinirea conceptului de web design \u201epixel-perfect\u201d<\/a>: calitatea se m\u0103soar\u0103 prin comportamentul sistemului, nu prin reproducerea unei imagini ideale.<\/p>\n<div class=\"td-step-list\">\n<p class=\"td-step-list-title\">\u0218ase pa\u0219i pentru verificarea lizibilit\u0103\u021bii textului \u00eenainte de lansare<\/p>\n<ol>\n<li><span class=\"td-step-kicker\">Pasul 1<\/span><strong>Identifica\u021bi rolurile textului<\/strong>\n<p>Distingeti titlurile, textul principal, etichetele, preturile, erorile, textul juridic \u0219i \u00eendemnurile la ac\u021biune. Nota\u021bi care sunt elementele necesare pentru finalizarea unei achizi\u021bii sau a unei cereri.<\/p>\n<\/li>\n<li><span class=\"td-step-kicker\">Pasul 2<\/span><strong>Verifica\u021bi caracterele din con\u021binutul real<\/strong>\n<p>Testa\u021bi caracterele grece\u0219ti, latine, cifrele, codurile \u0219i simbolurile la greutatea \u0219i dimensiunea exacte de produc\u021bie. Nu evalua\u021bi fontul doar pe baza unui specimen sau a unui titlu.<\/p>\n<\/li>\n<li><span class=\"td-step-kicker\">Pasul 3<\/span><strong>Evalua\u021bi contrastul \u0219i men\u021bine\u021bi o ierarhie clar\u0103<\/strong>\n<p>Verifica\u021bi fiecare stare, nu doar cea implicit\u0103: hover, focus, dezactivat\u0103, mesaj de validare \u0219i textul de pe imagine. Ierarhia trebuie s\u0103 r\u0103m\u00e2n\u0103 vizibil\u0103 f\u0103r\u0103 a se baza doar pe culoare.<\/p>\n<\/li>\n<li><span class=\"td-step-kicker\">Pasul 4<\/span><strong>Aplica\u021bi cele patru valori din SC 1.4.12<\/strong>\n<p>M\u0103ri\u021bi simultan spa\u021bierea \u00eentre r\u00e2nduri, paragraf, litere \u0219i cuvinte. Identifica\u021bi zonele decupate, suprapunerile, etichetele ascunse \u0219i butoanele care nu se m\u0103resc odat\u0103 cu textul.<\/p>\n<\/li>\n<li><span class=\"td-step-kicker\">Pasul 5<\/span><strong>\u00cencerca\u021bi resize \u0219i reflow<\/strong>\n<p>Verifica\u021bi textul la o m\u0103rire de 200% \u0219i con\u021binutul la o l\u0103\u021bime de 320 px CSS. Meniul de navigare, fi\u0219ele de produse, procesul de finalizare a comenzii \u0219i ferestrele de dialog modale trebuie s\u0103 r\u0103m\u00e2n\u0103 lizibile \u0219i func\u021bionale.<\/p>\n<\/li>\n<li><span class=\"td-step-kicker\">Pasul 6<\/span><strong>Verifica\u021bi informa\u021biile cu ajutorul altor persoane \u0219i nota\u021bi rezultatele<\/strong>\n<p>Lua\u021bi \u00een considerare cititorii cu nevoi, dispozitive \u0219i set\u0103ri diferite. Transforma\u021bi concluziile \u00een reguli ale sistemului de design \u0219i \u00een teste de regresie pentru versiunile viitoare.<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<p>Rezultatele trebuie s\u0103 fie integrate \u00een sistemul de design sub form\u0103 de reguli privind rolurile, dimensiuni minime, greut\u0103\u021bi aprobate, limite de lungime \u0219i teste de regresie. Astfel, urm\u0103toarea pagin\u0103 de destina\u021bie sau fi\u0219\u0103 de produs preia aceast\u0103 decizie, \u00een loc s\u0103 porneasc\u0103 din nou de la zero.<\/p>\n<h2 id=\"ti-prepei-na-kratisei-epicheirisi\">Ce trebuie s\u0103 p\u0103streze o \u00eentreprindere<\/h2>\n<p>Accesibilitatea este o scal\u0103 de \u00eembun\u0103t\u0103\u021bire, nu o caset\u0103 de selectare care garanteaz\u0103 un rezultat perfect pentru to\u021bi. Acest lucru nu diminueaz\u0103 valoarea conformit\u0103\u021bii. Dimpotriv\u0103, o plaseaz\u0103 \u00een contextul corect: ca baz\u0103 pe care se construiesc op\u021biuni clare, componente rezistente, prezent\u0103ri alternative \u0219i o monitorizare continu\u0103.<\/p>\n<p>O companie nu trebuie s\u0103 a\u0219tepte urm\u0103toarea reproiectare. Poate \u00eencepe cu elementele cu impact ridicat: procesul de finalizare a comenzii, formularele, pre\u021burile, navigarea principal\u0103 \u0219i con\u021binutul care determin\u0103 luarea unei decizii. Verificarea set\u0103rilor de spa\u021biere \u0219i a zoomului dezv\u0103luie adesea probleme de layout care nu sunt vizibile \u00een macheta ideal\u0103. Pentru paginile existente, acest proces poate fi integrat \u00eentr-un <a href=\"https:\/\/twodots.gr\/veltiosi-seo-gia-yparchouses-istoselides-praktiko-plano-diorthoseon\/\">Plan ierarhizat de corec\u021bii tehnice ale site-ului web<\/a>, \u00eencep\u00e2nd cu \u0219abloanele \u0219i parcursurile cu cel mai mare impact asupra afacerii.<\/p>\n<p>\u00centrebarea esen\u021bial\u0103 nu este ce font ne va scuti de r\u0103spundere. Pentru un magazin online, aceasta \u00eenseamn\u0103 c\u0103 <a href=\"https:\/\/twodots.gr\/poso-kostizei-i-kataskevi-e-shop-paragontes-epiloges-kai-pragmatikos-proypologismos\/\">realizarea \u0219i bugetul magazinului online<\/a> trebuie s\u0103 includ\u0103 testarea calit\u0103\u021bii (QA) \u00een ceea ce prive\u0219te adaptabilitatea la diferite dispozitive \u0219i accesibilitatea, nu doar aspectul estetic al implement\u0103rii. Este vorba despre modul \u00een care vom proiecta un sistem care respect\u0103 diversitatea cititorilor, permite adapt\u0103ri \u0219i p\u0103streaz\u0103 identitatea creativ\u0103 f\u0103r\u0103 a ascunde informa\u021bii esen\u021biale.<\/p>\n<section class=\"td-service-cta\">\n<div class=\"td-service-cta-content\">\n<p class=\"td-service-cta-eyebrow\">Realizare de site-uri web de c\u0103tre TWO DOTS<\/p>\n<p class=\"td-service-cta-title\">Face\u021bi din tipografia accesibil\u0103 o regul\u0103 a site-ului web, nu o corectur\u0103 de ultim moment.<\/p>\n<p>TWO DOTS combin\u0103 UX\/UI, dezvoltarea responsiv\u0103 \u0219i controlul tehnic al calit\u0103\u021bii (QA), astfel \u00eenc\u00e2t titlurile, formularele, pre\u021burile, con\u021binutul \u0219i \u00eendemnurile la ac\u021biune s\u0103 r\u0103m\u00e2n\u0103 u\u0219or de citit pe dispozitive reale \u0219i \u00een func\u021bie de preferin\u021bele utilizatorului.<\/p>\n<div class=\"td-service-cta-actions\"><a class=\"td-service-cta-button\" href=\"https:\/\/twodots.gr\/kataskevi-istoselidon\/\">Vede\u021bi serviciul de creare a site-urilor web<\/a><\/div>\n<\/div>\n<\/section>\n<section id=\"sychnes-erotiseis\" class=\"td-faq-section\">\n<div class=\"td-faq\">\n<p class=\"td-faq-heading\">\u00centreb\u0103ri frecvente<\/p>\n<details class=\"td-faq-item\">\n<summary class=\"td-faq-title\">Exist\u0103 un font accesibil tuturor?<\/summary>\n<div class=\"td-faq-content\">\n<p>Nu. Lizibilitatea depinde de cititor, de limb\u0103, de dispozitiv, de tipurile de caractere, de dimensiune, de spa\u021biere, de contrast, de lungimea r\u00e2ndului \u0219i de aspect.<\/p>\n<\/div>\n<\/details>\n<details class=\"td-faq-item\">\n<summary class=\"td-faq-title\">Sunt fonturile sans serif \u00eentotdeauna mai accesibile dec\u00e2t cele serif?<\/summary>\n<div class=\"td-faq-content\">\n<p>Nu ca regul\u0103 general\u0103 pentru web. Anumite cerin\u021be privind fonturile sans serif se refer\u0103 la anumite medii, cum ar fi semnalizarea \u00een relief, \u0219i nu trebuie generalizate la orice text digital.<\/p>\n<\/div>\n<\/details>\n<details class=\"td-faq-item\">\n<summary class=\"td-faq-title\">Ce anume verific\u0103 WCAG 1.4.12?<\/summary>\n<div class=\"td-faq-content\">\n<p>Verific\u0103 dac\u0103 nu se pierde con\u021binut sau func\u021bionalitate atunci c\u00e2nd utilizatorul m\u0103re\u0219te \u00een\u0103l\u021bimea r\u00e2ndului, spa\u021bierea \u00eentre paragrafe, spa\u021bierea \u00eentre litere \u0219i spa\u021bierea \u00eentre cuvinte la valorile specificate.<\/p>\n<\/div>\n<\/details>\n<details class=\"td-faq-item\">\n<summary class=\"td-faq-title\">WCAG impune ca valoarea line-height s\u0103 fie \u00eentotdeauna 1,5?<\/summary>\n<div class=\"td-faq-content\">\n<p>SC 1.4.12 nu impune aceste valori ca design ini\u021bial. Acesta impune ca con\u021binutul s\u0103 r\u0103m\u00e2n\u0103 intact atunci c\u00e2nd utilizatorul le aplic\u0103 f\u0103r\u0103 alte modific\u0103ri de stil.<\/p>\n<\/div>\n<\/details>\n<details class=\"td-faq-item\">\n<summary class=\"td-faq-title\">Se poate folosi un font decorativ?<\/summary>\n<div class=\"td-faq-content\">\n<p>Da, de obicei sub forma unui text scurt afi\u0219at pe ecran, cu dimensiuni \u0219i contrast adecvate. Acesta nu trebuie s\u0103 fie singurul suport al informa\u021biilor esen\u021biale, detaliate sau func\u021bionale.<\/p>\n<\/div>\n<\/details>\n<details class=\"td-faq-item\">\n<summary class=\"td-faq-title\">De ce este important\u0103 diferen\u021bierea caracterelor similare?<\/summary>\n<div class=\"td-faq-content\">\n<p>Deoarece confuzia dintre litere \u0219i cifre poate duce la erori reale \u00een ceea ce prive\u0219te pre\u021burile, codurile, adresele, numele de utilizator \u0219i formularele.<\/p>\n<\/div>\n<\/details>\n<details class=\"td-faq-item\">\n<summary class=\"td-faq-title\">Este suficient un test automatizat de accesibilitate?<\/summary>\n<div class=\"td-faq-content\">\n<p>Nu. Verific\u0103rile automate acoper\u0103 doar o parte din probleme. Sunt necesare verific\u0103ri manuale de adaptabilitate (responsive QA), teste de spa\u021biere \u0219i zoom, precum \u0219i evalu\u0103ri efectuate de persoane cu nevoi diferite.<\/p>\n<\/div>\n<\/details>\n<details class=\"td-faq-item\">\n<summary class=\"td-faq-title\">Care sunt aspectele unui magazin online care trebuie verificate \u00een primul r\u00e2nd?<\/summary>\n<div class=\"td-faq-content\">\n<p>Procesul de finalizare a comenzii, fi\u0219ele produselor, pre\u021burile, filtrele, navigarea, formularele, mesajele de eroare \u0219i \u00eendemnurile la ac\u021biune, deoarece orice problem\u0103 de tipografie sau de aspect \u00een aceste sec\u021biuni \u00eempiedic\u0103 direct efectuarea achizi\u021biei.<\/p>\n<\/div>\n<\/details>\n<\/div>\n<\/section>\n<div class=\"td-source-list\">\n<p id=\"piges\" class=\"td-source-list-title\">Surse<\/p>\n<ul>\n<li><a href=\"https:\/\/www.designweek.co.uk\/search\/typographic-accessibility\/\" target=\"_blank\" rel=\"noopener\">Design Week \u2014 De ce designerii trebuie s\u0103 \u021bin\u0103 cont de accesibilitate \u00een alegerea tipografiei<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/text-spacing\" target=\"_blank\" rel=\"noopener\">W3C WAI \u2014 \u00cen\u021belegerea cerin\u021bei de conformitate 1.4.12: Spa\u021bierea textului<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/resize-text.html\" target=\"_blank\" rel=\"noopener\">W3C WAI \u2014 \u00cen\u021belegerea cerin\u021bei de conformitate 1.4.4: Redimensionarea textului<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/reflow.html\" target=\"_blank\" rel=\"noopener\">W3C WAI \u2014 \u00cen\u021belegerea SC 1.4.10: Reflow<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/visual-presentation.html\" target=\"_blank\" rel=\"noopener\">W3C WAI \u2014 \u00cen\u021belegerea SC 1.4.8: Prezentarea vizual\u0103<\/a><\/li>\n<li><a href=\"https:\/\/www.access-board.gov\/ada\/guides\/chapter-7-signs\/\" target=\"_blank\" rel=\"noopener\">U.S. Access Board \u2014 Ghid privind standardele ADA: Semnalizare<\/a><\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Tipografia accesibil\u0103 nu se rezum\u0103 la alegerea unui font. Este un sistem care cuprinde caractere, spa\u021biere, contrast, rearanjare a textului \u0219i teste reale de utilizare.<\/p>","protected":false},"author":1,"featured_media":88786,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","footnotes":""},"categories":[17366],"tags":[3844,19259,3879,19257,19258],"class_list":["post-88771","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing","tag-ux-design","tag-wcag","tag-web-design","tag-prosvasimotita","tag-typografia"],"_links":{"self":[{"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/posts\/88771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/comments?post=88771"}],"version-history":[{"count":0,"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/posts\/88771\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/media\/88786"}],"wp:attachment":[{"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/media?parent=88771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/categories?post=88771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/twodots.gr\/ro\/wp-json\/wp\/v2\/tags?post=88771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}