Перазапісвайце няправільныя альтэрнатыўныя тэгі выявы з дапамогай My Alt Tag Generation App, створанай з OpenAI API

Альтэрнатыўныя тэгі з'яўляюцца найбольш вядомым аспектам стварэння даступных вэб-старонак, але, на жаль, яны часта грэбуюць або дрэнна рэалізаваны. Тэгі Alt - гэта кароткія тэкставыя апісанні, якія дадаюцца да малюнкаў. Праграмы чытання з экрана чытаюць змесціва вэб-старонкі карыстальнікам, а апісанні малюнкаў - гэта тое, што яны чытаюць, каб паведаміць аб тым, што ёсць на малюнках на старонцы, карыстальнікам са слабым зрокам, бо яны іх не бачаць.

На жаль, на малюнках звычайна цалкам адсутнічаюць тэгі alt. Я таксама бачыў, як альтэрнатыўныя тэгі няправільна выкарыстоўваліся спосабамі, якія ўскладнялі працу карыстальніка з аслабленым зрокам, напрыклад, тэгі, якія проста напісалі «малюнак» або «малюнак», тэгі, якія ўяўляюць сабой мілыя подпісы, дададзеныя аўтарам без спасылак на тое, што на малюнку ( г.зн. выява кавы і ноўтбука на старонцы блога з надпісам «дарагі дзённік, я хацеў бы, каб мяне выбралі ў якасці запрошанага аўтара»). Я таксама бачыў альтэрнатыўныя тэгі, якія ўключаюць 3 радкі ключавых слоў SEO. Ці можаце вы ўявіць сабе спробу праслухаць тое, што ёсць на вэб-сайце, толькі каб пачуць «малюнак малюнка» або доўгі спіс ключавых слоў для SEO?

Гэта пашырэнне Chrome, прызначанае для пашырэння магчымасцей карыстальнікаў са слабым зрокам, дазваляючы ім перазапісваць няправільныя альтэрнатыўныя тэгі і выкарыстоўваць Open AI для ўстаўкі апісанняў, створаных AI. Гэта дазваляе карыстачу са слабым зрокам фактычна атрымаць доступ да ўсяго змесціва вэб-старонкі, да якога можа атрымаць доступ карыстальнік без парушэнняў зроку (ці, па меншай меры, не запавольвацца доўгім спісам ключавых слоў SEO).

Калі вы проста хочаце пашырэнне, вы можаце загрузіць гэтае сховішча і прытрымлівацца інструкцый у README.

Аднак, калі вы зацікаўлены ў пакрокавым інструкцыі па стварэнні пашырэння Chrome з дапамогай OpenAI, наступная інструкцыя - гэта інструкцыя.

Стварэнне пашырэння:

1. Запусціце базавае пашырэнне "Hello World" для Chrome

Спачатку давайце запусцім асноўны шаблон Chrome. Клануйце гэты рэпазітар і выконвайце інструкцыі ў README:

Пасля таго, як вы гэта атрымаеце і ўсталюеце, у вас павінен з'явіцца значок выявы на панэлі пашырэнняў (я рэкамендую замацаваць яго, каб паскорыць тэставанне), і калі вы націснеце на яго, вы ўбачыце ўсплывальнае акно з надпісам "Hello World".

Давайце адкрыем шаблонны код і пройдземся па існуючых файлах. Гэта таксама ахоплівае некаторыя асновы пашырэнняў Chrome:

Static/manifest.json - кожнае пашырэнне Chrome мае файл manifest.json. Ён уключае асноўную інфармацыю і налады аб пашырэнні. У нашым файле маніфеста ёсць імя, апісанне, фонавы файл, усталяваны як src/background.js, значок, усталяваны ў image-icon.png (гэта значок, які будзе адлюстроўвацца, прадстаўляючы пашырэнне ў меню пашырэнняў), і ён усталёўвае popup.html у якасці крыніцы файла для нашага ўсплывальнага акна.

src/background.js - файл background.js, усталяваны ў нашым маніфесце. Код у гэтым файле будзе працаваць у фонавым рэжыме і адсочваць падзеі, якія запускаюць функцыянальнасць пашырэння.

src/content.js - Любы скрыпт, які запускаецца ў кантэксце вэб-старонкі або змяняе вэб-старонку, змяшчаецца ў скрыпт кантэнту.

src/popup.js, static/popup.css і static/popup.html - гэтыя файлы кантралююць усплывальнае акно, якое вы бачыце, калі націскаеце значок пашырэння

Давайце наладзім некаторыя асновы - адкрыйце static/manifest.json і змяніце назву і апісанне на «Генератар апісання відарыса для чытання з экрана» (ці што заўгодна).

2. Уключыць узаемадзеянне з вэб-старонкамі з дапамогай сцэнарыя кантэнту

   
   

Наша пашырэнне будзе перазапісваць тэгі alt на вэб-сайце, на якім знаходзіцца карыстальнік, што азначае, што нам патрэбны доступ да старонкі html. Спосаб зрабіць гэта ў Chrome Extensions - з дапамогай сцэнарыяў змесціва. Наш скрыпт кантэнту будзе знаходзіцца ў файле src/content.js.

Самы просты спосаб укараніць скрыпт кантэнту - дадаць у маніфест поле «сцэнарыі» са спасылкай на файл js. Калі вы наладжваеце скрыпт кантэнту такім чынам, звязаны скрыпт будзе запускацца пры кожнай загрузцы пашырэння. Аднак у нашым выпадку мы не хочам, каб наша пашырэнне запускалася аўтаматычна, калі карыстальнік адкрывае пашырэнне. Некаторыя вэб-сайты маюць выдатна ўсталяваныя тэгі alt на малюнках, таму мы хочам запускаць код толькі тады, калі карыстальнік вырашыць, што гэта неабходна.

Мы збіраемся дадаць кнопку ў наша ўсплывальнае акно і кансольны журнал у наш скрыпт змесціва, каб, калі карыстальнік націскае кнопку, загружаўся скрыпт змесціва, і мы можам пацвердзіць гэта, убачыўшы нашу заяву, надрукаваную ў кансолі Chrome.

Усплывальнае акно.html

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

src/content.js

 console.log('hello console')

Спосаб злучэння гэтага націску кнопкі на ўсплываючым акне са сцэнарыем змесціва ўключае як popup.js, так і background.js.

У popup.js мы возьмем кнопку з DOM і дадамо слухач падзей. Калі карыстальнік націскае гэтую кнопку, мы адпраўляем паведамленне, якое азначае, што сцэнар змесціва павінен быць уведзены. Мы назавем паведамленне «injectContentScript»

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

У background.js у нас ёсць код, які адсочвае падзеі і рэагуе на іх. Тут мы наладжваем праслухоўвальнік падзей, і калі атрыманае паведамленне «injectContentScript», ён выканае скрыпт змесціва на актыўнай укладцы (бягучай вэб-старонцы карыстальніка).

 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'] }); }); } });

Апошнім крокам для наладжвання гэтага з'яўляецца даданне дазволаў «activeTab» і «scripting» у наш маніфест. Для выканання любога сцэнарыя змесціва патрабуецца дазвол на стварэнне сцэнарыяў. Мы таксама павінны дадаць дазволы для старонак, у якія мы ўводзім скрыпт. У гэтым выпадку мы будзем уводзіць скрыпт на бягучы вэб-сайт карыстальніка, ён жа яго актыўную ўкладку, і гэта тое, што дазваляе дазвол activeTab.

У manifest.json:

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

У гэты момант вам можа спатрэбіцца выдаліць пашырэнне з Chrome і перазагрузіць яго, каб яно працавала правільна. Пасля таго, як ён будзе запушчаны, мы павінны ўбачыць журнал кансолі ў нашай кансолі Chrome.

Вось спасылка на github для працоўнага кода для РЭПО на гэтым этапе .

3. Збор малюнкаў старонак і ўстаўка тэставых тэгаў alt

   
   

Наш наступны крок - выкарыстоўваць наш файл сцэнарыя змесціва, каб захапіць усе выявы на старонцы, каб у нас была гатовая гэтая інфармацыя для адпраўкі нашых выклікаў API для атрымання апісанняў малюнкаў. Мы таксама хочам быць упэўненымі, што мы робім выклікі толькі для малюнкаў, апісанні якіх карысныя. Некаторыя выявы з'яўляюцца чыста дэкаратыўнымі і не маюць неабходнасці запавольваць праграмы чытання з экрана сваімі апісаннямі. Напрыклад, калі ў вас ёсць пошукавы радок, які мае як пазнаку «пошук», так і значок павелічальнага шкла. Калі тэг alt выявы мае пусты радок або для aria-hidden усталявана значэнне true, гэта азначае, што выяву не трэба ўключаць у праграму чытання з экрана, і мы можам прапусціць стварэнне для яе апісання.

Такім чынам, спачатку ў content.js мы збярэм усе выявы на старонцы. Я дадаю console.log, каб я мог хутка пацвердзіць, што ён працуе правільна:

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

Потым мы будзем перабіраць выявы і правяраць выявы, для якіх нам трэба стварыць тэг альтэрнатывы. Гэта ўключае ў сябе ўсе выявы, якія не маюць тэга alt, і выявы, якія маюць тэг alt, які не з'яўляецца пустым радком, і выявы, якія не былі яўна схаваны ад праграм чытання з экрана з дапамогай атрыбуту aria-hidden.

 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! } }

Затым мы можам дадаць тэставы радок для ўстаноўкі тэгаў alt, каб мы маглі пацвердзіць, што ў нас ёсць функцыянальны спосаб іх усталявання, перш чым мы пяройдзем да нашых выклікаў OpenAI. Цяпер наш content.js выглядае так:

 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()

У гэты момант, калі мы адкрыем Chrome dev tools Elements, пстрыкнем выяву, мы павінны ўбачыць «Праверыць альтэрнатыўны тэкст», усталяваны ў якасці альтэрнатыўнага тэга.

Рабочы рэпазітар для таго, дзе знаходзіцца код на дадзеным этапе, знаходзіцца тут.

4. Усталюйце OpenAI і зрабіце апісанне малюнкаў

   
   

Каб выкарыстоўваць OpenAI, вам трэба будзе стварыць ключ OpenAI, а таксама дадаць крэдыт на свой рахунак. Каб стварыць ключ OpenAI:

1. Перайдзіце на старонку https://platform.openai.com/docs/overview і ў раздзеле «Атрымаць ключы API» націсніце «Зарэгістравацца».
2. Выконвайце інструкцыі, каб стварыць уліковы запіс OpenAI
3. На экране «Зрабі свой першы званок» увядзіце жаданае імя для вашага ключа API, напрыклад «Ключ генератара апісання выявы Chrome»
4. Націсніце «Стварыць ключ API»

Захавайце гэты ключ. Акрамя таго, захавайце яго ў прыватным парадку - пераканайцеся, што не запіхваеце яго ў публічныя сховішчы git.

Цяпер, вярнуўшыся ў наша сховішча, спачатку мы хочам усталяваць OpenAi. У тэрмінале ўнутры каталога праекта запусціце:

 npm install openai

Цяпер у content.js мы імпартуем OpenAI, дадаўшы гэты код у верхняй частцы файла, а ключ OpenAI будзе ўстаўлены ў радок 1:

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

“DangerouslyAllowBrowser” дазваляе зрабіць выклік з вашага ключа з браўзера. Як правіла, гэта небяспечная практыка. Паколькі мы запускаем гэты праект толькі лакальна, мы пакінем яго так, а не наладжваем фонавы пошук. Калі вы выкарыстоўваеце OpenAI у іншых праектах, пераканайцеся, што вы прытрымліваецеся лепшых практык адносна захавання ключа ў сакрэце.

Цяпер мы дадаем наш выклік, каб OpenAI ствараў апісанні малюнкаў. Мы выклікаем канчатковую кропку стварэння чатаў ( дакументы OpenAI для канчатковай кропкі чатаў ).

Мы павінны напісаць уласную падказку, а таксама перадаць URL SRC выявы ( дадатковая інфармацыя аб распрацоўцы падказкі AI ). Вы можаце адаптаваць падказку, як хочаце. Я вырашыў абмежаваць апісанні 20 працамі, таму што OpenAI вяртаў доўгія апісанні. Акрамя таго, я заўважыў, што ён цалкам апісвае такія лагатыпы, як Yelp або Facebook (напрыклад, «вялікае сіняе поле з белай малой літарай f унутры»), што не было карысным. У выпадку, калі гэта інфаграфіка, я прашу ігнараваць абмежаванне колькасці слоў і абагульваць поўны тэкст выявы.

Вось поўны выклік, які вяртае змесціва першага адказу AI, а таксама перадае памылку ў функцыю «handleError». Я ўключыў console.log кожнага адказу, каб мы маглі хутчэй атрымаць зваротную сувязь аб тым, паспяховы выклік ці не:

 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); }

Мы дадаем выклік гэтай функцыі ў аператар if, які мы напісалі раней (мы таксама павінны дадаць ключавое слова async у пачатку функцыі scanImages, каб уключыць гэты асінхронны выклік):

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

Вось спасылка на поўны content.js і рэпазітар на гэтым этапе.

5. Стварэнне карыстацкага інтэрфейсу

   
   

Далей мы хочам стварыць наш карыстальніцкі інтэрфейс, каб карыстальнік ведаў, што адбываецца пасля таго, як ён націсне кнопку для стварэння тэгаў. Загрузка тэгаў займае некалькі секунд, таму нам патрэбна паведамленне аб загрузцы, каб карыстальнік ведаў, што гэта працуе. Акрамя таго, мы хочам паведаміць ім, што гэта паспяхова, або калі ёсць памылка. Каб зрабіць усё прасцей, мы будзем мець div агульнага паведамлення карыстальніка ў HTML, а затым будзем выкарыстоўваць popup.js для дынамічнай устаўкі адпаведнага паведамлення карыстальніку ў залежнасці ад таго, што адбываецца ў пашырэнні.

Спосаб наладжвання пашырэнняў Chrome заключаецца ў тым, што наш скрыпт кантэнту (content.js) аддзелены ад popup.js, і яны не могуць абагульваць зменныя так, як гэта робяць звычайныя файлы JavaScript. Спосаб, якім сцэнар змесціва можа паведаміць усплываючаму акну, што тэгі загружаюцца або паспяхова загружаны, - гэта перадача паведамленняў. Мы ўжо выкарыстоўвалі перадачу паведамленняў, калі паведамлялі фонавым працаўнікам, што трэба ўводзіць сцэнар змесціва, калі карыстальнік націскаў на зыходную кнопку.

Спачатку ў наш HTML мы дадамо div з ідэнтыфікатарам 'user-message' пад нашай кнопкай. Я таксама дадаў крыху больш апісання для першапачатковага паведамлення.

 <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>

Затым у наш popup.js мы дадамо слухач, які праслухоўвае любыя адпраўленыя паведамленні, якія могуць утрымліваць абнаўленне стану пашырэння. Мы таксама напішам некаторы HTML для ўвядзення на аснове любога выніку стану, які мы атрымаем ад скрыпту кантэнту.

 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.' } }

У нашым скрыпце змесціва мы вызначым новую зменную пад назвай "extensionState", якая можа быць "пачатковай" (пашырэнне загружана, але яшчэ нічога не адбылося), "загрузкай", "паспяхам" ці "памылкай" (мы таксама дадасць некаторыя іншыя стану памылак на аснове паведамленняў пра памылкі OpenAI). Мы таксама будзем абнаўляць зменную стану пашырэння і адпраўляць паведамленне ў popup.js кожны раз, калі змяняюцца змены стану.

 ​​let extensionState = 'initial';

Наш апрацоўшчык памылак для становіцца:

 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); }

І ў нашай функцыі scanPhotos мы ўсталёўваем стан "загрузка" ў пачатку функцыі і "паспяхова", калі яна цалкам працуе без памылак.

 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. Выпраўленне незразумелых паводзін усплываючых вокнаў - захаванне стану пашырэння, калі ўсплывальныя вокны зачыняюцца і зноў адкрываюцца

   
   

У гэты момант вы можаце заўважыць, што калі вы згенеруеце альтэрнатыўныя тэгі, атрымаеце паведамленне аб паспяховым выкананні, закрыеце і зноў адкрыеце ўсплывальнае акно, яно адлюструе пачатковае паведамленне, якое прапануе карыстальніку стварыць новыя альтэрнатыўныя тэгі. Нягледзячы на ​​​​тое, што створаныя альтэрнатыўныя тэгі ўжо ёсць у кодзе!

У Chrome кожны раз, калі вы адкрываеце ўсплывальнае акно пашырэння, гэта зусім новае ўсплывальнае акно. Ён не запомніць нічога, што было зроблена пашырэннем, або таго, што выконваецца ў скрыпце кантэнту. Тым не менш, мы можам пераканацца, што любое нядаўна адкрытае ўсплывальнае акно адлюстроўвае дакладны стан пашырэння, калі яно выклікае і правярае стан пашырэння пры адкрыцці. Для гэтага ў нас будзе ўсплывальнае акно, якое будзе перадаваць яшчэ адно паведамленне, на гэты раз з запытам стану пашырэння, і мы дадамо слухач паведамленняў у наш content.js, які праслухоўвае гэтае паведамленне і адпраўляе назад бягучы стан.

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) } }); });

content.js

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

Калі скрыпт змесціва ніколі не запускаўся (ён жа, калі карыстальнік ніколі не націскаў кнопку для стварэння тэгаў alt), не будзе зменнай стану пашырэння або праслухоўвальніка падзей. У гэтым выпадку chrome у адказ верне памылку выканання. Такім чынам, мы ўключаем праверку на памылку, і калі мы яе атрымліваем, пакідаем карыстальніцкі інтэрфейс па змаўчанні як ёсць.

7. Спецыяльныя магчымасці пашырэння - aria-live, каляровы кантраст і кнопка закрыцця

   
   

Гэта пашырэнне прызначана для людзей, якія карыстаюцца праграмамі чытання з экрана, таму цяпер мы павінны пераканацца, што яго сапраўды можна выкарыстоўваць з праграмай чытання з экрана! Зараз добры час, каб уключыць праграму чытання з экрана і праверыць, ці добра яна працуе.

Ёсць некалькі рэчаў, якія мы хочам ачысціць для даступнасці. Перш за ўсё, мы хочам пераканацца, што ўвесь тэкст мае дастаткова высокі ўзровень кантраснасці. Для кнопкі я вырашыў усталяваць фон #0250C5 і шрыфт белы тлусты. Ён мае каэфіцыент кантраснасці 7,1 і сумяшчальны з WCAG на ўзроўні AA і AAA. Вы можаце праверыць каэфіцыент кантраснасці для любых колераў, якія вы хочаце выкарыстоўваць, тут, у WebAim Contrast Checker.

Па-другое, пры выкарыстанні праграмы чытання з экрана я заўважаю, што праграма чытання з экрана не чытае аўтаматычна абнаўленні, калі паведамленне карыстальніка змяняецца на паведамленне аб загрузцы, паспяховым выкананні або памылцы. Каб выправіць гэта, мы будзем выкарыстоўваць атрыбут html пад назвай aria-live. Aria-live дазваляе распрацоўшчыкам паведамляць праграмам чытання з экрана, каб інфармаваць карыстальнікаў аб зменах. Вы можаце наладзіць aria-live як напорыстую, так і на ветлівую - калі яна настроена на настойлівую, абнаўленні будуць прачытаны неадкладна, незалежна ад таго, ці ёсць іншыя элементы, якія чакаюць чытання ў чарзе праграмы чытання з экрана. Калі ўстаноўлена ветлівасць, абнаўленне будзе прачытана ў канцы ўсяго, што чытае праграма чытання з экрана. У нашым выпадку мы хочам абнавіць карыстальніка як мага хутчэй. Такім чынам, мы дадамо гэты атрыбут ва ўсплывальны кантэйнер, бацькоўскі элемент нашага карыстальніка-паведамлення.

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

Нарэшце, з дапамогай праграмы чытання з экрана я заўважыў, што няма простага спосабу закрыць усплывальнае акно. Пры выкарыстанні мышы вы проста націскаеце ў любым месцы па-за межамі ўсплывальнага акна, і яно зачыняецца, але я не магу зразумець, як закрыць яго з дапамогай клавіятуры. Такім чынам, мы дадамо кнопку "закрыць" у ніжняй частцы ўсплывальнага акна, каб карыстальнікі маглі лёгка закрыць яго і вярнуцца на вэб-старонку.

У popup.html мы дадаем:

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

У popup.js мы дадаем функцыю close да onclick:

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

І ўсё! Калі ў вас ёсць пытанні ці прапановы, звяртайцеся.

Вось спасылка на канчатковае РЭПО.