Aċċessibilità għall-Iżviluppaturi: Ibni Kodiċi Inklużiv
L-iżviluppaturi huma l-arkitetti tal-aċċessibilità fil-livell ta' implimentazzjoni. Filwaqt li d-designers jistabbilixxu l-pedamenti viżwali u ta' interazzjoni, huwa l-kodiċi li fl-aħħar mill-aħħar jiddetermina jekk website taħdimx mal-navigazzjoni bil-keyboard, tikkomunikax kif suppost ma' screen readers, u żżommx l-aċċessibilità bejn browsers u apparati differenti.
L-aħbar tajba hija li l-biċċa l-kbira tal-best practices tal-aċċessibilità jaqblu mal-best practices ġenerali għal kodiċi nadif, semantiku u konformi mal-istandards. Li tikteb kodiċi aċċessibbli mhux dwar li żżid il-kumplessità — huwa dwar li tikteb kodiċi b'mod korrett mill-ewwel darba.
L-Ewwel HTML Semantiku
L-iktar ħaġa waħda li timpatta li tista' tagħmel għall-aċċessibilità hija li tuża elementi ta' HTML semantiku b'mod korrett. HTML5 jipprovdi vokabularju rikk ta' elementi li jġorru tifsira u karatteristiċi ta' aċċessibilità inerenti. Element <button> huwa awtomatikament fokusabbli, attivabbli bil-keyboard, u mħabbar bħala button minn screen readers. <div> b'onclick handler m'għandu l-ebda waħda minn dawn il-karatteristiċi mingħajr xogħol addizzjonali sinifikanti.
Uża <nav> għal reġjuni ta' navigazzjoni, <main> għall-kontenut primarju, <header> u <footer> għas-sezzjonijiet rispettivi tagħhom, <section> u <article> għal oqsma tal-kontenut, <h1> sa <h6> għal headings f'ordni ġerarkiku korrett, <ul> u <ol> għal-listi, <table> b'<th> għal data tabulari, <label> b'attributi for għall-kontrolli tal-formoli, u elementi nattivi <button> u <a> għall-kontrolli interattivi.
Dawn l-elementi joħolqu siġra ta' aċċessibilità li t-teknoloġiji assistivi jużaw biex jippreżentaw il-kontenut tiegħek lill-utenti. Meta tużahom b'mod korrett, ħafna mill-aċċessibilità tiġi mmaniġġjata awtomatikament.
Struttura tal-Headings
Il-headings joħolqu l-outline strutturali tal-paġna tiegħek. L-utenti ta' screen readers frekwentement jinnavigaw bil-headings biex jifhmu l-organizzazzjoni tal-kontenut u jsibu sezzjonijiet speċifiċi. Kull paġna għandu jkollha eżattament <h1> wieħed, u l-headings għandhom isegwu ġerarkija loġika mingħajr ma jaqbżu livelli — <h3> m'għandux isegwi <h1> mingħajr <h2> bejniethom.
Qatt tuża elementi ta' heading għall-istil viżwali. Jekk għandek bżonn test kbir u bold li mhux heading, uża CSS fuq element differenti. Bil-kontra, jekk kontenut jiffunzjona bħala heading, immarkah bħala wieħed irrispettivament mill-preżentazzjoni viżwali tiegħu.
Aċċessibilità bil-Keyboard
Il-funzjonalità kollha trid tkun operabbli permezz ta' interface tal-keyboard biss. Dan ifisser li kull element interattiv — links, buttuni, kontrolli tal-formoli, menus, modals, sliders, tabs — irid ikun jista' jintlaħaq permezz tat-Tab key (jew Shift+Tab għal lura), jista' jiġi attivat b'Enter jew Space, u jista' jiġi evitat fejn xieraq.
Qatt toħloq trappoli tal-keyboard fejn l-utenti jistgħu jidħlu f'element bit-Tab iżda ma jistgħux joħorġu minnu. Id-dialog modali għandhom iżommu l-fokus fid-dialog waqt li jkun miftuħ u jirritornaw il-fokus għall-element li ttriggerjah meta jingħalaq, iżda li tagħfas Escape għandu dejjem jkeċċi d-dialog.
Iżgura li l-ordni tal-fokus issegwi sekwenza loġika li taqbel mal-layout viżwali. L-ordni tad-DOM għandu ġeneralment jaqbel mal-preżentazzjoni viżwali. Evita li tuża valuri pożittivi ta' tabindex, li jegħlbu l-ordni naturali tal-fokus u joħolqu konfużjoni. Uża tabindex="0" biex tagħmel elementi mhux interattivi fokusabbli meta neċessarju, u tabindex="-1" għal elementi li għandhom ikunu fokusabbli biss programmatikament.
Lingwa tal-Paġna
Issettja l-lingwa default ta' kull paġna billi tuża l-attribut lang fuq l-element <html>. Dan jgħid lill-screen readers liema regoli ta' pronunzja jużaw. Jekk il-lingwa tinbidel fi ħdan il-kontenut — per eżempju, frażi Franċiża fi ħdan paġna bl-Ingliż — immarka l-bidla b'attribut lang fuq l-element li fih.
Aċċessibilità tal-Formoli
Il-formoli huma fejn l-utenti jipprovdu input, u huma sors frekwenti ta' fallimenti tal-aċċessibilità. Kull kontroll tal-formola jrid ikollu tikketta assoċjata programmatikament, tipikament billi tuża l-element <label> b'attribut for li jaqbel mal-id tal-kontroll. Grupp kontrolli relatati billi tuża <fieldset> u <legend>.
Meta żbalji tal-input jiġu identifikati, identifika l-qasam fl-iżball u iddeskrivi l-iżball fi test. Ipprovdi suġġerimenti għall-korrezzjoni fejn possibbli. Għal oqsma li jaċċettaw formati speċifiċi, ipprovdi istruzzjonijiet ċari dwar il-format mistenni. Uża l-attribut autocomplete biex tippermetti l-autofill tal-browser għal oqsma komuni bħal isem, email, indirizz, u numru tat-telefown.
Messaġġi ta' status li ma jirċevux fokus — bħal "oġġett miżjud mal-basket" jew "3 riżultati misjuba" — iridu jiġu mħabbra lill-utenti ta' screen readers permezz ta' reġjuni ARIA live jew rwoli ta' status.
Test Alternattiv
Kull immaġini mhux dekorattiva trid ikollha test alternattiv sinifikanti li jiddeskrivi l-kontenut jew il-funzjoni tagħha. Għal immaġini informattivi, iddeskrivi x'tikkomunika l-immaġini. Għal immaġini funzjonali (bħal logo li jillinkja għall-homepage), iddeskrivi l-funzjoni. Għal immaġini dekorattivi li ma jżidux informazzjoni, uża attribut alt vojt (alt="") sabiex screen readers jaqbżuhom kompletament.
Immaġini kumplessi bħal charts, graphs, jew diagrammi jistgħu jeħtieġu deskrizzjonijiet itwal ipprovduti permezz ta' caption, test adjaċenti, jew deskrizzjoni dettaljata illinkjata.
WAI-ARIA
L-ispeċifikazzjoni tal-Accessible Rich Internet Applications tipprovdi semantika addizzjonali għal sitwazzjonijiet fejn HTML nattiv mhux biżżejjed. ARIA jħallik tikkomunika rwoli, stati, u proprjetajiet lit-teknoloġiji assistivi għal widgets personalizzati u kontenut dinamiku.
Madankollu, ARIA għandha tintuża b'għaqal. L-ewwel regola tal-ARIA hija: jekk tista' tuża element HTML nattiv li għandu s-semantika u l-komportament li għandek bżonn, agħmel hekk. ARIA ma żżidx funzjonalità — iżżid biss semantika. <div role="button"> xorta jeħtieġ JavaScript għall-immaniġġjar tal-keyboard, filwaqt li <button> nattiv jimmaniġġjah awtomatikament.
Uża rwoli ta' landmark ARIA (jew l-ekwivalenti HTML5 tagħhom) biex tiddefinixi reġjuni tal-paġna. Uża aria-label u aria-labelledby biex tipprovdi ismijiet aċċessibbli fejn test viżibbli mhux biżżejjed. Uża aria-expanded, aria-selected, aria-checked, u attributi ta' stat oħra biex tikkomunika l-istat kurrenti ta' widgets interattivi. Uża reġjuni aria-live biex tħabbar aġġornamenti ta' kontenut dinamiku.
Disinn Responsiv u Reflow
Il-kontenut irid ikun preżentabbli mingħajr telf ta' informazzjoni f'320 CSS pixels wisa' mingħajr ma jitlob scrolling orizzontali. Dan jiżgura li utenti li jkabbru sa 400% fuq display desktop standard xorta jistgħu jaċċessaw il-kontenut kollu. Iddisinja l-layouts tiegħek biex jirriflowjaw il-kontenut f'kolonna waħda f'wisgħat dejqin minflok ma jitolbu scrolling f'żewġ dimensjonijiet.
Skip Links
Ipprovdi mekkaniżmu għall-utenti tal-keyboard biex jaqbżu blokki ripetuti ta' kontenut, bħal menus tan-navigazzjoni, u jaqbżu direttament għall-kontenut ewlieni. L-iktar implimentazzjoni komuni hija link "Aqbeż għall-kontenut ewlieni" li huwa l-ewwel element fokusabbli fuq il-paġna u jsir viżibbli meta jikseb il-fokus.
Ċecklist tal-Ittestjar għall-Iżviluppaturi
Qabel ma tiddeploja kwalunkwe karatteristika, ivverifika: il-funzjonalità kollha taħdem bil-keyboard biss; l-ordni tal-fokus huwa loġiku; il-fokus huwa viżibbli fuq l-elementi interattivi kollha; l-immaġini kollha għandhom alt text xieraq; il-kontrolli tal-formoli kollha għandhom tikketti; il-lingwa tal-paġna hija ssettjata; il-ġerarkija tal-headings hija korretta; ARIA tintuża b'mod korrett u biss meta neċessarju; il-kontenut jirriflowja f'320px wisa'; u aġġornamenti ta' kontenut dinamiku jiġu mħabbra lill-screen readers.
F'din is-sezzjoni
Il-website tiegħek hija aċċessibbli?
Skannja l-website tiegħek b'xejn u ikseb il-punteggio WCAG tiegħek fi ftit minuti.
Skannja s-sit tiegħek b'xejn