Zmiana kolejności treści

Rachel Andrew

Kolejność treści w dokumencie jest ważna dla ułatwienia dostępu w witrynie. Czytnik ekranu odczyta treść w zależności od kolejności dokumentów, używając wybranych przez Ciebie elementów HTML, aby nadać znaczenie treści. Osoba poruszająca się po witrynie za pomocą klawiatury, a nie ekranu dotykowego lub myszy, będzie naciskać klawisz Tab. Oznacza to, że będą one przeskakiwać z elementu aktywnego do aktywnego, przełączając kolejne linki między linkami i polami formularza, ponownie w takiej kolejności, w jakiej występują w dokumencie.

W związku z tym, aby stworzyć dostępną witrynę, trzeba zacząć od przygotowania odpowiedniej struktury dokumentu i użyć wszystkich odpowiednich elementów HTML. Możesz jednak cofnąć niektóre z tych efektów, gdy zaczniesz korzystać z CSS. Zobaczmy, dlaczego tak jest.

Kolejność źródła a porządek wizualny

Nawigacja w witrynie jest często oznaczona jako lista linków. Następnie możesz za pomocą narzędzia Flexbox przekształcić je w poziomy pasek. W przykładzie poniżej glitch utworzyliśmy ten często używany wzorzec. Kliknij przykład i przejdź klawiszem Tab między linkami. Zaznaczenie będzie przesuwać się w kierunku logicznym od lewej do prawej, w kolejności czytania w języku angielskim.

Jeśli masz utworzony taki wzorzec, a potem pojawi się prośba o przeniesienie funkcji Skontaktuj się z nami, która jest drugim w źródle, na końcu. Możesz użyć właściwości order, która działa w Flexbox. Aby zmienić kolejność elementów w poniższym przykładzie, spróbuj przechodzić między elementami z przykładu poniżej. W tym celu użyj właściwości order.

Zaznaczenie przeskoczy do ostatniego elementu, a następnie z powrotem. Kolejność kart oznacza, że element jest drugim elementem. Wizualnie jest to jednak ostatni element.

Powyższy przykład pokazuje problem, który pojawia się, gdy zmieniamy kolejność treści i zmieniamy jej kolejność za pomocą CSS. Jeśli masz do czynienia z takim problemem, wystarczy zmienić kolejność w źródle, a nie użyć CSS.

Które właściwości CSS mogą powodować zmianę kolejności?

Przyczyną tego problemu może być każda metoda układu, która pozwala na przesuwanie elementów. Problemy ze zmianą kolejności treści często powodują te właściwości CSS:

• Użycie języka position: absolute i wizualne wyeliminowanie elementu z struktury.
• Właściwość order w Flexbox i układzie siatki.
• Wartości row-reverse i column-reverse dla flex-direction w Flexbox.
• Wartość dense pola grid-auto-flow w układzie siatki.
• Dowolna pozycja według nazwy lub numeru linii lub grid-template-areas w układzie siatki.

W kolejnym przykładzie utworzyłem układ za pomocą siatki CSS i umieściłem elementy w pozycji przy użyciu numerów zamówień bez uwzględnienia ich położenia w źródle.

Użyj klawisza Tab, aby przejść do tego przykładu i zobacz, jak przeskakuje zaznaczenie. Jest to bardzo skomplikowane, zwłaszcza gdy strona jest długa.

Testowanie problemu

Bardzo łatwym testem jest poruszanie się po stronie za pomocą klawiatury. Czy uda Ci się dotrzeć do wszystkiego? Czy przy tej czynności pojawiają się jakieś dziwne skoki?

Aby zobaczyć wizualizację zmiany kolejności treści, użyj narzędzia Tab Stop w rozszerzeniu Ułatwienia dostępu w Chrome. Na ilustracji poniżej przedstawiono przykład siatki CSS w tym narzędziu. Możesz sprawdzić, jak zaznaczenie musi przechodzić w układzie.

Zmienianie kolejności treści i elastyczne projektowanie witryn

Jeśli masz tylko 1 prezentację treści, to uporządkowanie źródeł w logicznej kolejności i odzwierciedlenie ich w układzie zazwyczaj nie jest trudne. Może się to okazać trudniejsze, jeśli rozważasz układ w różnych punktach przerwania. Na przykład w przypadku mniejszych ekranów warto przenieść element na dół układu.

Obecnie nie ma dobrego rozwiązania tego problemu. W większości przypadków projektowanie zoptymalizowane pod kątem urządzeń mobilnych pomaga w uporządkowaniu źródła i układu strony. Twoje decyzje dotyczące priorytetu treści na urządzeniach mobilnych często mają decydujący wpływ na ogólne treści. Najważniejsze jest, aby pamiętać o możliwości wystąpienia takiej zmiany kolejności treści i sprawdzić, czy końcowy efekt końcowy nie jest zbyt drażliwy w każdym punkcie przerwania.