Niquelao » Archiwum bloga » Rozpoznawanie typów linków

» Archiwum bloga » Identyfikowanie typów odnośników Niquelao Identyfikowanie typów odnośników 3 września 2006, przez Rumoroso Dobrą praktyką, która pozytywnie wpływa na dostępność i użyteczność naszych stron, jest identyfikowanie typów odnośników znajdujących się w naszej witrynie w zależności od ich celu. W tym celu, oprócz odpowiednich działań podejmowanych w zakresie dostępności, możemy stworzyć różnice w stylach za pomocą CSS (starając się zawsze zachować spójność pozwalającą zidentyfikować odnośniki jako takie).

Dzięki tej praktyce użytkownicy korzystający z przeglądarek graficznych będą mogli rozpoznać, czy dokument, do którego zamierzają przejść, jest na przykład plikiem PDF, czy też cel znajduje się poza naszym portalem. Problemy Będziemy musieli zidentyfikować każdy typ odnośnika za pomocą klasy pozwalającej zastosować mu styl. Często osoby wprowadzające odnośniki to osoby odpowiedzialne za treść i nie mają dostępu do oznaczania kodu. Rozwiązanie Za pomocą prostej funkcji napisanej w JavaScripcie, wprowadzonej w sposób nieinwazyjny, będziemy mogli zidentyfikować typ dokumentu na podstawie zawartości atrybutu „title” (jeśli jest obecny) i/lub rozszerzenia pliku docelowego.

Na marginesie: dobrą praktyką jest, aby redaktorzy/osoby odpowiedzialne za treść przyjęli wspólny protokół identyfikowania typu celu odnośnika w jego atrybucie „title”, ponieważ większość narzędzi edycyjnych pozwala na jego wprowadzenie. Dodatkowo do skryptu dodano funkcjonalność polegającą na dołączaniu tekstu do atrybutu „title” tych odnośników, które go nie posiadają, a które wskazują na dokument rozpoznawalny przez sam skrypt. Przykładowe odnośniki Google Dokument w formacie PDF Ten odnośnik nie posiada atrybutu „title”, a dzięki funkcji zostaje mu dodany: Plik Word Skrypt Skrypt został szczegółowo opisany poniżej i możesz go pobrać bezpośrednio.

Najpierw należy zadeklarować tablicę z fragmentem tekstu do wprowadzenia przez redaktora/osobę odpowiedzialną za treść, opisującym typ celu odnośnika: var tFormat = [“enlace externo”, “formato pdf”, “formato word”]; Deklarujemy typologię odnośników (zadeklarowaną w tej samej kolejności co poprzednia): var Format = [“externo”, “pdf”, “doc”]; Deklarujemy klasy do formatowania każdego typu odnośnika (zadeklarowane w tej samej kolejności co poprzednie). Będą miały one odpowiedni styl w CSS: var classFormat = [“externo”, “pdf”, “doc”]; function enlaces() { // Wybieramy wszystkie odnośniki w dokumencie var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // Sprawdzamy, czy nie są zakotwiczeniami if(links[i].href.indexOf(”.”) > -1) { // Sprawdzamy, czy mają atrybut “title” if(links[i].getAttribute(“title”)) { // Pobieramy atrybut “title” małymi literami var title = links[i].getAttribute(“title”).toLowerCase(); // Wykonujemy pętlę, która sprawdza, czy w “title” // znajduje się jeden z tekstów wskazanych w tablicy // tFormat.

Jeśli go znajdzie, dodaje klasę // zadeklarowaną w tej samej pozycji co tekst // w tablicy classFormat for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // Ponieważ nie zawsze wszystkie odnośniki mają atrybut “title” // sprawdzimy, na wszelki wypadek, atrybut “href”, pobierając // rozszerzenie dokumentu docelowego i porównując je // z zadeklarowanymi w tablicy Format. var ini = links[i].href.length-4; var fin = links[i].href.length; var wFormat = links[i].href.substring(ini,fin).toLowerCase(); for(var f = 0; f < Format.length; f++) if(wFormat.indexOf(Format[f]) > -1) { links[i].className += ” ” + classFormat[f]; // Jeśli nie ma atrybutu “title”, dodaje go if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } Na koniec ładujemy skrypt: window.onload = enlaces; Identyfikowanie typów odnośników Kategoria: CSS, JavaScript —> 2 komentarze Jorge del Casar 14 maja 2007 Od jakiegoś czasu czytam twoją stronę i jestem całkiem pod wrażeniem.

Masz bardzo interesujące rzeczy, gratulacje. Ponieważ zauważyłem, że wielokrotnie dochodzisz do perfekcji, chciałem wnieść swój wkład. Nie wziąłeś pod uwagę, że jeśli odnośnik jest już oznaczony odpowiednią klasą w momencie uruchomienia skryptu, klasa ta się duplikuje. Nie prowadzi to do większych problemów, ale można by sprawdzić, czy posiada klasę z tablicy Format na początku i w przypadku twierdzącym przejść do następnego elementu, a w przeciwnym razie kontynuować skrypt.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Wygląda na to, że ten błąd wystąpił w przykładowym odnośniku „Dokument w formacie PDF”. Jeszcze raz gratulacje za dobrą pracę. Mam nadzieję, że wkrótce zobaczę tu więcej.

PS: Sprawdź walidację e-maila, bo mi go nie akceptuje, może to dlatego, że login zawiera kropkę (lub powtarzającą się gwiazdkę). Rumoroso 14 maja 2007 Dziękuję za wkład. W zasadzie należałoby zmodyfikować linię: if(title.indexOf(classFormat[f]) > -1) na tę drugą: if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) Nie testowałem tego, ale przypuszczam, że powinno działać. Jeśli chodzi o walidację e-maila, przypuszczam, że to problem samego walidatora.

Sprawdzę to. Dziękuję za wkład. Mam nadzieję, że nie będzie to jedyny. Możesz śledzić komentarze dzięki kanałowi RSS 2.0 . Możesz także wysłać trackback ze swojej strony.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Poprzedni artykuł: Skrypt do zamiany CSS Następny artykuł: Poprawianie formularzy (odcinek I) —> —> —> Ta praca jest objęta licencją Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.