Co wbudowaliśmy i czego jeszcze brakuje

Tworzymy strony zgodnie z wytycznymi Web Content Accessibility Guidelines w wersji 2.2, na poziomie AA — poziomie przywoływanym przez Europejski Akt o dostępności oraz przez Section 508 w Stanach Zjednoczonych. W kwestii kontrastu kolorów idziemy dalej i celujemy w poziom AAA, ponieważ większość tej witryny to biały i szary tekst na prawie czarnym tle i nie było powodu zadowalać się niższą wartością.

Nie twierdzimy, że witryna jest zgodna z wytycznymi. Deklaracja zgodności powinna opierać się na testach, a ta witryna nie została zbadana przez nikogo spoza firmy ani przetestowana przez osoby, które na co dzień korzystają z czytników ekranu. Zamiast tego dokonaliśmy pomiarów: kolor każdego tekstu został obliczony względem tła, na którym się znajduje, a nie oceniony na oko, każda strona została sprawdzona automatycznie pod kątem tego, co można sprawdzić automatycznie, a ścieżki klawiaturowe przez menu, tabele i karuzele zostały przejrzane w przeglądarce. To rzetelna praca, ale nie jest to to samo co audyt.

To oświadczenie dotyczy publicznych stron witryny www.surglasses.com. Nie obejmuje edytorów używanych przez nasz personel do publikowania aktualności i wydarzeń, które są narzędziami wewnętrznymi chronionymi hasłem, ani oprogramowania wewnątrz naszych wyrobów medycznych i systemów dydaktycznych — te mają własną dokumentację i własne wymagania regulacyjne.

• Link „Przejdź do treści głównej” jest pierwszym elementem, do którego się dociera na każdej stronie, więc nie trzeba na każdej z nich przechodzić klawiszem Tab przez całe menu.
• Fokus klawiatury jest zawsze widoczny. Wokół elementu z fokusem rysowany jest zielony obrys, odsunięty od elementu, tak aby nigdy nie ukrywała go ramka. Pojawia się przy obsłudze klawiaturą, a nie przy kliknięciach myszą, dzięki czemu jest, gdy jest potrzebny, a nie przeszkadza, gdy nie jest.
• Menu zachowują się jak menu. Cztery przyciski rozwijanych menu to prawdziwe przyciski, a nie linki udające przyciski, i informują, czy są otwarte. Strzałka w dół otwiera menu i przenosi do niego, strzałki w górę i w dół przechodzą między pozycjami, a Escape zamyka menu i przywraca fokus na przycisk. Na komputerze stacjonarnym otwierają się także po uzyskaniu fokusa, bez użycia JavaScriptu.
• Szerokie tabele porównawcze można przewijać z klawiatury. Każda z nich znajduje się w obszarze, na który można przenieść fokus, ma własną nazwę, więc tabela przewija się w poziomie wewnątrz swojej ramki, a sama strona nigdy.
• Historia rok po roku na stronie Kim jesteśmy jest zbudowana jako prawdziwa lista kart: strzałki w lewo i w prawo przechodzą między latami, Home i End przeskakują do pierwszego i ostatniego, a panel każdego roku jest powiązany ze swoją kartą.
• Nic nie przejmuje kolejności tabulacji. Żaden element witryny nie ma nadanej własnej pozycji w sekwencji tabulacji, więc fokus po prostu podąża za kolejnością elementów na stronie.
• Przyciski mają co najmniej 44 piksele z każdej strony, gdy są ikonami, a nie słowami — przycisk menu, linki do mediów społecznościowych, sterowanie karuzelą.

W warstwie spodniej strony to zwykły HTML: jeden nagłówek główny na stronę, a pozostałe zagnieżdżone pod nim po kolei, prawdziwe obszary nagłówka, nawigacji, treści głównej i stopki, prawdziwe listy i prawdziwe tabele. Wszystkie 59 komórek nagłówkowych w tabelach porównawczych witryny deklaruje, czy nagłówkuje wiersz, czy kolumnę. Każdy obraz ma tekst alternatywny, a 25 czysto dekoracyjnych jest oznaczonych jako takie, aby czytnik ekranu je pomijał, zamiast odczytywać nazwę pliku — a gdy nasz personel dodaje obraz do aktualności lub wydarzenia, edytor prosi o jego opisanie od razu.

Na stronie aktualności zmiana kategorii lub przejście do kolejnej strony podmienia listę na miejscu, bez przeładowania. Łatwo mogłoby to sprawić, że użytkownik czytnika ekranu nie wiedziałby, że coś się stało, dlatego lista jest oznaczana jako zajęta podczas ładowania, a fokus jest przenoszony do nowej listy po jej wczytaniu.

W tej witrynie są dwa formularze: na stronie kontaktowej i na stronie Gdzie kupić; zostały zbudowane z myślą o tej stronie.

• Jest automatyczna kontrola, ale nie taka, którą trzeba rozwiązywać. Formularze ją mają, ponieważ środki niczego od Państwa niewymagające — ukryte pole, które wypełnia tylko oprogramowanie automatyczne, limit liczby wiadomości z jednego połączenia — nie powstrzymają nadawcy, który wypełni formularz poprawnie. Wybrana przez nas kontrola obserwuje zachowanie przeglądarki, zamiast zadawać zagadkę, więc nikt nie musi wskazywać sygnalizatorów świetlnych ani przepisywać zniekształconych liter; najczęściej kończy się sama, a widać tylko małe pole z informacją o tym. Nie będziemy jednak udawać, że jest bez wad: wymaga JavaScriptu, może poprosić o jedno kliknięcie w celu potwierdzenia i jest komponentem zewnętrznego dostawcy. Jeśli z jakiegokolwiek powodu przeszkadza, prosimy zadzwonić do nas (numery są na dole tej strony) — ta droga nie ma żadnej kontroli, a my traktujemy zgłoszenie tak samo.
• Każde pole ma prawdziwą etykietę, stale widoczną nad polem, a nie tekst zastępczy, który znika, gdy tylko zaczyna się pisać. Pola wymagane są oznaczone dla przeglądarki jako wymagane, więc oprogramowanie może o tym poinformować przed wysłaniem.
• Pola deklarują, do czego służą — imię i nazwisko, e-mail, organizacja, kraj, telefon — aby autouzupełnianie przeglądarki i menedżera haseł mogło je wypełnić.
• Wybór kilku produktów to zestaw pól wyboru, a nie lista wielokrotnego wyboru. Takie listy wymagają klikania z klawiszem Ctrl i są prawie nieużyteczne w telefonie.
• Nie ma limitu czasu ani sesji, która wygasa. Można poświęcić na formularz tyle czasu, ile potrzeba. Jedyna reguła dotycząca czasu to minimum: formularz wysłany w ciągu około trzech sekund od otwarcia strony jest traktowany jako automatyczny.
• Formularze wymagają JavaScriptu. Potrzebują go zarówno kontrola bezpieczeństwa, jak i wysyłka formularza, więc po jego wyłączeniu formularza nie można wysłać; formularz informuje o tym i zamiast tego wskazuje nasze numery telefonów. Gdy JavaScript jest włączony, wynik — wysłano lub coś do poprawienia — pojawia się w komunikacie obok przycisku, który czytniki ekranu odczytują, a fokus klawiatury przenosi się na niego.

Jeśli formularz z jakiegokolwiek powodu nie jest dla Państwa odpowiedni, nie trzeba z nim walczyć. Prosimy zadzwonić; numery są na dole tej strony i na naszej stronie lokalizacji.

Ta witryna to zwykły HTML, CSS i JavaScript. Nie trzeba instalować wtyczki ani aplikacji. Nic, co tu publikujemy, nie jest dostępne wyłącznie jako PDF — każda strona jest stroną internetową, więc własne narzędzia do czytania w przeglądarce działają na całej zawartości. I prawie nic nie jest osadzone od innej firmy: nie ma dymka czatu, zewnętrznego odtwarzacza wideo ani widżetu nakładki. Ma to większe znaczenie, niż się wydaje, ponieważ takie nakładki są jedną z najczęstszych przyczyn, dla których użytkownik klawiatury utyka na stronie, a tutaj ich nie ma. Jedynym wyjątkiem jest kontrola bezpieczeństwa w dwóch formularzach, opisana powyżej w sekcji Formularze; jest ona na tych stronach i nigdzie indziej.

Jest jeden własny komunikat: informacja o plikach cookie dotycząca pomiarów reklamowych i analitycznych, która pojawia się raz, dopóki się na nią nie odpowie. Napisaliśmy ją sami, a nie kupiliśmy, więc zachowuje się poprawnie — jest umieszczona blisko początku strony dla użytkowników klawiatury, a nie na samym końcu, nie przechwytuje fokusu ani nie blokuje strony za nią, oba przyciski mają ten sam rozmiar i są dostępne z klawiatury, a jednorazowa odpowiedź kończy sprawę. Jeśli odmówią Państwo zgody, nic w tej witrynie nie zostanie Państwu odebrane.

Przy wyłączonym JavaScripcie cała witryna nadal da się czytać. Każde słowo, obraz, tabela i film na tych stronach znajduje się w samym HTML. Traci się wygodę: listy skrótów do sekcji nie są budowane, pierwszy slajd karuzeli na stronie głównej po prostu pozostaje na miejscu, sekcje pojawiają się od razu, zamiast się przenikać, a strona aktualności zmienia strony przez wczytanie nowej strony, jak każda witryna. Filmy nadal mają zwykłe elementy sterowania. Dwa formularze są jedyną rzeczą, która nie działa bez JavaScriptu, z powodu zawartej w nich kontroli bezpieczeństwa; formularz informuje o tym i podaje nasze numery telefonów.

Witryna jest napisana tak, aby działała w aktualnych wersjach Chrome, Edge, Firefox i Safari w systemach Windows, macOS, iOS i Android, i celowo nie używa żadnej funkcji obsługiwanej tylko przez jedną z nich — dlatego też nasze przezroczyste animacje produktów są obrazami, a nie wideo, ponieważ przezroczyste wideo nie ma formatu odtwarzanego przez wszystkie cztery. Jeśli strona zachowuje się dziwnie, prosimy podać przeglądarkę i jej wersję; zwykle to wystarczy, abyśmy mogli to odtworzyć.