Testowanie atrybutów dostępności z Divi 5

Atrybuty dostępności są teraz w pełni kompatybilne z Divi 5, co daje brak kodowania na dodanie ról Aria, etykiet i innych pomocników czytnika ekranu tuż w budowniczym. Jeśli pracujesz z Divi 5, jest to najłatwiejszy sposób na zbudowanie dostępności w witrynie bez zmiany przepływu pracy lub projektu.

Wraz z udziałem europejskiej ustawy o dostępności w dniu 28 czerwca i Google coraz bardziej faworyzuje najlepsze praktyki dostępności, nadszedł czas, aby przejść do przodu. Oto jak działają atrybuty dostępności i jak pomaga Twojej witrynie spełniać nowoczesne standardy dostępności!

Atrybuty dostępności dla Divi 5

Atrybuty dostępności to wtyczka Divi, która pozwala dodawać role Aria, etykiety i inne pomocniki dostępności do twoich stron internetowych bezpośrednio od Divi Builder bez pisania żadnego kodu. Atrybuty ARIA (dostępne bogate aplikacje internetowe) pomagają dodać znaczenie elementom, które same nie zapewniają wystarczającego kontekstu, szczególnie przy budowaniu niestandardowych układów w Divi 5.

Na przykład, jeśli użyjesz modułu tekstowego do wizualnego stylizowania nagłówka lub modułu przycisku, aby utworzyć wezwanie do działania, czytniki ekranu nie rozumieją automatycznie ich ról. Role i etykiety Aria pozwalają zdefiniować, czym jest każdy element i jak powinny go interpretować technologie wspomagające, bez zmiany projektu wizualnego. Pomaga to zapewnić, że witryna Divi 5 jest dostępna i elastyczna.

Po zainstalowaniu wtyczki automatycznie dodaje niestandardowe pola wejściowe do sekcji, wierszy, modułów i innych elementów Divi. (Aby uzyskać dostęp do pól Aria, kliknij dowolny element i przejdź do jego zaawansowanej karty.)

Teraz możesz zdefiniować role, dodawać etykiety Aria i poprawić obsługę czytnika ekranu dla każdego elementu bezpośrednio od Divi Builder. Atrybuty dostępności wpisują się sprawnie do twojego przepływu pracy Divi i kosztują zaledwie 19 USD rocznie. Oferuje prosty, przystępny sposób na budowanie dostępnych stron internetowych.

Uzyskaj atrybuty dostępności

Dlaczego dostępność nie jest już opcjonalna

Dostępność była czymś, co można było odłożyć, ale już nie. Wpływa teraz na bezpieczeństwo prawne, wydajność wyszukiwania i zaufanie użytkowników.

Jeśli Twoja witryna nie jest dostępna, nie jesteś tylko z tyłu - jesteś zagrożony. Oto dlaczego:

• Działania prawne rosną: od 28 czerwca 2025 r. Europejska ustawa o dostępności zostanie egzekwowana. Jeśli Twoja witryna nie jest dostępna, a osoby w UE korzystają z niej, możesz stawić czoła grzywnom lub innym karom. Prawo ma zastosowanie do większości firm z ponad 10 pracownikami i zarabiającymi ponad 2 miliony euro rocznie, ale zachęca się również do śledzenia tego, ponieważ…
• Dostępność może wpływać na twoje rankingi: Chociaż dostępność nie jest czynnikiem rankingowym, wiele dostępnych funkcji może pośrednio wpływać na SEO. Rzeczy takie jak tekst alt, właściwe struktury nagłówka i etykiety opisowe ułatwiają zrozumienie witryny zarówno użytkownikom, jak i wyszukiwarkom. Jeśli więc Twoja witryna jest trudna w nawigacji, możesz po cichu pozostać w tyle w wynikach wyszukiwania.
• Niedostępne witryny odciągają użytkowników: jeśli Twoja witryna nie jest dostępna, osoby niepełnosprawne mogą nie być w stanie jej użyć. Kiedy szybko odejdą, może zasygnalizować słabe wrażenia użytkownika w wyszukiwarkach i zranić twoje rankingi. Zmiany takie jak Clear Structure, czytelne czcionki i łatwa nawigacja klawiatury sprawiają, że Twoja witryna jest użyteczna dla wszystkich.

Łatwo jest założyć, że dostępność ma znaczenie tylko dla dużych firm, ale ignorowanie go może nadal zranić, nawet jeśli jesteś mniejszą marką.

Konfigurowanie atrybutów dostępności w Divi 5

W tej sekcji prowadzi Cię przez instalowanie i uzyskiwanie dostępu do narzędzi w atrybutach dostępności w twoich stronach internetowych Divi 5.

Instalowanie wtyczki

Po zakupie atrybutów dostępności otrzymasz plik zip wtyczki. Prześlij go do wtyczek WordPress> Dodaj wtyczkę> Prześlij wtyczkę.

Teraz dodaj plik ZIP i kliknij zainstaluj teraz.

Na koniec aktywuj go.

Po aktywacji zauważysz dodatkowe pola ARIA dodane do zaawansowanej karty każdego elementu.

Możesz teraz łatwo dodać te atrybuty dostępności do każdego elementu na swojej stronie, bezpośrednio od Divi Builder. Omówimy to za minutę. Wcześniej szybko przejrzyjmy wszystkie dostępne opcje w deski rozdzielczej atrybucji dostępności.

Atrybuty dostępności Przegląd

Gdy wtyczka będzie aktywna w Twojej witrynie Divi, karta dostępności zostanie dodana do paska bocznego WordPress. Kliknij go, aby uzyskać dostęp do pulpitu nawigacyjnego, który ma cztery karty: administrator, moduły, elementy i produkty.

Sprawdźmy opcje każdej zakładki:

Karta administracyjna

Ta karta zawiera sterowanie na poziomie konta, takie jak zarządzanie subskrypcją (która umożliwia obsługę) , sprawdzanie statusu wtyczki, wybór, czy usunąć dane dotyczące odinstalowania i resetowanie wszystkich ustawień, aby domyślnie.

Zakładka modułów

Pozwala zdecydować, które arię przypisują, aby włączyć w modułach Divi. Tylko wybrane opcje pojawiają się na karcie Advanced jako pola. Możesz chcieć je wszystkie włączone.

Nie każdy moduł wymaga atrybutów dostępności. Na przykład możesz bezpiecznie pomijać elementy dekoracyjne, takie jak dzielniki, animowane ikony lub galerie obrazów bez podpisów lub linków, ponieważ nie dodają znaczących treści dla czytników ekranu.

Aby wykluczyć moduł, wprowadź ślimak modułu (jak ET_PB_IMAGE) w sekcji kompatybilności . To informuje wtyczkę, aby pominął ją podczas dodawania pól ARIA i skupiając się tylko na modułach, które faktycznie wymagają obsługi dostępności.

Karta elementów

Niektóre części Twojej witryny nie są zbudowane z modułami Divi. Mogą pochodzić z twojego motywu, innych wtyczek lub zwykłego HTML. Karta Elements pozwala dodawać atrybuty ARIA do tych części witryny za pomocą selektorów CSS. Możesz dołączyć globalne elementy, takie jak menu, ikony, przyciski i pola formularzy, które nie są utworzone w budowniczym Divi.

• Aria Main: mówi czytnikom ekranu, gdzie zaczyna się Twoja główna treść, aby mogli pomijać menu lub paski boczne.
• Aria Hidden: ukrywa elementy dekoracyjne, więc technik asystujący nie czyta ich na głos.
• Link ARIA: Ocena elementów klikalnych, które nie są prawdziwymi linkami jako linki. Pomaga to czytnikom ekranu ich poprawnie zidentyfikować.
• Przycisk ARIA: Dodaje role przycisków do przełączania ikon lub stylizowanych linków tekstowych, które działają jak przyciski.
• Wymagana aria: oznacza, że ​​pola formularzy niestandardowych w razie potrzeby, nawet jeśli HTML tego nie mówi.
• Indeks tablicy: sprawia, że ​​ważne elementy można osiągnąć za pomocą klawisza TAB, który jest pomocny w nawigacji tylko na klawiaturze.

Każde ustawienie pozwala dodawać lub usuwać te role za pomocą selektorów CSS. Jeśli nie masz pewności, od czego zacząć, Aria Main i Aria Button są dobrymi pierwszymi typami, często są one pominięte i łatwe do skonfigurowania.

Karta Products zawiera inne produkty tego samego twórcy.

Korzystanie z atrybutów dostępności wewnątrz Divi 5

Po konfiguracji prawdziwa praca odbywa się wewnątrz budowniczego. Każde pole Aria ma cel. Spójrzmy na to, co robi, kiedy go używać i jak pomaga w dostępności w prawdziwych układach.

1. Przypisz role do elementów z rolą arii

Pole roli Aria pozwala przypisać cel do elementu, który może nie być oczywisty w kodzie. Na przykład, jeśli użyłeś modułu BLURB do utworzenia wywołania wywoływania, czytniki ekranu nie rozpoznają go jako przycisku. Musisz przypisać do niego przycisk roli, aby jego funkcja była jasna dla użytkowników nawigujących z poleceniami głosowymi lub skrótami klawiatury.

Podobnie jak w tym przypadku poniżej, ten puszczenie zawiera przycisk.

Aby dodać rolę arii, przełącz opcję i przypisz te wartości:

• Role roli aria jako role widżetu (jest to kategoria, w której żyją elementy interaktywne, takie jak przyciski i suwaki.)
• Wartość roli aria jako przycisk
• ARIA ROLE SELECTOR AS .ET_PB_BUTTON (to jest klasa Divi używa modułów przycisków.)

2. Dodaj przezroczyste etykiety dla czytników ekranu z etykietą Aria

Podczas gdy rola ARIA mówi, co jest elementem, etykieta ARIA wyjaśnia , co robi . Jest to szczególnie przydatne, gdy element nie ma widocznego tekstu, jak ikona, przycisk w stylu niestandardowym lub cokolwiek zaprojektowanego, aby wyglądać na interaktywne, ale nie mówi tak głośno. Rozbijmy to za pomocą tego samego przykładu.

Dodaliśmy już rolę, ale tekst przycisku mówi „Darontuj teraz”. Jest to w porządku dla użytkowników wizualnych, ale osoby korzystające z czytników ekranu mogą potrzebować więcej kontekstu, nawet więcej, ponieważ przycisk pojawia się wiele razy.

Aby przypisać etykietę do tego przycisku, po prostu przełącz etykietę ARIA i dodaj krótką etykietę.

Teraz przycisk nadal powie „Darontuj teraz” na ekranie, ale czytniki ekranu przeczytają pełną etykietę, aby pomóc użytkownikom dokładnie zrozumieć, co robi przycisk i dokąd prowadzi.

3. Podaj dodatkowy kontekst z opisem arii

Aria Opis Daje czytniki ekranu więcej szczegółów na temat elementu, niż etykieta może wyjaśnić. Podczas gdy etykieta mówi, co coś jest, opis wyjaśnia, dlaczego ma to znaczenie.

Na przykład, powiedzmy, że masz wiele przycisków „Darontuj teraz” na jednej stronie, każdy umieszczony pod inną przyczyną, takimi jak sprzątanie przybrzeżne, edukacja morska lub przywracanie siedlisk. Użytkownik czytnika ekranu może lądować bezpośrednio na przycisku i przegapić pobliską zawartość. Tutaj pomaga opis Aria.

Weźmy pierwszą kartę: sprzątanie przybrzeżne. Aby dodać więcej kontekstu, możesz dodać opis takiego jak „Ta darowizna obsługuje czyszczenie oceanu i ochronę dzikiej przyrody” jako tekst opisu.

Zrób to samo dla innych przycisków, tak że mimo że wszyscy mówią wizualnie „przekazuj teraz”, czytniki ekranu ogłoszą różne opisy dla każdego z nich. Daje to użytkownikom pełny kontekst bez zmiany tego, co widzą na ekranie.

4. Ukryj elementy dekoracyjne przed czytnikami ekranu

Aria ukryta jest pomocna, gdy chcesz pokazać coś wizualnie, na przykład ikona lub obraz w tle, ale nie chcesz, aby czytniki ekranu to ogłosili. To sprawia, że ​​doświadczenie jest bardziej skoncentrowane dla użytkowników polegających na technologii wspomagającej.

Na przykład weź obraz zapowiedzi kampanii, jak zdjęcie Seagulls. Obsługuje projekt, ale nie dodaje żadnych nowych informacji poza tym, co jest już w nagłówku lub opisie. Tutaj możesz użyć Aria ukrytego, aby ukryć ją przed czytnikami ekranu.

5. Link do dodatkowych informacji z szczegółami arii

Szczegóły ARIA pozwalają podłączyć jeden element z drugim, co daje dodatkowe informacje. Na przykład możesz połączyć przycisk do pobliskiego akapitu, który wyjaśnia, o czym jest przycisk. Jest to przydatne, gdy chcesz odczytać więcej kontekstu, który nie jest bezpośrednio częścią klikniętego elementu.

Weźmy sekcję edukacji morskiej. Załóżmy, że chcesz, aby tekst akapitu opisał przycisk „Darowicie teraz”. Możesz połączyć przycisk do akapitu za pomocą szczegółów ARIA.

Najpierw dodaj unikalny identyfikator do akapitu. Kliknij moduł tekstowy zawierający opis i przejdź do zaawansowanego> identyfikatora i klas CSS . Wprowadź swój unikalny identyfikator w polu CSS ID. Wejdźmy do Marine-Edu.

Teraz ten moduł tekstowy ma identyfikator, który czytniki ekranu mogą odwoływać się.

Następnie dodajemy atrybut Aria Detaes do przycisku. Kliknij moduł przycisku i przejdź do jego zaawansowanych> szczegółów arii. Wprowadź Marine-Edu w polu ID.

To informuje technologie wspomagające, że przycisk jest podłączony do dodatkowych informacji w akapicie z ID „Marine-Edu”. Jest to również pomocne, gdy używasz tego samego tekstu przycisku w różnych miejscach, ale każdy oznacza coś innego.

Być może zauważyłeś, że aria etykieta, opis Aria i szczegóły Aria dodają dodatkowego kontekstu na różne sposoby, więc najlepiej nie używać ich razem w tym samym elemencie, ponieważ może mylić czytników ekranu. Jeśli już coś wyjaśniasz na stronie, rozważ użycie szczegółów ARIA, aby link do tego tekstu zamiast pisać nową etykietę lub opis.

Właśnie zobaczyłeś, w jaki sposób atrybuty dostępności ułatwiają dodawanie ról Aria, etykiet i innych kluczowych funkcji dostępności bezpośrednio od Divi Builder. To sprawia, że ​​Twoja witryna jest dostępna bez kodowania.

Uzyskaj atrybuty dostępności

Dodatkowe narzędzia dostępności Divi-Modułów dla Divi 5

Atrybuty dostępności zajmują się techniczną stroną dostępności. Jest również wyposażony w dodatki (w pakiecie dostępności), które zapewniają dodatkowe funkcje, takie jak nawigacja klawiatury i kontrole wizualne, aby oferować bardziej kompletne, integracyjne rozwiązanie.

1. Dostępność pasek boczny

Pasek boczny dostępności dodaje pływający pasek narzędzi, który pozwala użytkownikom dostosować ich wrażenia z przeglądania. Odwiedzający z zaburzeniami mobilności mogą dostosowywać rozmiary czcionek, przejść do trybu o wysokiej zawartości kontroli, włączyć skalę szarości i nawigować za pomocą klawiatury. Możesz również dostosować go do projektu Twojej witryny.

2. Ulepszenia dostępności

Ulepszenia dostępności dodają praktyczne funkcje, które pomagają użytkownikom przejść do witryny łatwiejsze. Obejmują one linki pomijania lepszej nawigacji, koncentruje się na pomocy użytkownikom klawiatury w zobaczeniu, gdzie są, oraz inne subtelne ulepszenia, które poprawiają użyteczność bez zmiany układu witryny.

Sprawdź pakiet dostępności

Udostępnij dziś swoje witryny Divi 5

Atrybuty dostępności dają łatwy, wizualny sposób, aby Twoja witryna Divi była bardziej integracyjna. Bez kodowania, bez obejść - po prostu odpowiednie narzędzia wbudowane bezpośrednio w konstruktora.

Jest w pełni kompatybilny z Divi 5, aktywnie obsługiwanym, a teraz 50% zniżki do 28 czerwca. Tak długo, jak biegnie oferta, możesz uzyskać pełny pakiet dostępności, w tym pasek boczny i poprawki, za jedyne 36 USD rocznie. Jeśli jesteś gotowy, aby Twoja witryna była lepsza dla wszystkich, jest to najprostszy sposób na rozpoczęcie.

Uzyskaj pakiet dostępności 50% zniżki