Fără meniu ascuns implicit
Dacă CSS nu se încarcă, disclosure-ul și lista de linkuri rămân vizibile și funcționale.
Componente · M2
O structură predictibilă, indiferent de instituție sau serviciu.
Identitatea, domeniul oficial, navigația și căutarea trebuie să fie clare înainte ca utilizatorul să înceapă o operațiune. Varianta mobilă folosește un disclosure HTML nativ și rămâne complet operabilă fără JavaScript.
Identitate și autenticitate
Numele serviciului nu ascunde instituția și domeniul.
Header-ul diferențiază identitatea proiectului sau instituției de numele serviciului tranzacțional. Bannerul de autenticitate explică statutul și indică domeniul oficial ca text, nu doar prin logo.
Variantă pentru serviciu tranzacțional
Sistem DigitalSolicită un certificat fiscalsistem.digital
Numele operațiunii este secundar identității, iar domeniul rămâne vizibil în antet. Pentru o instituție publică, același loc conține denumirea oficială și domeniul instituțional verificat.
Navigație responsive
Desktop și mobil folosesc aceeași ordine informațională.
La lățimi mari, linkurile sunt vizibile direct. Sub 48rem, navigația desktop este înlocuită de un element details cu summary. Utilizatorul îl poate deschide cu Enter sau Space, iar starea este expusă nativ cititoarelor de ecran.
<details class="sd-mobile-navigation">
<summary class="container">Meniu</summary>
<nav class="container" aria-label="Navigație principală mobilă">
<ul class="sd-mobile-navigation__list">
<li><a href="/servicii">Servicii</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</details>Fără tabindex pozitiv
Ordinea focusului urmează ordinea DOM și aceeași prioritate ca pe desktop.
Pagina curentă este explicită
Linkul activ folosește aria-current="page", nu doar o culoare distinctă.
Căutare
O cerere GET poate fi copiată, salvată și distribuită.
Formularul de căutare folosește landmark-ul role="search", label programatic și parametrul q. Rezultatele au un URL stabil și nu depind de JavaScript.
Breadcrumb și service navigation
Poziția globală și poziția în serviciu sunt două lucruri.
Breadcrumb-ul arată ierarhia paginii în site. Service navigation arată pașii sau secțiunile unui serviciu. Nu se înlocuiesc reciproc și au etichete de navigație distincte.
Exemplu de serviciu
Banner de cookie-uri
Fără JavaScript, bannerul rămâne vizibil — niciodată invers.
Acordul se salvează local doar când scriptul rulează. Dacă JavaScript lipsește, bannerul nu dispare niciodată singur; e o limitare cunoscută, nu o eroare silențioasă.
Exemplu (nu ascunde restul paginii)
Banner de fază și link înapoi sus
Stadiul serviciului e text explicit, nu doar o etichetă colorată.
Bannerul de fază leagă direct la un canal de feedback. Link-ul înapoi sus e o ancoră HTML reală către începutul paginii, utilă pe conținut lung — funcționează identic fără JavaScript.
Exemplu
Ieșire rapidă din pagină
Fără JavaScript e un link obișnuit; nu depinde de un script care poate lipsi.
Cu JavaScript, apăsarea link-ului sau tasta Shift apăsată de trei ori consecutiv înlocuiește intrarea curentă din istoric înainte de a naviga, astfel încât butonul Înapoi al browserului nu revine la această pagină.