Dostępność gier – „nie trzeba wiele”

Kwestie dostępności stron internetowych, aplikacji czy w tym wypadku gier to zagadnienia, którym warto poświęcać więcej uwagi. Nie tylko jako twórcy, projektanci czy wykonawcy odpowiedzialni za ostateczne wdrożenie, ale również konsultanci, testerzy, recenzenci czy jakiekolwiek osoby uczestniczące w procesie powstawania czy oceny produktu lub usługi.

Artykuł „Nie trzeba wiele” to publikacja przygotowana przez magazyn CD-Action, która przybliża temat „accessibility” w grach i trudności jakie napotykają osoby z niepełnosprawnościami oraz często drobne działania, dzięki którym tych trudności można uniknąć. Zachęcam do przeczytania.

Osobiście z tematem mam więcej doświadczenia w kontekście tworzenia stron internetowych czy aplikacji. Po przeczytaniu artykułu dochodzę do wniosku, że zarówno strony, aplikacje i gry mają w rzeczywistości sporo wspólnego pod względem „accessibility” . Często niewielkim nakładem pracy przy odpowiedniej świadomości, wykazaniu empatii i inicjatywy, możemy mieć realny wpływ na #dostępność produktów wokół nas.

Kontrast kolorów, prawidłowo opisane zdjęcia, semantyka elementów, możliwość nawigacji klawiaturą, dostosowanie do czytników ekranowych, rozmiar tekstu i innych elementów interfejsu oraz wiele więcej (czy nawet możliwości konfiguracji podobnych parametrów) mogą mieć niebagatelny wpływ na przyjemność czy w ogóle możliwość korzystania z gry, strony czy aplikacji.

Warto być świadomym, otwartym i chętnym do poszerzania wiedzy, by dołożyć swoją cegiełkę na drodze do lepszych doświadczeń różnych grup użytkowników i konsekwentnie zmniejszać poziom wykluczenia wynikający z zaniedbań w kwestiach dostępności.

Dostępność gier – „nie trzeba wiele”

mlStackNav – multi-level stack navigation

Customizable, accessible, easy-to-use multi-level stack navigation menu with slide effect.

mlStackNav jQuery plugin is intended to use by developers, as a boilerplate with minimal styling, it can be a good starting point for responsive navigation.

mlStackNav – multi-level stack navigation

Frontend Skeleton – example frontend project with Grunt workflow and Browsersync

Some of the features:

  • live reloading (page auto refresh on file change),
  • auto creating CSS sprites from set of images,
  • BEM methodology (Block, Element, Modifier) for CSS,
  • optimized directory structure,
  • SASS (libSass), Bourbon, Neat, Handlebars and other cool frontend stuff.

Project page and more details: https://github.com/damianwajer/frontend-skeleton

Frontend Skeleton – example frontend project with Grunt workflow and Browsersync

WP Redirect to Live – redirect not logged in users to another URL

WP Redirect to Live is a simple plugin to redirect not logged in users to another URL. For example you can disable access to beta instance and redirect all not logged in users to live site or you can just use it when you migrate your website to another domain.

Features:

  • redirect not logged in users to specific URL
  • return 404 Not Found page
  • add meta robots “noindex”

Project page and more informations: https://github.com/damianwajer/wp-redirect-to-live

WP Redirect to Live – redirect not logged in users to another URL

Różnice renderowania czcionek na Windows i OS X, rozmycie i inne problemy

Apple i Microsoft od zawsze reprezentowały różne podejścia w kwestii renderowania czcionek. Praktyczne skutki tego odczułem ostatnio na własnej skórze, w sytuacji gdy czcionka na Macu (OS X) wyświetlała się z dziwnym efektem rozmycia. Sytuacja była o tyle dziwna, że miała miejsce tylko przy konkretnych kolorach samej czcionki jak i tła (jasny tekst na ciemnym tle).

Przykład różnicy w renderowaniu czcionek:

mac-linux-windows

Co w tej sytuacji zrobić? Zwykle web developer nie ma pełnej kontroli nad renderowaniem czcionek, zanim jednak wywiesiłem białą flagę zrobiłem mały research, który doprowadził mnie do rozwiązania problemu.

Okazuje się, że twórcy przeglądarek udostępniają nam niestandardowe właściwości CSS, dzięki którym wychodzimy obronną ręką z przedstawionej sytuacji.

Oto rozwiązanie dla przeglądarek opartych o webkit:

-webkit-font-smoothing: antialiased;

Szczęśliwie również Firefox (od wersji 25) oferuje podobne obejście problemu poprzez zastosowanie:

-moz-osx-font-smoothing: grayscale;

Pamiętajcie jednak że jest to niestandardowe rozwiązanie służące do obejścia problemu i nie należy tego nadużywać dodając np. przedstawione właściwości w standardzie.

Podsumowując, przykładowa poprawka mogłaby wyglądać następująco:

Różnice renderowania czcionek na Windows i OS X, rozmycie i inne problemy