acc_calendar: Saavutettava kalenteri javascriptillä (tarpeeton mutta hyödyllinen)

acc_calendar: Esteettinen kalenteri javascriptillä (tarpeeton mutta hyödyllinen) | Niquelao Niquelao Mitenkäs sitä sanotaan? Siirry sisältöön Etusivu Contrast Checker HeadingsMap Easyvalidator Tietoa minusta… acc_calendar: Esteettinen kalenteri javascriptillä (tarpeeton mutta hyödyllinen) Esteettömyys ja javascript? acc_calendar: Esteettinen kalenteri javascriptillä (tarpeeton mutta hyödyllinen) Päivitetty 1. kesäkuuta 2008 , kirjoittaja Rumoroso Lomakkeen kentissä, joihin on syötettävä päivämäärä, voidaan käyttökokemuksen parantamiseksi ja samalla tiedon muodon hallinnan lisäämiseksi sisällyttää kalenteri javascriptin avulla.

Tiedän, kirottu sana , mutta jos se tehdään huolella ja hallitusti, sillä ei tarvitse olla kielteisiä vaikutuksia standardien ja esteettömyyden kannalta. Tavoitteet Aluksi asetin kaksi päätavoitetta, jotka ovat enemmänkin työskentelyohjeita kalenteria rakentaessa: Sen on oltava esteetön eikä häiritsevä. Ilman javascript-tukea kalenterin avausvaihtoehtoa ei tietenkään tarjota, mutta jos tuki on olemassa… miksipä ei tehdä tuotetusta sisällöstä esteetöntä ja käytettävää? Sen on oltava helppo toteuttaa ja käyttää.

Etsin ratkaisun, jossa ohjelmoijien, jotka haluavat toteuttaa sen verkkosivuillaan, ei tarvitse lisätä ylimääräistä koodia. Aivan kuten CSS:ssä käytetään erilaisia valitsintyyppejä (elementti-, id-, luokkavalitsimia,…) tyylien liittämiseksi dokumenttiemme eri osiin, miksipä ei käyttää samaa käyttäytymisten liittämiseen? Lisäksi toissijaisina tavoitteina ovat: optimointi, yleistäminen, kansainvälistäminen,… (realistisesti ajatellen minun oli pakko poistaa iskemistavoite ja rahantekotavoite.) Sen sisällyttäminen dokumentteihimme Ennen kaikkea on mainittava, että skriptin voi hankkia suoraan lataamalla täydellisen esimerkin .

Kalenterin sisällyttäminen dokumenttiimme on yhtä yksinkertaista kuin vastaavan script-elementin lisääminen head -osioon: Kalenteri latautuu kaikille tekstikentille, joihin on lisätty luokka “ fecha “ (jos dokumentin kieli on espanja). Päivämäärän muoto määritetään skriptin ensimmäisellä rivillä. Jos siis esimerkiksi halutaan, että päivämäärä noudattaa järjestystä päivä/kuukausi/vuosi, että päivän edessä ei ole nollaa, kun se koostuu yhdestä numerosta, ja että se lisätään kuukauteen tarvittaessa, ja että vuoden muoto on 4 numeroa: var formato = ‘d/mm/yyyy’; Kuten jo mainittiin, kalenterin näyttämiseksi tekstikentän vieressä siinä on oltava luokka “fecha”, jos dokumentille ilmoitettu kieli on espanja (“date”, jos se on englanti, jne.).

Näitä luokkanimiä voi muokata, lisätä uusia muita kieliä varten jne. suoraan skriptissä. Lisäksi kaikki mahdolliset parametrit syötetään luokkina. Täydellinen luettelo on seuraava: Kalenterin lataus (pakollinen): fecha Päivämäärät ennen tätä päivää: prev Päivämäärät tämän päivän jälkeen: post Vuosien vaihteluväli: rangX (jossa X on vuosien lukumäärä) Nykyistä päivää ei sisällytetä: todnact Suodattimen käyttö saatavilla oleville päivämäärille: disp Entä jos lataankin input-kentät dynaamisesti AJAXilla?

Skriptissä on ominaisuus, että jos milloin tahansa lisätään uusia tekstikenttiä asynkronisesti AJAXilla, riittää, että kyseisen latauksen jälkeen kutsutaan funktiota cargaLinks() , jotta input-kenttiin liitetään kalenterin avauslinkit Ensimmäinen esimerkki Tuleva päivämäärä, muodossa d/mm/yyyy , tästä vuodesta ( class=“fecha post” ) Tuleva päivämäärä, muodossa d/mm/yyyy, tästä vuodesta ilman tätä päivää ( class=“fecha post todnact” ) Syntymäaika, muodossa d/mm/yyyy, enintään 100 vuotta ( class=“fecha prev rang100” ) seuraavien 20 vuoden päivämäärä, muodossa d/mm/yyyy, ilman tätä päivää ( class=“fecha post rang20 todnact” ) Viimeisten 15 vuoden päivämäärä, muodossa d/mm/yyyy ( class=“fecha prev rang15” ) Päivämäärä 10 vuotta taaksepäin ja eteenpäin, muodossa d/mm/yyyy ( class=“fecha rang10” ) Uusi parannus (huhtikuu 2007) Joskus saatamme haluta, että päivämäärä syötetään kolmeen tekstikenttään, yksi kullekin päivämäärän osalle.

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

Tämä mahdollisuus on lisätty. Tätä varten hallitsemme kaikkea edelleen input-kentille annettujen luokkien avulla. Jotta ne muodostavat ryhmän, kolmen tekstikentän on lisättävä koodi, joka tunnistaa ne sellaiseksi.

Tämä, joka vaikuttaa hieman oudolta, ei olekaan niin outoa. Itse asiassa on lisättävä sanaan fecha, jota käytämme luokkana kaikissa kolmessa, kirjain tai numero. Niinpä esimerkiksi voisimme antaa kaikille kolmelle luokan “fechaA”, ja välittömästi kalenterin avauslinkin liittämisen lisäksi ne alkaisivat käyttäytyä ryhmänä. Myöhemmin esitetään kaksi esimerkkiä, jotka näyttävät tämän selvästi.

Jokaisessa kentässä on oltava luokka sen mukaan, mikä tieto siihen liitetään: Päiväkentälle luokka “ day “ Kuukausikentälle luokka “ month “ Vuosikentälle luokka “ year “ Järjestys, jossa ne asetetaan, on täysin vapaa, ja kalenterin määritysluokat (vuosien lukumäärä, edelliset, seuraavat jne.) sijoitetaan ensimmäiseen käytettävään kenttään. Seuraavassa esimerkissä voi nähdä, miten se tehdään: Toinen esimerkki Seuraavien 10 vuoden päivämäärä muodossa päivä, kuukausi, vuosi: Päivä / Kuukausi / Vuosi Tärkeää on aina kertoa käyttäjälle, mikä kenttä on mitäkin varten.

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

Esimerkissä siitä kerrotaan edeltävässä tekstissä ja lisäksi input-kenttien etiketit sisältävät sen. Viimeisten 15 vuoden päivämäärä muodossa vuosi, kuukausi, päivä: Vuosi / Kuukausi / Päivä Tärkeää on aina kertoa käyttäjälle, mikä kenttä on mitäkin varten.

Esimerkissä siitä kerrotaan edeltävässä tekstissä ja lisäksi input-kenttien etiketit sisältävät sen. Päivitys (huhtikuu 2007) Skriptiä on muokattu vähentämään siitä sovellettavia tyylejä.

Nyt luotu linkki sisältää kuvan sisältönä (aiemmin se ladattiin tyylitiedostosta). Linkki luodaan välittömästi input-kentän jälkeen (label-elementin ulkopuolelle, jos se on sen sisällä), ja sillä on seuraava merkintä: Jos kyseessä on linkki päivämäärän lataamiseksi kolmeen tekstikenttään, linkin luokaksi tulee “ enl_cal_group , ja se sijoitetaan ennen

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.