Es veidoju vietnei horizontālu navigācijas joslu, kas balstīta uz attēliem, jo ​​dizainers vēlas noteiktu burtveidolu un fonts nav licencēts iegultā tīmekļa lietošanai. Es pieņēmu, ka labākais veids, kā to izdarīt, ir izveidot nesakārtotu izvēlnes opciju sarakstu, pēc tam veidojot tos ar fona attēla aizstājējiem. Es to esmu izdarījis, un viņi strādā labi.

Tomēr tagad viņi vēlas, lai attēli tiktu palielināti uz peles kursora un mēģinātu, kā es varētu atrast risinājumu fona attēla mērogošanai, šķiet, ka tas ir vairāk problēmu nekā tas ir vērts ar pašreizējo CSS3 fona lieluma atbalsta stāvokli. (Lūdzu, izlabojiet mani, ja kļūdos un man ir kāds risinājums, kuru es palaidu garām.) Tātad, es atsakos no katras saraksta vienuma pārslēgšanās uz IMG.

Šajā metodē kāds būtu labākais veids, kā saglabāt tā pieejamību, neradot karalisku lietu? Vai man vienkārši vajadzētu izmantot ALT atribūtu katram attēlam, vai arī tas nemazinās tik graciozi kā attēla nomaiņa?

Protams, es veidoju šo vietni klientam, un, lai gan es cenšos sekot līdzi labākajiem tīmekļa standartiem un praksei, jāatzīst, ka dažus gadus neesmu izveidojis klienta vietni (mans parastais koncerts ir video un filmas pēcapstrāde), tāpēc es izietu mazliet avārijas kursu, lai pārliecinātos, ka es aptveru visas savas bāzes. Paldies!

Izmantojiet alternatīvu, protams, bet tas nav veids, kā lielākā daļa neredzīgo lietotāju izmanto tīmekli.

Tā kā izstrādātāji atbalsta tik ļoti slikti, lielākā daļa neredzīgo lietotāju (izmantojot JAWS vai Supernova) ielādēs vai nu lapā esošo tagu sarakstu, vai arī virsrakstu tagu sarakstu, lai izprastu lapas struktūru un tajā esošo informāciju un tad pārvietojieties pa tām interesējošajām lapas daļām.

Tāpēc es vienkāršo tekstu atstāju li tagos un teksta ievilkumā: teksts -10000 pikseļi pa labi vai pa kreisi, jo tas ir tuvāk semantiski pareizam un lietotājam noderīgāks, jo viņu programmatūra joprojām nolasīs saites tekstu pareizi.

i.,

<style>   ?> var13 ->

Ir svarīgi saprast, ka alt domājams, ka tas ir noderīgs viena elementa apraksts, taču neredzīgam lietotājam lielāks izaicinājums ir orientēties lapā esošajā informācijā (tādā veidā tie ir ļoti līdzīgi meklētājprogrammu robotiem). .

Kad viņi ir atraduši kaut ko, ko viņi vēlas, alternatīva ir noderīga, taču līdz tam saites un virsrakstu tagi ir daudz svarīgāki.

Izmantojot Alt atribūts būtu ļoti labs veids, kā pārliecināties, ka tas ir pieejams, neveicot "lietu sajaukšanu". Tas ir vienkārši, un darbībai nav nepieciešami nekādi uzlaušanas gadījumi vai papildu kods.

  • Problēma ir tāda, ka neredzīgie lietotāji praksē faktiski nemirgo, izmantojot alt tagu.

izmantojiet klipu {} saviem img elementiem, tādējādi varat izmantot css sprite, kas ir pieejams Retina ierīcēm. jūs varētu pievienot izmēru / fx: hover, vai arī jūs vienkārši varat padarīt hover img lielāku sprite.

  • Kas ir "klips {}"? Un kāda ir tā saistība ar Retina ierīcēm?
  • 1 klips ir css rekvizīts, kas kontrolē apgrieztus reģionus elementos, kas izmanto abs poz. par to varat lasīt šeit: reference.sitepoint.com/css/clip Retina ierīcēm ir 2x pikseļi, tāpēc jums tas jāņem vērā, iestatot tālummaiņu; tipiski css sprites tiek ieviesti, izmantojot background-image:, taču tas iOS 11 Retina ierīcēs pārtrauc 11 gadu.
  • Paldies par precizējumu. Man tas būs jāpatur prātā nākotnē.

Atribūts alt ir domāts attēla tagam, nevis fona attēliem.

Saraksta elementā varat izmantot fona attēlu un tekstu, bet paslēpt tekstu ar CSS. Tādā veidā ekrāna lasītājs lasīs tekstu, ignorēs attēlu, un jūsu navigācija būtu pilnīgi pieejama. Neizmantojiet displeju, bet gan:

<?php .invisible { position:absolute; left:-9000px; } 

Pievienojiet to diapazonam, iekļaujot tekstu saraksta elementā. Atkārtoti lietojams arī ar visu savā lapā esošo, ko vēlaties paslēpt, bet kas ir semantiski svarīgs (piemēram, h2 tags pirms rīvmaizes)

strādāja par jums: Charles Robertson | Vēlies ar mums sazināties?