Ocena strony - dostępność [CR]

pytanie zadane 18 sierpnia 2016 w HTML i CSS przez xmentor Nałogowiec (49,520 p.)
zamknięte 15 września 2016 przez xmentor

Cześć,

Dosyć często pojawiają się tego typu pytania/tematy i zapewne część osób ma już ich dość(tak mi się wydaje - bo co rusz, błędy są te same).

Starałem się aby strony była dobrze dostępna - poprawa dostępności, to w większości zasługa tutka Comandeera.

Aczkolwiek, na pewno gdzieś popełniłem gafe i potrzebuje spojrzenia na kod świeżym okiem.

Link do strony: http://kkondratowicz.esy.es/pr/

komentarz zamknięcia: otrzymałem odpowiedzi

1	komentarz 18 sierpnia 2016 przez niezalogowany projekty-> niebo że tak zażartuję: stworzyłeś niebo?? nieźle :)

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Haha :D To tylko przykładowe zdjęcie

komentarz 18 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

Nie mogę rozgryźć czemu są dwa "X" przy, gdy otworze zdjęcie?

komentarz 18 sierpnia 2016 przez niezalogowany

Jeden "X" jest na zdjęciu - najwidoczniej jest to jakiś screen.

komentarz 18 sierpnia 2016 przez niezalogowany

nie prawda, to miejsce od którego zaczął

komentarz 18 sierpnia 2016 przez uMAXa Gaduła (4,290 p.)

Bede mial chyba jakoes pytanie xd

komentarz 18 sierpnia 2016 przez uMAXa Gaduła (4,290 p.)

1. Jak to zrobiłeś że odrazu po otwarciu pasuje ci ładnie do strony tło wraz z tym logiem?

2. W jakich językach pisałeś html,css w czymś jeszcze?

3. Jak zrobić taką kreseczkę ze po najechaniu w projekt pojawia się ona?

4. Jak jesteś w info "O mnie" jak zrobiłeś tą kreseczkę narożna? ikona frontello

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

1. Jak to zrobiłeś że odrazu po otwarciu pasuje ci ładnie do strony tło wraz z tym logiem?

2. W jakich językach pisałeś html,css w czymś jeszcze?

3. Jak zrobić taką kreseczkę ze po najechaniu w projekt pojawia się ona?

4. Jak jesteś w info "O mnie" jak zrobiłeś tą kreseczkę narożna? ikona frontello

1. Troche nie rozumiem. Width ma 100% szerokośći, przy height użyłem jednostki vh, a logo jest pozycjonowane absolutnie.

2. Te które wymieniłeś + JS

3. Kreseczke? Chodzi Ci o tego + ?

4. :before i :after

komentarz 18 sierpnia 2016 przez uMAXa Gaduła (4,290 p.)

3. Te kreseczki to pewnie za pomocą js że po najechaniu na menu O mnie Projekty kontakt wysuwa sie

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

3. Te kreseczki to pewnie za pomocą js że po najechaniu na menu O mnie Projekty kontakt wysuwa sie

Nie nie, tu :after użyty.

5 odpowiedzi

odpowiedź 18 sierpnia 2016 przez Comandeer Guru (601,110 p.)
wybrane 18 sierpnia 2016 przez xmentor

Najlepsza

Wiesz, bardzo bym chciał się do czegoś przywalić, ale kurczę – no praktycznie nic nie ma :D

Można by się czepiać w miarę niskiego kontrastu (zobacz raport Wave) i pewnego problemu z dostrzeżeniem focusa na przycisku wysyłającego formularz.

Ciekawi mnie też, jak na Twój lightbox reagują czytniki ekranowe (zwłaszcza JAWS i NVDA), bo tak na oko może być zignorowany. Pobawiłbym się [role=dialog], w ostateczności [arla-live]. Akurat sam muszę poprawić to na swojej stronie, bo nie do końca to działa poprawnie (zwłaszcza w NVDA).

PS nazwy klas w kodzie jakieś dziwnie znajome… ;)

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Ciekawi mnie też, jak na Twój lightbox reagują czytniki ekranowe

Wiem wiem, lightbox jest do poprawy pod kątem dostępności :)

PS nazwy klas w kodzie jakieś dziwnie znajome… ;)

Znajome? :D

Ciężko na przykład nadać inną nazwę klasy dla li niż menu__item zakładając, że ul/ol posiada klasę menu(stosując BEM). - Starałem się nadawać takie klasy by wiedzieć później jaki elementy na stronie stylują, bez potrzeby zaglądania w źródło kodu HTML

Można by użyć jakichś abstrakcyjnych nazw, ale po co :D

odpowiedź 18 sierpnia 2016 przez Ehlert Ekspert (212,670 p.)

odpowiedź 19 sierpnia 2016 przez IBB Gaduła (3,020 p.)

Fajnie, że robiąc stronę bierzesz pod uwagę dostępność, jesteś pod tym względem niestety w mniejszości :)

Kilka rzeczy, które zauważyłam:

Nieprawidłowa kolejność fokusa - gdy osoba korzystająca z klawiatury wybierze link otwierający lightbox a następnie naciśnie klawisz Tab, fokus powinien zostać przeniesiony do pierwszego interaktywnego elementu wewnątrz tego lightboxa. Dopóki lightbox jest otwarty, nie powinno być też możliwe przeniesienie fokusa klawiatury do elementów poza nim (albo - alternatywne rozwiązanie - gdy fokus opuszcza lightbox, ten powinien zostać automatycznie zamknięty).
Unikaj zamieszczania słowa "kliknij" w tekście linków (np. "Kliknij, aby przejść do początku strony"). Po pierwsze w 2016 r. nie ma potrzeby informować użytkowników jak działają linki czy też przyciski, po drugie powoduje to niepotrzebne wydłużenie tekstu linku, po trzecie skupia uwagę użytkownika na akcji, zamiast na jej celu, a po czwarte nie każda osoba korzysta z myszy: niektórzy klikają na linki, inni aktywują je z klawiatury naciskając Enter, jeszcze inni naciskają na nie używając ekranu dotykowego, a gdy Stephen Hawking odwiedzi Twoją stronę, wybierze link za pomocą skurczu policzka.
Dyskryminujesz osoby widzące Informację o tym, które pola formularza są obowiązkowe, osoby niewidome mają podaną na dwa sposoby - poprzez ukryty tekst zawarty w etykiecie ("pole wymagane") i atrybut "required" dodany do pól formularza. Osoby, które nie korzystają z czytnika ekranu, nie będą wiedziały, czy i które pola są obowiązkowe (dopóki nie zobaczą komunikatu o błędzie).
Niektóre opisy elementów img powinny zostać poprawione (np. "Lightbox", Prosty lightbox, pozwalający wyświetlać zdjęcia w większym rozmiarze"), ale to pewnie kwestia tego, że strona nie jest jeszcze gotowa i używasz tymczasowych obrazków.

komentarz 19 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Nieprawidłowa kolejność fokusa - gdy osoba korzystająca z klawiatury wybierze link otwierający lightbox a następnie naciśnie klawisz Tab, fokus powinien zostać przeniesiony do pierwszego interaktywnego elementu wewnątrz tego lightboxa. Dopóki lightbox jest otwarty, nie powinno być też możliwe przeniesienie fokusa klawiatury do elementów poza nim (albo - alternatywne rozwiązanie - gdy fokus opuszcza lightbox, ten powinien zostać automatycznie zamknięty).

Tak wiem, lightbox jest do poprawy :)

Dyskryminujesz osoby widzące Informację o tym, które pola formularza są obowiązkowe, osoby niewidome mają podaną na dwa sposoby - poprzez ukryty tekst zawarty w etykiecie ("pole wymagane") i atrybut "required" dodany do pól formularza. Osoby, które nie korzystają z czytnika ekranu, nie będą wiedziały, czy i które pola są obowiązkowe (dopóki nie zobaczą komunikatu o błędzie).

Będzie poprawione :)

Niektóre opisy elementów img powinny zostać poprawione (np. "Lightbox", Prosty lightbox, pozwalający wyświetlać zdjęcia w większym rozmiarze"), ale to pewnie kwestia tego, że strona nie jest jeszcze gotowa i używasz tymczasowych obrazków.

Myślę, że alt np. tutaj:

<img src="img/lb-thumbnail.jpg" alt="Prosty lightbox, pozwalający wyświetlać zdjęcia w większym rozmiarze">

jest prawidłowy, krótki opis projektu.

Wiem, że alt, który otrzymuje obrazek wyświetlony w boxie jest nieprawidłowy :)

Dziękuje za wskazówki, zabieram się do poprawiania :)

odpowiedź 18 sierpnia 2016 przez vShui Początkujący (400 p.)

Strona Cud-miód :)
Zauważyłem jednego buga przy zmniejszaniu strony:

Pozdrawiam,

vShui

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Mógłbyś sprawdzić przy jakiej rozdzielczości okna tak się dzieje?

komentarz 18 sierpnia 2016 przez vShui Początkujący (400 p.)
edycja 18 sierpnia 2016 przez vShui

994 do 981
Potem jest ok i znowu:
951 do końca

btw. Consol loga czyściłeś jakimś taskiem w gulpie?

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

btw. Consol loga czyściłeś jakimś taskiem w gulpie?

Nie rozumiem o.o

Tak na marginesie używałem Grunt'a

komentarz 18 sierpnia 2016 przez vShui Początkujący (400 p.)

Jestem zaskoczony że nie wyskakują ci żadne informacje dot. skryptów w konsoli, u mnie to zawsze jest 50 różnego rodzaju informacji, kiedy i jaki skrypt się akurat aktywował. Jedynym sposobem żeby je usunąć było zainicjowanie w gulpbuildzie specjanego task który je kasował.

odpowiedź 18 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Widzę że zaszalałeś w JS :)

Stronka spoko. Skoro Comandeer chwali, to będę się "wzorował" w razie czego :)

Mam natomiast kilka pytań:

W jakim celu do IIFE ładujesz jako parametr funkcję?

W JS od 80 linijki (pod odminifikowaniu w konsoli Chrome):

!function(e, t) {
    "use strict";
    "function" == typeof define && define.amd ? define(t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : e.smoothScroll = t()
}(this, function() {
    "use strict";
    if ("object" == typeof window && void 0 !== document.querySelectorAll && void 0 !== window.pageYOffset && void 0 !== history.pushState) {

Dlaczego, obok this przekazujesz funkcję?

W 124 linijce:

for (var e, t = document.querySelectorAll('a[href^="#"]:not([href="#"])'), n = t.length; e = t[--n]; )

, a konkretnie ten fragment:

('a[href^="#"]:not([href="#"])')

szukasz <a>, których atrybut href zaczyna się od #, ale nie jest #? Czyli href="#hash" przejdzie a href="#" nie przejdzie? Tak przynajmniej rozumiem z opisu:

https://www.w3.org/TR/css3-selectors/

I, jak dla mnie, ciekawa/dziwna rzecz (linijka 48):

var f = c.getElementById("lb-img")

Pobierasz sobie jakiś element po ID - ok. Ale (linijka 59):

f.addEventListener("load", function() {

, jeśli ten element f nie jest wcześniej załadowany, to czy pobranie go poprzez ID nie powinno rzucić null? Właściwie, jesli dany element zostanie pobrany dynamicznie, to przy próbie podpięcia .addEventListener() konsola powinna rzucić błąd w stylu "Cannot read property 'addEventListener' of null(…)". Mogę się mylić - dlatego pytam :)

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Mam natomiast pytanie: w jakim celu do IIFE ładujesz jako parametr, funkcję?

Dlaczego, obok this przekazujesz funkcję?

Ten kod akurat nie jest mój, użyłem jednego z mikrusów: http://microjs.com/#smoothscroll

I, jak dla mnie, ciekawa (dziwna) rzecz (linijka 48): [...]

Ten element o tym ID już znajduje się w DOM'ie ale obrazek nie koniecznie jest jeszcze załadowany :D

komentarz 18 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Ten kod akurat nie jest mój

Ah :) Mógłbyś wskazać, która część JSa jest Twoja?

Ten element o tym ID już znajduje się w DOM'ie ale obrazek nie koniecznie jest jeszcze załadowany :D

Prawdę mówiąc liczyłem na to, że znalazłeś jakiś sposób na podpięcie listenera do elementu HTML ładowanego AJAXem (czyli żeby próba złapania go, zanim się załaduje, nie kończyła się opisanym przeze mnie błędem z nullem). Ale skoro nie to trudno ;)

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)
edycja 18 sierpnia 2016 przez xmentor

Ah :) Mógłbyś wskazać, która część JSa jest Twoja?

Wszystko od góry do :

! function(e, t) {
    "use strict";
    "function" == typeof define && define.amd ? define(t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : e.smoothScroll = t()
}(this, function() { [...]

Prawdę mówiąc liczyłem na to, że znalazłeś jakiś sposób na podpięcie listenera do elementu HTML ładowanego AJAXem (czyli żeby próba złapania go, zanim się załaduje, nie kończyła się opisanym przeze mnie błędem z nullem). Ale skoro nie to trudno ;)

W takim przypadku można chyba zastosować event delegation, czy nie?

komentarz 18 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Wszystko od góry do

To i tak zaszalałeś :)

W takim przypadku można chyba zastosować event delegation, czy nie?

Czyli, że listener na rodzica, a do środka włożyć element załadowany AJAXem i eventy na tym elemencie przez "bąbelkowanie" będą wychwytywane w listenerze rodzica? Hmm... no to by było fajne.

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

To i tak zaszalałeś :)

Nie wiem czy w pozytywnym sensie czy negatywnym :D Bo kod samego lightboxu nie jest jakichś wysokich lotów :)

Czyli, że listener na rodzica, a do środka włożyć element załadowany AJAXem i eventy na tym elemencie przez "bąbelkowanie" będą wychwytywane w listenerze rodzica? Hmm... no to by było fajne.

Dokładnie tak :) - inne rozwiązanie nie przychodzi mi na myśl

komentarz 18 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Nie wiem czy w pozytywnym sensie czy negatywnym :D Bo kod samego lightboxu nie jest jakichś wysokich lotów :)

Mówię o pierwszym "dużym" IIFE (tym na samej górze). Gdyby w sensie negatywnym, to bym podał konkretne linijki co wg mnie jest źle. A tak szczerze mówiąc, trochę się gubię (chyba, że minifikacja zmienia zapis bardziej niż myślałem)... Po co np. stosujesz dwukrotnie IIFE (linijki 16 i 52)?

Linijka 65:

Array.prototype.forEach.call(c.querySelectorAll("[data-lightbox]")

a gdyby tak zapisać Array.from( c.querySelectorAll( "[data-lightbox]" ) ).forEach() ?

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Po co np. stosujesz dwukrotnie IIFE (linijki 16 i 52)?

Funkcje natychmiastowe :)

a gdyby tak zapisać Array.from( c.querySelectorAll( "[data-lightbox]" ) ).forEach() ?

Można i tak, równie dobrze moża użyć zwykłej pętli.

komentarz 18 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Funkcje natychmiastowe :)

Ja rozumiem, że to IIFE. Tylko po co tam robisz funkcje zamiast po prostu napisać kod? Chyba, że wewnątrz tych IIFE zachodzi rekurencja - a z tego co widzę to te IIFE mają nazwy (zminifikowane h i l), do których się w środku odnosisz. Czyli IIFE się wykonuje i po spełnieniu warunków z operatorów ternarnych IIFE jest odpalane jeszcze raz?

Skoro już przy tych IIFE, to z tego co widzę są one praktycznie identyczne - więc może zrób jedną funkcje, do której poślesz odpowiednie parametry i pozbędziesz się dwukrotnego zapisu tych IIFE oraz tych zapisków znad IIFE:

                b.style.opacity = +(b.style.opacity || d.getComputedStyle(b).getPropertyValue("opacity"));
                a.style.opacity = +(a.style.opacity || d.getComputedStyle(a).getPropertyValue("opacity"));

Umieść, to co praktycznie identyczne (funkcje e oraz m z linijek 13 i 49) w jednej funkcji, a elementy/obiekty, na których wywołujesz metody prześlij jako parametry i zamiast pisać dwa razy to samo, wywołaj tą funkcję. Różnice pomiędzy nimi zniweluj IFami.

Taka jest moja propozycja :)

komentarz 18 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Czyli IIFE się wykonuje i po spełnieniu warunków z operatorów ternarnych IIFE jest odpalane jeszcze raz?

No tak

Umieść, to co praktycznie identyczne (funkcje e oraz m z linijek 13 i 49) w jednej funkcji, a elementy/obiekty, na których wywołujesz metody prześlij jako parametry i zamiast pisać dwa razy to samo, wywołaj tą funkcję. Różnice pomiędzy nimi zniweluj IFami.

Okej, wezmę wszystko wszystko pod uwagę podczas zmian :) Dzięki za uwagi!