Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web a11y, czyli programowanie z empatią Hackathon+

Web a11y, czyli programowanie z empatią Hackathon+

Temat dostępności (a11y) zyskał ostatnio rozgłos wśród społeczności developerów i nie jest trudno zrozumieć, dlaczego... Według Światowej Organizacji Zdrowia na świecie żyje ponad miliard osób z niepełnosprawnościami. Te statystyki pozwalają nam zdać sobie sprawę, że przez nieumiejętne tworzenie aplikacji możemy nieumyślnie wykluczać gro osób blokując im dostęp do tworzonego przez nas oprogramowania. Chcemy jednak tworzyć produkty, które są naprawdę dla każdego - niezależnie od sposobu interakcji.

W tej prezentacji przejdziemy przez praktyczne przykłady pozwalające zadbać o dostępność aplikacji internetowych.

Dowiemy się jak dbać o poprawne działanie strony z czytnikami ekranu i innymi urządzeniami wejściowymi; do czego służą znaczniki ARIA i jak je wykorzystywać przy tworzeniu customowych komponentów. Przyjrzymy się stylom, które pomogą użytkownikom niedowidzącym łatwo i niezawodnie nawigować po stronach. Na koniec podpowiem co zrobić, aby wszystkie te zasady sprawnie zaimplementować w swojej codziennej pracy.

Avatar for Dorota Owczarek

Dorota Owczarek

November 23, 2019
Tweet

More Decks by Dorota Owczarek

Other Decks in Programming

Transcript

  1. k8s

  2. a11y a c c e s s i b i

    l i t y 1 5 4 2 3 8 9 10 11 6 7
  3. Wszystkie funkcjonalności strony są dostępne za pomocą klawiatury, chyba że

    dana funkcjonalność nie może zostać osiągnięta w żaden znany sposób za pomocą klawiatury Rekomendacja WCAG 2.1 Wytyczna 2.1.1.
  4. NASTĘPNY ARTYKUŁ Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

    sed diam no Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
  5. NASTĘPNY ARTYKUŁ Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

    sed diam no Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
  6. <html> <head> <title>What is your name?</title> </head> <body> <label for=”name”>First

    Name</label> <input id=”name” type=”text” name=”name” value=”dorota”> <div> <button>Back</button> <button>Next</button> </div> </body> </html> id=1 role=WebArea name=”What is your name?” id=2 role=Label name=”First Name” id=3 role=TextField labelledByIds=[2] value=”dorota” id=4 role=Group id=5 role=Button name=”Back” id=6 role=Button name=”Next” HTML Accessibility Tree
  7. <label for=”mealOption”>Preferred meal option</label> <select name=”mealOption” id=”mealOption”> <option value=”0”>No preferences</option>

    <option value=”1”>Vegetarian</option> <option value=”2”>Vegan</option> <option value=”3”>Lactose-free</option> </select>
  8. <label for=”mealOption”>Preferred meal option</label> <select name=”mealOption” id=”mealOption”> <option value=”0”>No preferences</option>

    <option value=”1”>Vegetarian</option> <option value=”2”>Vegan</option> <option value=”3”>Lactose-free</option> </select> Role: ”combobox” Name: ”Preferred meal option” State: ”collapsed” Value: ”Vegetarian”
  9. <label for=”mealOption”>Preferred meal option</label> <select name=”mealOption” id=”mealOption”> <option value=”0”>No preferences</option>

    <option value=”1”>Vegetarian</option> <option value=”2”>Vegan</option> <option value=”3”>Lactose-free</option> </select> Role: ”combobox” Name: ”Preferred meal option” State: ”collapsed” Value: ”Vegetarian”
  10. Web a11y to też prawo! WCAG 2.0 to standard obowiązujący

    w Polsce i EU dla stron realizujących zadania publiczne (czyli m.in. ministerstwa, urzędy miast i gmin, policję, szpitale i wiele innych instytucji)
  11. Niepełnosprawność to nie cecha człowieka, tylko efekt oddziaływania różnych cech

    człowieka ze środowiskiem. Jeśli nie ma barier dostępności to nie ma niepełnosprawności.