În rolul meu de dezvoltator principal și designer web pentru Global Voices încerc mereu să fac site-ul să arate și să funcționeze bine pentru toți cititorii noștri, ceea ce implică menținerea accesibilității pe el. Citiți mai departe pentru a afla mai multe despre cele mai recente schimbări care îmbunătățesc accesibilitatea pentru vizitatorii noștri.

Puteți vedea noul design în antetul acestui site! Faceți clic pe pictograma meniului „hamburger” din partea dreaptă sus pentru a vedea cum funcționează noul meniu.

De la mai multe meniuri mici la unul mare

Vechiul antet cu meniul „Despre noi” deschis.

Pe desktop, antetul vechi al site-ului avea un aspect complicat. Pe lângă logoul GV, erau pictogramele de abonare socială, un buton „Newsletter” care deschidea un meniu, un buton „Despre noi” care deschidea alt meniu și formularul de căutare. Pe mobil, în schimb, a existat doar logoul și un buton „Meniu” care ducea la un meniu mare și dezordonat, având de toate în el.

Aceste meniuri vechi arătau bine, dar nu funcționau la fel de bine. Pe mobil, acestea erau dificil de folosit, iar pentru cei care utilizează cititoare de ecran, acestea nu funcționau bine deloc, așa că am înlocuit codul din spatele lor în întregime.

Fixarea contrasului de culoare: gata cu gri pal!

Pe lângă problemele cauzate de meniurile vechi pentru cititoarele de ecran, vechiul design se baza și pe nuanțe de gri pal care încălcau regulile de accesibilitate legate de contrastul de culoare. Aceste reguli afirmă că textul trebuie să fie suficient de întunecat sau mai deschis decât fundalul său, astfel încât persoanele cu deficiențe vizuale semnificative să le poată citi cu ușurință.

Aveam probleme legate de contrastul culorilor pe site de ceva vreme, iar vechiul design complicat al antetului este unul dintre ultimele exemple de încălcare a regulilor. Noul design face ca toate textele să fie ușor de citit pentru toată lumea și, în același timp, arată bine, deoarece există mai puține lucruri care să aglomereze spațiul.

Noul aspect: simplu și accesibil

Noul design al antetului, numai cu pictograma meniului „hamburger” și lista de categorii.

Noile meniuri utilizează o bibliotecă open source care promite să le facă mult mai fiabile pentru persoanele cu dizabilități și, în același timp, să le facă să funcționeze mai bine pentru toți ceilalți!

Atunci când faceți clic pe butonul „pictogramă hamburger”– cele trei linii care reprezintă în mod universal un meniu pe internet în zilele noastre–se deschide un „pop-up” pe tot ecranul care oferă toate informațiile dintr-odată și care poate fi închis cu butonul de închidere „x” sau prin apăsarea tastei escape de pe tastatură.  Pentru că „preia controlul” întregului ecran, meniul funcționează uniform pentru toată lumea, indiferent de modul în care vizitează site-ul.

Noul meniu atunci când este deschis.

Noul aspect mobil funcționează și arată similar cu versiunea desktop.

După cum puteți vedea mai sus, am reorganizat conținutul meniului pentru a avea mai întâi cele mai importante lucruri (pictogramele sociale și căutarea), ceea ce ar trebui să ușureze găsirea a ceea ce aveți nevoie, mai ales pe mobil.

Acum că antetul este actualizat, voi verifica alte părți ale site-urilor cu „meniuri pop-up” și le voi face să funcționeze în același mod, îmbunătățind accesibilitatea GV pe rând.

Ce părere aveți? Este o îmbunătățire? Puteți găsi erori sau lucruri care nu funcționează așa cum ar trebui? Vă rog să mă contactați în comentariile de aici sau pe GV Slack, dacă aveți sugestii!