Niquelao » Blogiarkisto » Linkkityyppien tunnistaminen

» Blogiarkisto » Linkkityyppien tunnistaminen Niquelao Linkkityyppien tunnistaminen 3. syyskuuta 2006, kirjoittaja Rumoroso Hyvä käytäntö, joka vaikuttaa myönteisesti sivujemme saavutettavuuteen ja käytettävyyteen, on tunnistaa verkkosivustollamme olevien linkkien tyyppi niiden kohteen perusteella. Tätä varten voimme saavutettavuuteen liittyvien asianmukaisten toimenpiteiden lisäksi luoda tyylieroja CSS:n avulla (pyrkien aina säilyttämään johdonmukaisuus, jonka avulla linkit tunnistetaan sellaisiksi).

Tämän käytännön avulla graafisia selaimia käyttävät käyttäjät voivat tunnistaa, onko dokumentti, johon he ovat siirtymässä, esimerkiksi pdf-tiedosto vai sijaitseeko kohde portaalimme ulkopuolella. Ongelmat Meidän on tunnistettava jokainen linkkityyppi luokan avulla, jonka avulla tyyli voidaan kohdistaa siihen. Usein linkit lisäävät henkilöt ovat sisällöstä vastaavia henkilöitä, eikä heillä ole pääsyä koodin merkitsemiseen. Ratkaisu Yksinkertaisen javascriptillä kirjoitetun ja ei-intrusiivisesti lisätyn funktion avulla voimme tunnistaa dokumentin tyypin “title”-attribuutin sisällön (jos se on läsnä) ja/tai kohdetiedoston päätteen perusteella.

Huomautuksena: on hyvä käytäntö, että sisällön muokkaajat/vastaavat omaksuvat yhteisen käytännön linkin kohteen tyypin tunnistamiseksi linkin “title”-attribuutissa, sillä useimmat muokkaustyökalut sallivat sen lisäämisen. Lisäksi skriptiin on lisätty toiminto, joka lisää tekstin “title”-attribuuttiin niille linkeille, joilla sitä ei ole ja jotka osoittavat skriptin itsensä tunnistamaan dokumenttiin. Esimerkkilinkit Google Dokumentti pdf-muodossa Tällä linkillä ei ole “title”-attribuuttia, ja funktio lisää sen: Word-tiedosto Skripti Skripti on eritelty alla, ja voit ladata sen suoraan Ensimmäiseksi määritellään taulukko, joka sisältää sisällön muokkaajan/vastaavan lisäämän tekstin, joka kuvaa linkin kohteen tyyppiä: var tFormat = [“enlace externo”, “formato pdf”, “formato word”]; Määritellään linkkityypit (määritelty samassa järjestyksessä kuin edellinen): var Format = [“externo”, “pdf”, “doc”]; Määritellään luokat kunkin linkkityypin muotoilemiseksi (määritelty samassa järjestyksessä kuin edelliset).

Näillä on vastaava tyyli CSS:ssä: var classFormat = [“externo”, “pdf”, “doc”]; function enlaces() { // Valitaan kaikki dokumentin linkit var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // Tarkistetaan, etteivät ne ole ankkureita if(links[i].href.indexOf(”.”) > -1) { // Tarkistetaan, onko niillä “title”-attribuutti if(links[i].getAttribute(“title”)) { // Haetaan “title”-attribuutti pienellä kirjoitettuna var title = links[i].getAttribute(“title”).toLowerCase(); // Tehdään silmukka, joka tarkistaa, löytyykö “title”-attribuutista // jokin tFormat-taulukossa ilmoitetuista teksteistä. // Jos löytyy, lisätään luokka, joka on määritelty // samassa kohdassa kuin teksti // classFormat-taulukossa for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // Koska kaikilla linkeillä ei aina ole “title”-attribuuttia, // tarkistetaan varmuuden vuoksi “href”-attribuutti hakemalla // kohdetiedoston pääte ja vertaamalla sitä // Format-taulukossa ilmoitettuihin. 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]; // Jos sillä ei ole “title”-attribuuttia, se lisätään if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } Lopuksi ladataan skripti: window.onload = enlaces; Linkkityyppien tunnistaminen Kategoria: CSS, Javascript —> 2 kommenttia Jorge del Casar 14. toukokuuta 2007 Olen lukenut sivustoasi jonkin aikaa, ja se on tehnyt minuun suuren vaikutuksen.

Sinulla on hyvin mielenkiintoisia juttuja, onnittelut. Koska olen huomannut, että pyörittelet asioita useaan kertaan saadaksesi kaiken täydelliseksi, halusin tehdä oman panokseni.

Et ole ottanut huomioon, että jos linkki on jo merkitty vastaavalla luokalla skriptin suoritushetkellä, kyseinen luokka monistuu. Se ei aiheuta suurempia ongelmia, mutta voisit tarkistaa, onko sillä jokin Format-taulukon luokka alussa, ja jos on, siirtyä seuraavaan elementtiin, ja jos ei, jatkaa skriptiä. Näyttää siltä, että tämä bugi on tapahtunut esimerkkilinkissä “Documento en formato pdf”. Onnittelut jälleen hyvästä työstäsi.

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

Toivottavasti näen pian lisää täällä. PS: Tarkista sähköpostin validointi, se ei hyväksy minua, syynä voi olla se, että käyttäjätunnuksessa on piste (tai toistuva tähti).

Rumoroso 14. toukokuuta 2007 Kiitos panoksestasi. Periaatteessa pitäisi muuttaa rivi: if(title.indexOf(classFormat[f]) > -1) tähän: if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) En ole testannut sitä, mutta oletan, että se toimisi. Mitä sähköpostin validointiin tulee, oletan sen olevan itse validaattorin ongelma. Katson sitä.

Kiitos panoksestasi. Toivottavasti se ei ole ainoa. Voit seurata kommentteja RSS 2.0 -syötteen kautta. Voit myös lähettää trackbackin sivustoltasi. Edellinen artikkeli: Skripti css:n vaihtamiseen Seuraava artikkeli: Lomakkeiden viimeistely (jakso I) —> —> —> Tämä teos on lisensoitu Creative Commons -lisenssillä.

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.