Vylepšení navigace pomocí ARIA rolí a zvýraznění nabídek

Dnešní aktualizace se zaměřily na dvě významné oblasti: zlepšení přístupnosti menu pomocí rolí ARIA a integraci nejnovější verze TYPO3 v13 LTS. Ponořme se do obou, začněme vylepšením navigace pomocí atributů ARIA.

Proč používat ARIA role v navigaci?

Accessible Rich Internet Applications (ARIA) role jsou pro zlepšení přístupnosti webových stránek klíčové. Pomáhají čtečkám obrazovky pochopit strukturu stránky a poskytují další kontext pro interaktivní prvky. Například navigační nabídky mají z atributů ARIA velký prospěch, protože uživatele s postižením provedou možnostmi nabídky a jasně informují o stavu rozbalitelných sekcí.

Příklad: Přidání ARIA rolí do nabídky

Zde je jednoduchý příklad navigační nabídky s integrovanými ARIA rolemi , které ji zpřístupňují:

<button 
   id="menu-toggle" 
   aria-controls="menu" 
   aria-expanded="false" 
   aria-label="Toggle navigation menu">
   Menu
</button>
<nav aria-label="Main navigation">
   <ul role="menubar">
       <li role="none">
           <a href="#home" role="menuitem" aria-haspopup="false" aria-current="page">Domů</a>
       </li>
       <li role="none">
           <a href="#about" role="menuitem" aria-haspopup="false">O nás</a>
       </li>
       <li role="none">
           <a href="#services" role="menuitem" aria-haspopup="true" aria-expanded="false">Služby</a>
           <ul role="menu" aria-label="Submenu">
               <li role="none">
                   <a href="#web-design" role="menuitem" aria-haspopup="false">Web Design</a>
               </li>
               <li role="none">
                   <a href="#seo" role="menuitem" aria-haspopup="false">SEO</a>
               </li>
           </ul>
       </li>
       <li role="none">
           <a href="#contact" role="menuitem" aria-haspopup="false">Kontakt</a>
       </li>
   </ul>
</nav>

V tomto příkladu:

• Role ARIA, jako jsou menubar a menuitem, označují typ použitých prvků.
• atributy aria-haspopup a aria-expanded poskytují informace o rozbalitelných sekcích.
• aria-current označuje aktuálně aktivní položku menu.

Tyto atributy zlepšují zážitek uživatelů čteček obrazovky tím, že zpřehledňují navigační strukturu a její interaktivní prvky.

Aktualizace na TYPO3 v13 LTS

Kromě zlepšení přístupnosti zahrnovaly dnešní aktualizace také aktualizaci na verzi TYPO3 v13 LTS, která byla právě vydána. První dojem je vynikající: TYPO3 poprvé zavádí v backendu světlá i tmavá témata. Tato aktualizace přináší nejen svěží vzhled, ale také zlepšuje použitelnost pro vývojáře a editory obsahu. Tým TYPO3 odvedl s touto verzí fantastickou práci a nastavil pro platformu nový standard.

Závěr

Integrace ARIA rolí a zlepšení přístupnosti nabídek jsou základními kroky k vytvoření inkluzivnějších webových stránek. Aktualizace na verzi TYPO3 v13 LTS mezitím přidává novou vrstvu funkcí díky modernizovanému rozhraní. Tyto aktualizace společně činí web uživatelsky přívětivějším a vizuálně atraktivnějším a zároveň dodržují nejlepší postupy pro přístupnost.