Problem polega na tym, że kierownicy projektów traktują stronę internetową jak papier o stałym rozmiarze i chcą, aby komponenty na tej stronie również miały stały rozmiar . To bardzo, bardzo zła decyzja projektowa, ponieważ psuje wbudowaną responsywność przeglądarek internetowych. Celowo sprawia, że ​​tworzone przez nich strony internetowe są mniej dostępne .

A potem są z tego dumni .

Projektowanie responsywne jest złym rozwiązaniem tego problemu, ponieważ w ogóle nie powinno istnieć. Właściwym rozwiązaniem jest oczywiście usunięcie stylizacji - CSS - która psuje responsywność. Ale ponieważ kierownicy projektów nalegają na zmuszenie projektantów i twórców stron internetowych do umieszczenia tego stylu na stronie internetowej, zepsucia responsywności, zniszczenia dostępności, projektowanie responsywne daje wyjście - i chociaż jest strasznie złe, może po prostu przejść kontrolę zapewnienie zgodności dostępności. (Masz to , prawda?)

Przyjrzyjmy się, co robi responsywny projekt.

Załóżmy, że masz wąski ekran. Otwierasz stronę internetową. Pokazuje ci jakiś obrazek, jakiś tekst, jakiś obrazek, jakiś tekst, jeden pod drugim, tak jak poniżej:

Teraz otwierasz tę samą stronę internetową na szerokim ekranie. Pokazuje rzędy obrazu i tekstu, na przykład:

Oto, co potrafi responsywny projekt: może poruszać się i zmieniać rozmiar komponentów na ekranie, w oparciu o szerokość i gęstość pikseli widocznego obszaru. (Może całkowicie zmienić wszystkie style, ale zdarza się to rzadko).

Ale poczekaj! Jest więcej!

Typowe zmiany obejmują:

• Zwijanie lub wyświetlanie pasków bocznych,
• Wyświetlanie obrazów mniejszych lub większych,
• Używając większego lub mniejszego rozmiaru czcionki,
• Powoduje zawijanie wierszy przez słowa, które są zbyt szerokie, aby zmieścić się na ekranie,
• Powiększanie przycisków (zakładając, że mniejsze urządzenia są obsługiwane palcem) lub mniejsze (zakładając, że większe urządzenia są obsługiwane myszką),
• Przesuwanie etykiet pól z pól obok, nad pola formularza,
• Przejście ze stylu hiperłączy, który zmusza do wyszukiwania hiperłączy, na taki, który je wyróżnia (zakładając, że mniejsze urządzenia są obsługiwane palcami i nie mogą najeżdżać kursorem myszy),
• i więcej!

Zamiast pytać przeglądarkę internetową, kto jest jej dostawcą, CSS pyta ją, jak szeroki jest obszar roboczy, ile kolorów może wyświetlić ekran i ile pikseli na cal wyświetla. Mozilla Developer Network ma doskonałe opracowanie na temat zapytań o media , których ten artykuł nie będzie powtarzał. Udaj się do MDN.

Ta technika jest uważana za najlepszy sposób radzenia sobie z problemami z dostępnością powodowanymi przez te same osoby. Jak ironicznie.

Właściwym sposobem uniknięcia tych problemów jest nie powodowanie ich od samego początku.

Na przykład: dlaczego miałbyś zatrzymać wyświetlanie obrazu na całej szerokości rzutni? To, co możesz chcieć zrobić, to zamienić obraz o wysokiej rozdzielczości, odpowiedni dla wyświetlacza o wysokiej rozdzielczości, na obraz o niskiej rozdzielczości, odpowiedni dla wyświetlacza o niskiej rozdzielczości… ale nie możesz nawet założyć, że węższe ekrany mają niższą rozdzielczości niż szersze ekrany, biorąc pod uwagę wyświetlacze o dużej gęstości w niektórych smartfonach . Tak więc, chociaż można zastosować zapytanie o media, aby zapewnić najlepszą jakość obrazu , nie ma to nic wspólnego z rozwiązywaniem problemów z dostępnością.

Podobnie nie należy ustawiać rozmiaru czcionki na jednostki zależne od ekranu, takie jak piksele. Powinieneś ustawić go na jednostki bezwzględne, takie jak punkty. (Ustawienie go względem szerokości ekranu jest najgłupszym błędem w historii: powoduje, że litery stają się nieczytelne na wąskich ekranach o niskiej gęstości.)

Nie należy również ustawiać marginesów i dopełnień za pomocą pikseli. Zamiast tego powinieneś ustawić je za pomocą n-szerokości i m-szerokości: w stosunku do szerokości liter.

Nie ma również powodu, aby przyciski były małe dla użytkowników dużych ekranów. Nieodłączne założenie, że każdy jest w stanie używać myszy, jest strasznie zdolne. Jeśli sprawisz, że przyciski będą wystarczająco duże, aby można je było dotykać palcami, użytkownik dużego ekranu nadal będzie mógł korzystać z tych samych przycisków.

Och, mówisz, ale jak zrobić pasek narzędzi pełen małych przycisków?

Cóż, może nie powinieneś tego robić. Twórcy pasków narzędzi znaleźli sposoby radzenia sobie z brakiem miejsca: przepełnione menu i zawijanie wierszy . Małe przyciski są stworzone dla osób, które potrafią używać dokładnych wskaźników myszy. Wykazują całkowity i całkowity brak szacunku dla ludzi, którzy z jakiegokolwiek powodu nie mogą.

Inne zmiany obejmują zwinięcie paska bocznego. Jeśli ten pasek jest tak mało ważny, że można go zwinąć, z pewnością możesz wymyślić lepszy wyświetlacz. Może w ogóle to pomiń .

Więc… czy nigdy nie ma dobrego powodu, aby używać zapytań o media?

Nie. W rzeczywistości jest jeden dobry powód: podziały słów.

Angielski jest językiem z kilkoma powszechnymi długimi słowami. Znane mu długie słowa są zapożyczone z łaciny i używane w naukach ścisłych, takich jak chemia, do oznaczania związków chemicznych. Ale inne języki często używają długich słów . I wielu projektantów lubi, aby ich strony internetowe wyświetlały te słowa bez zmuszania użytkownika do przewijania w poziomie.

W tym celu CSS ma możliwość umożliwienia przeglądarkom internetowym łamania słowa w przypadkowych miejscach zamiast spacji i innych symboli nieliterowych. Ale nie spodziewalibyśmy się, że stanie się to na szerokim ekranie, gdzie jest wiele okazji do znalezienia naturalnej przerwy między słowami. (Istnieją oczywiście wyjątki, w przypadku bardzo długich słów).

Dlatego stosowanie nienaturalnych reguł zawijania słów jest całkowicie w porządku tylko w ograniczonych sytuacjach: jest to doskonały powód do korzystania z zapytań o media.

Jeśli znajdziesz inne dobre powody do zapytań o media, które nie są wykorzystywane wyłącznie do zapobiegania łamaniu dostępności, skontaktuj się z nami i wzbogać ten artykuł o swoją opinię.

O autorze

Veltstra ma 40-letnie doświadczenie w korzystaniu ze źle zaprojektowanych narzędzi i oprogramowania, co przekształciło w zagorzałego rzecznika użyteczności i dostępności . Veltstra tworzy oprogramowanie od ponad 30 lat, z czego 25 lat zawodowo, zawsze starając się, aby produkty były użyteczne i dostępne.

Nie ma takiej niepełnosprawności, która nie byłaby gdzieś lekceważona i marginalizowana przez sprawną osobę.