Batilisha Lebo Mbaya za Picha kupitia Programu Yangu ya Kizazi cha Alt Tag Iliyoundwa kwa OpenAI API

Lebo za Alt ni kipengele kinachojulikana zaidi cha kuunda kurasa za wavuti zinazoweza kufikiwa, lakini kwa bahati mbaya mara nyingi hupuuzwa au kutekelezwa vibaya. Lebo mbadala ni maelezo mafupi ya maandishi yaliyoongezwa kwa picha. Visoma skrini husoma yaliyomo kwenye ukurasa wa wavuti kwa watumiaji, na maelezo ya picha ni yale wanayosoma ili kuwasilisha kile kilicho kwenye picha kwenye ukurasa kwa watumiaji wenye ulemavu wa macho, kwa kuwa hawawezi kuziona.

Kwa bahati mbaya, ni kawaida kwa picha kukosa lebo zozote za alt. Pia nimeona lebo zingine zikitumiwa vibaya kwa njia zinazofanya mambo kuwa magumu zaidi kwa mtumiaji aliye na matatizo ya kuona, kama vile lebo zinazosema "picha" au "picha," lebo ambazo ni manukuu mazuri ambayo mwandishi aliongeza bila kurejelea kilicho kwenye picha ( yaani, picha ya kahawa na kompyuta ndogo kwenye ukurasa wa kublogi, ikiwa na nukuu "mpendwa shajara, ningependa kuchaguliwa kama mwandishi mgeni"). Nimeona pia vitambulisho vingine ambavyo ni pamoja na mistari 3 ya maneno muhimu ya SEO. Je, unaweza kufikiria kujaribu kusikiliza kile kilicho kwenye tovuti ili tu kusikia "picha ya picha" au orodha ndefu ya maneno muhimu ya SEO?

Hiki ni kiendelezi cha Chrome kilichoundwa ili kuwawezesha watumiaji walio na matatizo ya kuona kwa kuwaruhusu kubatilisha lebo mbaya za alt, na kuongeza AI ya Open ili kuingiza maelezo yanayotokana na AI. Hii inaruhusu mtumiaji aliye na matatizo ya kuona kufikia maudhui yote kwenye ukurasa wa tovuti ambayo mtumiaji asiye na matatizo ya kuona anaweza kufikia (au angalau asipunguzwe na orodha ndefu ya maneno muhimu ya SEO).

Ikiwa unataka tu kiendelezi, unakaribishwa kupakua repo hii na ufuate maagizo katika README.

Walakini, ikiwa una nia ya mwongozo wa hatua kwa hatua wa jinsi ya kuunda kiendelezi cha Chrome na OpenAI, ifuatayo ni matembezi.

Kujenga ugani:

1. Pata Kiendelezi cha msingi cha 'Hujambo Ulimwengu' wa Chrome

Kwanza, hebu tuanze na kuendesha sahani ya msingi ya Chrome. Funga hazina hii na ufuate maagizo katika README:

Ukishaisakinisha na kusakinisha, unapaswa kuwa na aikoni ya picha kwenye upau wako wa kiendelezi (Ninapendekeza uibandike ili kufanya majaribio haraka zaidi), na unapoibofya, inapaswa kuona dirisha ibukizi lenye "hello world."

Hebu tufungue msimbo wa boilerplate, na utembee kupitia faili zilizopo. Hii pia itashughulikia baadhi ya misingi ya Kiendelezi cha Chrome:

Static/manifest.json - Kila kiendelezi cha Chrome kina faili ya manifest.json. Inajumuisha maelezo ya msingi na usanidi kuhusu kiendelezi. Katika faili yetu ya Dhihirisho, tuna jina, maelezo, faili ya usuli iliyowekwa src/background.js, ikoni iliyowekwa kwa image-icon.png (hii ndiyo ikoni ambayo itaonyesha kuwakilisha kiendelezi kwenye menyu ya viendelezi), na inaweka popup.html kama chanzo cha faili kwa ibukizi yetu.

src/background.js - Faili ya background.js iliyowekwa kwenye faili yetu ya maelezo. Msimbo katika faili hii utaendeshwa chinichini na kufuatilia matukio ambayo yanaanzisha utendakazi katika kiendelezi.

src/content.js - Hati yoyote inayoendeshwa katika muktadha wa ukurasa wa tovuti au kurekebisha ukurasa wa tovuti huwekwa kwenye hati ya maudhui.

src/popup.js, static/popup.css, na static/popup.html - Faili hizi hudhibiti dirisha ibukizi unaloona unapobofya ikoni ya kiendelezi

Hebu tutengeneze baadhi ya misingi - fungua static/manifest.json na ubadilishe jina na maelezo hadi "Jenereta ya Maelezo ya Picha ya Kisomaji cha Skrini" (au chochote ungependelea).

2. Wezesha kuingiliana na kurasa za wavuti kwa kutumia hati ya maudhui

   
   

Kiendelezi chetu kitabatilisha lebo za alt kwenye tovuti ambayo mtumiaji amewasha, kumaanisha tunahitaji ufikiaji wa html ya ukurasa. Njia ya kufanya hivyo katika Viendelezi vya Chrome ni kupitia hati za maudhui. Hati yetu ya maudhui itakuwa katika faili yetu ya src/content.js.

Njia rahisi zaidi ya kuingiza hati ya maudhui ni kwa kuongeza sehemu ya "hati" kwenye faili ya maelezo kwa kurejelea faili ya js. Unaposanidi hati ya maudhui kwa njia hii, hati iliyounganishwa itaendeshwa wakati wowote kiendelezi kinapopakiwa. Hata hivyo, kwa upande wetu, hatutaki kiendelezi chetu kiendeshwe kiotomatiki mtumiaji anapofungua kiendelezi. Baadhi ya tovuti zina lebo bora kabisa za alt zilizowekwa kwenye picha, kwa hivyo tunataka tu kutekeleza msimbo wakati mtumiaji anaamua kuwa ni muhimu.

Tutaongeza kitufe katika ibukizi yetu na kumbukumbu ya dashibodi katika hati yetu ya maudhui, ili mtumiaji anapobofya kitufe, hati ya maudhui itapakiwa, na tunaweza kuthibitisha hilo kwa kuona taarifa yetu ikichapishwa katika dashibodi ya Chrome.

Ibukizi.html

 <button id="generate-alt-tags-button">Generate image descriptions</button>

src/content.js

 console.log('hello console')

Njia ya kuunganisha kubofya kitufe hicho kwenye dirisha ibukizi kwa hati ya maudhui inahusisha popup.js na background.js.

Katika popup.js, tutanyakua kitufe kutoka kwa DOM na kuongeza msikilizaji wa tukio. Mtumiaji anapobofya kitufe hicho, tutatuma ujumbe unaoashiria hati ya maudhui inapaswa kuingizwa. Tutaita ujumbe "injectContentScript"

 const generateAltTagButton = document.body.querySelector('#generate-alt-tags-button'); generateAltTagButton.addEventListener('click', async () => { chrome.runtime.sendMessage({action: 'injectContentScript'}) });

Katika background.js, tuna msimbo unaofuatilia matukio na kuitikia. Hapa, tunasanidi msikilizaji wa tukio, na ikiwa ujumbe uliopokewa ni 'injectContentScript', itatekeleza hati ya maudhui katika kichupo amilifu (ukurasa wa sasa wa wavuti wa mtumiaji).

 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.action === 'injectContentScript') { chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.scripting.executeScript({ target: { tabId: tabs[0].id }, files: ['content.js'] }); }); } });

Hatua ya mwisho ya kusanidi hii ni kuongeza ruhusa za "activeTab" na "scripting" kwenye faili yetu ya maelezo. Ruhusa ya "hati" inahitajika ili kuendesha hati yoyote ya maudhui. Tunapaswa pia kuongeza ruhusa kwa kurasa tunazoingiza hati. Katika hali hii, tutakuwa tunaingiza hati kwenye tovuti ya sasa ya mtumiaji, yaani kichupo kinachotumika, na hilo ndilo ruhusa ya activeTab inaruhusu.

Katika manifest.json:

 "permissions": [ "activeTab", "scripting" ],

Katika hatua hii, unaweza kuhitaji kuondoa kiendelezi kutoka kwa Chrome na upakie upya ili kiendeshe ipasavyo. Mara tu inapofanya kazi, tunapaswa kuona dashibodi yetu ikiingia kwenye kiweko chetu cha Chrome.

Hapa kuna kiunga cha github cha nambari ya kufanya kazi kwa repo katika hatua hii .

3. Inakusanya picha za ukurasa na kuingiza lebo za majaribio

   
   

Hatua yetu inayofuata ni kutumia faili yetu ya hati ya maudhui kunyakua picha zote kwenye ukurasa, kwa hivyo tunayo maelezo hayo tayari kutuma simu zetu za API ili kupata maelezo ya picha. Pia tunataka kuhakikisha kuwa tunapiga simu kwa ajili ya picha pekee ambapo ni muhimu kuwa na maelezo. Baadhi ya picha ni za mapambo tu na hazihitaji kupunguza kasi ya visoma skrini kwa maelezo yao. Kwa mfano, ikiwa una upau wa kutafutia ambao una lebo ya "tafuta" na ikoni ya glasi ya kukuza. Ikiwa taswira ina lebo yake mbadala iliyowekwa kwa mfuatano tupu, au imefichwa aria imewekwa kuwa kweli, hiyo inamaanisha kuwa picha haihitaji kujumuishwa kwenye kisomaji skrini, na tunaweza kuruka kuitolea maelezo.

Kwa hivyo kwanza, katika content.js, tutakusanya picha zote kwenye ukurasa. Ninaongeza console.log ili niweze kuthibitisha haraka kuwa inafanya kazi kwa usahihi:

 const images = document.querySelectorAll("img"); console.log(images)

Kisha tutapitia picha, na kuangalia picha ambazo tunahitaji kuzalisha lebo ya alt. Hiyo inajumuisha picha zote ambazo hazina lebo ya alt, na picha ambazo zina lebo ya alt ambayo si kamba tupu, na picha ambazo hazijafichwa wazi kutoka kwa visoma skrini na sifa iliyofichwa aria.

 for (let image of images) { const imageHasAltTag = image.hasAttribute('alt'); const imageAltTagIsEmptyString = image.hasAttribute('alt') && image.alt === ""; const isAriaHidden = image.ariaHidden ?? false; if (!imageHasAltTag || !imageAltTagIsEmptyString || !isAriaHidden) { // this is an image we want to generate an alt tag for! } }

Kisha tunaweza kuongeza mfuatano wa majaribio ili kuweka lebo za alt, ili tuweze kuthibitisha kuwa tuna njia ya utendaji ya kuziweka kabla ya kuendelea na simu zetu za OpenAI. Maudhui yetu.js sasa inaonekana kama:

 function scanPhotos() { const images = document.querySelectorAll("img"); console.log(images) for (let image of images) { const imageHasAltTag = image.hasAttribute('alt'); const imageAltTagIsEmptyString = image.hasAttribute('alt') && image.alt === ""; const isAriaHidden = image.ariaHidden ?? false; if (!imageHasAltTag || !imageAltTagIsEmptyString || !isAriaHidden) { image.alt = 'Test Alt Text' } } } scanPhotos()

Kwa wakati huu, ikiwa tutafungua Vipengele vya zana za usanidi wa Chrome, bofya kwenye picha, tunapaswa kuona "Jaribio la Maandishi ya Alt" limewekwa kama lebo ya alt.

Repo ya kufanya kazi ya mahali ambapo nambari iko katika hatua hii iko hapa.

4. Sakinisha OpenAI na utengeneze maelezo ya picha

   
   

Ili kutumia OpenAI, utahitaji kuzalisha ufunguo wa OpenAI na pia kuongeza mkopo kwenye akaunti yako. Ili kutengeneza kitufe cha OpenAI:

1. Nenda kwa https://platform.openai.com/docs/overview na, chini ya "Pata funguo zako za API", bofya "Jisajili"
2. Fuata maagizo ili kuunda akaunti ya OpenAI
3. Kwenye skrini ya "Piga Simu Yako ya Kwanza", weka jina unalopendelea la ufunguo wako wa API, kama vile "Kifunguo cha Jenereta cha Maelezo ya Picha kwenye Chrome"
4. Bofya "Tengeneza Ufunguo wa API"

Hifadhi ufunguo huu. Pia, iweke faragha - hakikisha hauisukumi kwenye repos zozote za git za umma.

Sasa, nyuma katika repo yetu, kwanza tunataka kusakinisha OpenAi. Kwenye terminal ndani ya saraka ya mradi, endesha:

 npm install openai

Sasa katika content.js, tutaleta OpenAI kwa kuongeza msimbo huu juu ya faili, na ufunguo wako wa OpenAI umebandikwa kwenye mstari wa 1:

 const openAiSecretKey = 'YOUR_KEY_GOES_HERE' import OpenAI from "openai"; const openai = new OpenAI({ apiKey: openAiSecretKey, dangerouslyAllowBrowser: true });

"DangerouslyAllowBrowser" huruhusu simu ipigwe kwa ufunguo wako kutoka kwa kivinjari. Kwa ujumla, hii ni mazoezi yasiyo salama. Kwa kuwa tunaendesha mradi huu ndani ya nchi pekee, tutauacha kama hivi, badala ya kusanidi urejeshaji wa nyuma. Iwapo utatumia OpenAI katika miradi mingine, hakikisha unafuata mbinu bora kuhusu kuweka siri muhimu.

Sasa tunaongeza simu yetu kuwa na OpenAI kutoa maelezo ya picha. Tunapigia simu mwisho wa ukamilishaji wa gumzo ( Hati za OpenAI za sehemu ya mwisho ya kukamilisha gumzo ).

Inabidi tuandike haraka yetu na pia kupitisha URL ya src ya picha ( maelezo zaidi juu ya uhandisi wa haraka wa AI ). Unaweza kurekebisha kidokezo jinsi ungependa. Nilichagua kuweka kikomo maelezo kwa kazi 20 kwa sababu OpenAI ilikuwa ikirudisha maelezo marefu. Zaidi ya hayo, niliona ilikuwa ikifafanua kikamilifu nembo kama nembo za Yelp au Facebook (yaani, 'kisanduku kikubwa cha bluu chenye herufi ndogo f ndani'), ambazo hazikuwa na manufaa. Iwapo ni infographic, ninauliza kwamba kikomo cha maneno hakizingatiwi na maandishi kamili ya picha yanashirikiwa.

Hapa kuna simu kamili, ambayo inarudisha maudhui ya jibu la kwanza la AI na pia hupitisha hitilafu kwenye kipengele cha "handleError". Nimejumuisha console.log ya kila jibu ili tuweze kupata maoni kwa haraka ikiwa simu itafaulu au la:

 async function generateDescription(imageSrcUrl) { const response = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "user", content: [ { type: "text", text: "Describe this image in 20 words or less. If the image looks like the logo of a large company, just say the company name and then the word logo. If the image has text, share the text. If the image has text and it is more than 20 words, ignore the earlier instruction to limit the words and share the full text."}, { type: "image_url", image_url: { "url": imageSrcUrl, }, }, ], }, ], }).catch(handleError); console.log(response) if (response) { return response.choices[0].message.content;} } function handleError(err) { console.log(err); }

Tunaongeza simu kwa chaguo hili la kukokotoa katika taarifa kama tuliyoandika hapo awali (tunapaswa pia kuongeza neno kuu la async mwanzoni mwa kazi ya ScanImages ili kujumuisha simu hii isiyo ya kawaida):

 const imageDescription = await generateDescription(image.src) if (!imageDescription) { return; } image.alt = imageDescription

Hapa kuna kiunga cha content.js kamili na repo katika hatua hii.

5. Kujenga UI

   
   

Kisha, tunataka kuunda kiolesura chetu ili mtumiaji ajue kinachoendelea baada ya kubofya kitufe ili kutengeneza lebo. Inachukua sekunde chache kwa lebo kupakia, kwa hivyo tunataka ujumbe wa 'kupakia' ili mtumiaji ajue kuwa inafanya kazi. Zaidi ya hayo, tunataka kuwafahamisha kuwa imefaulu, au ikiwa kuna hitilafu. Ili kufanya mambo kuwa rahisi, tutakuwa na div ya ujumbe wa jumla wa mtumiaji katika html, na kisha tutumie popup.js kuingiza ujumbe unaofaa kwa mtumiaji kulingana na kile kinachotokea kwenye kiendelezi.

Jinsi viendelezi vya Chrome vinavyowekwa, hati yetu ya maudhui (content.js) imetenganishwa na popup.js zetu, na haziwezi kushiriki viambajengo jinsi faili za JavaScript za kawaida zilivyo. Jinsi hati ya maudhui inavyoweza kujulisha dirisha ibukizi kwamba lebo zinapakiwa, au zimepakiwa kwa ufanisi, ni kupitia ujumbe kupita. Tayari tulitumia utumaji ujumbe tulipomjulisha mfanyakazi wa usuli ili kuingiza hati ya maudhui mtumiaji alipobofya kitufe cha asili.

Kwanza, katika html yetu, tutaongeza div na kitambulisho cha 'user-message' chini ya kitufe chetu. Nimeongeza maelezo zaidi kwa ujumbe wa awali, pia.

 <div id="user-message"> <img src="image-icon.png" width="40" class="icon" alt=""/> This extension uses OpenAI to generate alternative image descriptions for screen readers. </div>

Kisha, katika popup.js zetu, tutaongeza msikilizaji anayesikiliza ujumbe wowote unaotumwa ambao unaweza kuwa na sasisho la hali ya kiendelezi. Pia tutaandika html fulani ya kuingiza kulingana na matokeo yoyote ya hali tutakayopata kutoka kwa hati ya maudhui.

 const userMessage = document.body.querySelector('#user-message'); chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { renderUI(message.action) } ); function renderUI(extensionState) { generateAltTagButton.disabled=true; if (extensionState === 'loading') { userMessage.innerHTML = '<img src="loading-icon.png" width="50" class="icon" alt=""/> New image descriptions are loading... <br> <br>Please wait. We will update you when the descriptions have loaded.' } else if (extensionState === 'success') { userMessage.innerHTML = '<img src="success-icon.png" width="50" class="icon" alt=""/> New image descriptions have been loaded! <br> <br> If you would like to return to the original image descriptions set by the web page author, please refresh the page.' } else if (extensionState === 'errorGeneric') { userMessage.innerHTML = '<img src="error-icon.png" width="50" class="icon"alt=""/> There was an error generating new image descriptions. <br> <br> Please refresh the page and try again.' } else if (extensionState === 'errorAuthentication') { userMessage.innerHTML = '<img src="error-icon.png" width="50" class="icon"alt=""/> There was an error generating new image descriptions. <br> <br> Your OpenAI key is not valid. Please double check your key and try again.' } else if (extensionState === 'errorMaxQuota') { userMessage.innerHTML = '<img src="error-icon.png" width="50" class="icon"alt=""/> There was an error generating new image descriptions. <br> <br> You\'ve either used up your current OpenAI plan and need to add more credit, or you\'ve made too many requests too quickly. Please check your plan, add funds if needed, or slow down the requests.' } }

Ndani ya hati yetu ya maudhui, tutafafanua kigezo kipya kiitwacho 'extensionState', ambacho kinaweza kuwa 'awali' (kiendelezi kimepakiwa lakini hakuna kilichofanyika), 'kupakia', 'mafanikio', au 'kosa' (sisi itaongeza hali zingine za makosa pia kulingana na ujumbe wa makosa ya OpenAI). Pia tutasasisha utofauti wa hali ya kiendelezi na kutuma ujumbe kwa popup.js kila wakati hali inapobadilika.

 ​​let extensionState = 'initial';

Kidhibiti chetu cha makosa kinakuwa:

 function handleError(err) { if (JSON.stringify(err).includes('401')) { extensionState = 'errorAuthentication' chrome.runtime.sendMessage({action: extensionState}) } else if (JSON.stringify(err).includes('429')) { extensionState = 'errorMaxQuota' chrome.runtime.sendMessage({action: extensionState}) } else { extensionState = 'errorGeneric' chrome.runtime.sendMessage({action: extensionState}) } console.log(err); }

Na ndani ya utendakazi wetu wa ScanPhotos, tunaweka hali ya 'kupakia' mwanzoni mwa chaguo za kukokotoa, na 'kufanikiwa' ikiwa itaendeshwa kikamilifu bila makosa.

 async function scanPhotos() { extensionState = 'loading' chrome.runtime.sendMessage({action: extensionState}) const images = document.querySelectorAll("img"); for (let image of images) { const imageHasAltTag = image.hasAttribute('alt'); const imageAltTagIsEmptyString = image.hasAttribute('alt') && image.alt === ""; const isAriaHidden = image.ariaHidden ?? false; if (!imageHasAltTag || !imageAltTagIsEmptyString || !isAriaHidden) { const imageDescription = await generateDescription(image.src) if (!imageDescription) { return; } image.alt = imageDescription } } extensionState = 'success' chrome.runtime.sendMessage({action: extensionState}) }

6. Kurekebisha tabia ya kutatanisha ibukizi - hali ya kiendelezi inayoendelea wakati madirisha ibukizi yanapofungwa na kufunguliwa tena

   
   

Unaweza kugundua katika hatua hii kwamba ikiwa utatoa lebo za alt, kupata ujumbe wa mafanikio, na kufunga na kufungua tena dirisha ibukizi, itaonyesha ujumbe wa awali unaomhimiza mtumiaji kutoa lebo mpya za alt. Hata ingawa vitambulisho vya alt vilivyotengenezwa viko kwenye msimbo sasa!

Katika Chrome, kila wakati unapofungua dirisha ibukizi la kiendelezi, ni kidukizo kipya kabisa. Haitakumbuka chochote kilichofanywa hapo awali na kiendelezi, au kile kinachoendeshwa katika hati ya maudhui. Hata hivyo, tunaweza kuhakikisha ibukizi yoyote mpya iliyofunguliwa inatoa hali sahihi ya kiendelezi kwa kukipigia simu na kuangalia hali ya kiendelezi kinapofunguliwa. Ili kufanya hivyo, tutakuwa na kipitishio cha ujumbe mwingine ibukizi, wakati huu tukiomba hali ya kiendelezi, na tutaongeza msikilizaji wa ujumbe katika content.js wetu ambaye anasikiliza ujumbe huo na kutuma tena hali ya sasa.

popup.js

 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: "getExtensionState"}, function(response) { // if the content script hasn't been injected, then the code in that script hasn't been run, and we'll get an error or no response if (chrome.runtime.lastError || !response) { return; } else if (response) { // if the code in content script HAS been injected, we'll get a response which tells us what state the code is at (loading, success, error, etc) renderUI(response.extensionState) } }); });

maudhui.js

 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { if (request.action === "getExtensionState") sendResponse({extensionState}); });

Ikiwa hati ya maudhui haijawahi kuendeshwa (kama mtumiaji hajawahi kubofya kitufe ili kutoa vitambulisho vya alt), hakutakuwa na mabadiliko ya hali ya kiendelezi au msikilizaji wa tukio. Katika mfano huu, chrome itarudisha hitilafu ya wakati wa kukimbia katika jibu. Kwa hivyo tunajumuisha hundi ya hitilafu, na tukipokea moja, acha UI chaguo-msingi kama ilivyo.

7. Ufikivu wa kiendelezi - aria-live, utofautishaji wa rangi na kitufe cha kufunga

   
   

Kiendelezi hiki kimeundwa kwa ajili ya watu wanaotumia visoma skrini, kwa hivyo sasa tunapaswa kuhakikisha kuwa kweli kinaweza kutumika na kisoma skrini! Sasa ni wakati mzuri wa kuwasha kisoma skrini chako na uone ikiwa yote yanafanya kazi vizuri.

Kuna mambo machache tunayotaka kuyasafisha kwa ajili ya ufikivu. Kwanza kabisa, tunataka kuhakikisha kuwa maandishi yote ni kiwango cha juu cha utofautishaji cha kutosha. Kwa kitufe, nimeamua kuweka usuli kuwa #0250C5 na fonti iwe nyeupe kwa herufi nzito. Hii ina uwiano wa utofautishaji wa 7.1 na inatii WCAG katika viwango vya AA na AAA. Unaweza kuangalia uwiano wa utofautishaji wa rangi zozote ambazo ungependa kutumia hapa kwenye Kikagua Utofautishaji cha WebAim.

Pili, ninapotumia kisoma skrini yangu, ninagundua kuwa kisoma skrini hakisomi masasisho kiotomatiki wakati ujumbe wa mtumiaji unabadilika kuwa ujumbe wa upakiaji, mafanikio au makosa. Ili kurekebisha hili, tutatumia sifa ya html iitwayo aria-live. Aria-live huruhusu wasanidi kuwafahamisha visoma skrini ili kusasisha watumiaji wa mabadiliko. Unaweza kuweka aria-live iwe ya uthubutu au ya adabu - ikiwa imewekwa kuwa ya uthubutu, masasisho yatasomwa mara moja, bila kujali kama kuna vipengee vingine vinavyosubiri kusomwa katika foleni ya kisomaji skrini. Ikiwekwa kuwa ya heshima, sasisho litasomwa mwishoni mwa kila kitu ambacho kisoma skrini kiko katika mchakato wa kusoma. Kwa upande wetu, tunataka kusasisha mtumiaji haraka iwezekanavyo. Kwa hivyo katika kontena ibukizi, kipengele kikuu cha kipengele chetu cha ujumbe wa mtumiaji, tutaongeza sifa hiyo.

 <div class="popup-container" aria-live="assertive">

Mwisho wa yote, kwa kutumia kisoma skrini, ninagundua kuwa hakuna njia rahisi ya kufunga dirisha ibukizi. Unapotumia kipanya, bonyeza tu mahali popote nje ya kidukizo na hufunga, lakini siwezi kujua jinsi ya kuifunga kwa kutumia kibodi. Kwa hivyo tutaongeza kitufe cha 'funga' chini ya dirisha ibukizi, ili watumiaji waweze kuifunga kwa urahisi na kurudi kwenye ukurasa wa wavuti.

Katika popup.html, tunaongeza:

 <div> <button id="close-button">Close</button> </div>

Katika popup.js, tunaongeza kazi ya karibu kwa kubofya:

 const closeButton = document.body.querySelector('#close-button'); closeButton.addEventListener('click', async () => { window.close() });

Na ndivyo hivyo! Ikiwa una maswali au mapendekezo, tafadhali wasiliana nasi.

Hapa kuna kiunga cha repo ya mwisho.