Failide üleslaadimine: ligipääsetava lohistamisfunktsiooni rakendamine globaalsele publikule

Tänapäeva veebirakendustes on failide üleslaadimise lohistamisfunktsioon muutunud üha tavalisemaks. See pakub kasutajatele visuaalselt intuitiivset ja mugavat viisi failide üleslaadimiseks. Siiski on oluline meeles pidada, et mitte kõik kasutajad ei suhtle veebisaitidega samal viisil. Paljud toetuvad abitehnoloogiatele, nagu ekraanilugejad või klaviatuurinavigatsioon. Seetõttu on lohistamisfunktsiooniga failide üleslaadimise rakenduste ligipääsetavuse tagamine esmatähtis, et luua tõeliselt kaasavaid veebikogemusi globaalsele publikule.

Miks on ligipääsetavus failide üleslaadimisel oluline

Ligipääsetavus ei tähenda ainult nõuetele vastavust; see tähendab võrdse juurdepääsu ja võimaluste pakkumist kõigile. Kui failide üleslaadimise funktsioon ei ole ligipääsetav, on puuetega kasutajad tegelikult välistatud. See võib põhjustada frustratsiooni, lehelt lahkumist ja lõpuks negatiivset kasutajakogemust. Äri vaatenurgast piirab ligipääsetavuse eiramine teie potentsiaalset kliendibaasi ja võib kahjustada teie brändi mainet. Globaalse publiku arvestamine avardab seda perspektiivi veelgi – see, mis töötab ühes piirkonnas laitmatult, võib teises tekitada märkimisväärseid takistusi, olgu selle põhjuseks tehnoloogiline infrastruktuur, lokaliseeritud abitehnoloogiad või keelelised/kultuurilised barjäärid.

Täpsemalt võib ligipääsmatu lohistamisfunktsiooniga failide üleslaadimine esitada järgmisi väljakutseid:

• Ekraanilugejate kasutajad: Ekraanilugejad teatavad lehel olevatest elementidest ja võimaldavad kasutajatel navigeerida klaviatuurikäsklustega. Kui lohistamisala ei ole korralikult märgistatud ja ei paku piisavat tagasisidet, ei saa ekraanilugejate kasutajad aru, kuidas faile üles laadida.
• Klaviatuurikasutajad: Kasutajad, kes toetuvad klaviatuurinavigatsioonile, vajavad viisi failide üleslaadimise funktsioonile juurdepääsemiseks ja selle aktiveerimiseks klaviatuuri abil. Kui lohistamisala ei ole fookustatav või sellel puuduvad seotud klaviatuurikäsklused, ei saa need kasutajad faile üles laadida.
• Liikumispuudega kasutajad: Lohistamine võib olla raske või võimatu liikumispuudega kasutajatele. Alternatiiv, näiteks standardne failivaliku dialoog, on hädavajalik.
• Kognitiivsete puuetega kasutajad: Keerulised või ebaselged juhised võivad olla kognitiivsete puuetega kasutajatele segadust tekitavad. Failide üleslaadimise protsess peaks olema võimalikult lihtne ja otsekohene.

Ligipääsetava lohistamisfunktsiooniga failide üleslaadimise põhiprintsiibid

Siin on mõned põhiprintsiibid, millest juhinduda ligipääsetava lohistamisfunktsiooniga failide üleslaadimise rakendamisel:

1. Pakkuge klaviatuuriga ligipääsetavat alternatiivi

Kõige olulisem põhimõte on pakkuda lohistamisfunktsioonile klaviatuuriga ligipääsetavat alternatiivi. See saavutatakse tavaliselt standardse failivaliku nupu lisamisega lohistamisala kõrvale.

Näide:

            <div class="upload-container">
  <div id="drop-area">
    <p>Lohistage failid siia või</p>
    <button id="select-file">Vali failid</button>
  </div>
  <input type="file" id="file-input" multiple>
</div>
            

              
                Copy
              
            
          

Selles näites pakub <button> element klaviatuuriga ligipääsetavat viisi failide valimiseks standardse failivaliku dialoogi abil. Veenduge, et nupp oleks selgelt sildistatud (nt "Vali failid") ja omaks vajadusel sobivaid ARIA atribuute (vt allpool).

Seotud JavaScript peab seejärel käsitlema nii nupuvajutust kui ka lohistamissündmusi, töödeldes valitud faile samal viisil, olenemata sisestusmeetodist.

2. Kasutage semantika täiustamiseks ARIA atribuute

ARIA (Accessible Rich Internet Applications) atribuudid pakuvad abitehnoloogiatele täiendavat semantilist teavet. Kasutage ARIA atribuute, et muuta lohistamisala ekraanilugejate kasutajatele arusaadavamaks ja navigeeritavamaks.

Näide:

            <div id="drop-area" aria-dropeffect="copy" tabindex="0">
  <p>Lohistage failid siia</p>
</div>
            

              
                Copy
              
            
          

Siin on ülevaade kasutatud ARIA atribuutidest:

• aria-dropeffect="copy": Näitab, et lohistamisoperatsiooni tulemuseks on lohistatud andmete koopia. Teised võimalikud väärtused on "move", "link", "execute" või "popup". Valige väärtus, mis kirjeldab kõige paremini toimingut, mis toimub faili lohistamisel.
• tabindex="0": Muudab elemendi klaviatuuri abil fookustatavaks. See on klaviatuurikasutajate jaoks ülioluline. A tabindex väärtus 0 tähendab, et element osaleb loomulikus tabulatsioonijärjekorras.

Võite kaaluda ka aria-label või aria-labelledby kasutamist, et pakkuda lohistamisalale kirjeldavat silti. Näiteks:

            <div id="drop-area" aria-dropeffect="copy" tabindex="0" aria-labelledby="drop-area-label">
  <h3 id="drop-area-label">Laadi failid üles</h3>
  <p>Lohistage failid siia</p>
</div>
            

              
                Copy
              
            
          

3. Pakkuge selget ja õigeaegset tagasisidet

Tagasiside on oluline kõigile kasutajatele, kuid eriti oluline on see abitehnoloogiate kasutajatele. Pakkuge selget ja õigeaegset tagasisidet, et näidata lohistamisoperatsiooni olekut.

Tagasiside tüübid:

• Visuaalne tagasiside: Muutke lohistamisala välimust, kui faili selle kohale lohistatakse (nt muutke taustavärvi, lisage äärisejoon).
• Ekraanilugeja tagasiside: Kasutage ARIA live-piirkondi, et teatada ekraanilugejate kasutajatele muudatustest lohistamisala olekus.
• Veateated: Pakkuge selgeid ja informatiivseid veateateid, kui failide üleslaadimisega on probleeme (nt vale failitüüp, faili suuruse piirangu ületamine).
• Edenemisribad: Kuvage faili üleslaadimise protsessi ajal edenemisriba.

Näide (kasutades ARIA live-piirkondi):

            <div id="drop-area" aria-dropeffect="copy" tabindex="0">
  <p>Lohistage failid siia</p>
</div>
<div id="upload-status" aria-live="polite"></div>
            

              
                Copy
              
            
          

Selles näites on upload-status element ARIA live-piirkond. Kõikidest selle elemendi sisu muudatustest teatatakse ekraanilugejate kasutajatele. aria-live="polite" atribuut näitab, et uuendustest tuleks teatada siis, kui kasutaja on ooterežiimis.

JavaScripti kood uuendaks seejärel upload-status elemendi sisu vastavalt lohistamisoperatsiooni olekule:

            const dropArea = document.getElementById('drop-area');
const uploadStatus = document.getElementById('upload-status');

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.classList.add('drag-over');
  uploadStatus.textContent = 'Lohistage üleslaadimiseks';
});

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('drag-over');
  uploadStatus.textContent = '';
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.classList.remove('drag-over');
  const files = e.dataTransfer.files;
  uploadFiles(files);
});

function uploadFiles(files) {
  uploadStatus.textContent = `Laadin üles ${files.length} faili...`;
  // ... (Üleslaadimise loogika siin) ...
  uploadStatus.textContent = `Üleslaadimine lõpetatud!`;
}
            

              
                Copy
              
            
          

4. Tagage piisav värvikontrastsus

Piisav värvikontrastsus teksti ja tausta vahel on oluline vaegnägijatele. Järgige WCAG (Web Content Accessibility Guidelines) juhiseid värvikontrastsuse suhtarvude osas.

WCAG 2.1 nõuab kontrastsuse suhet:

• 4.5:1 tavalise teksti puhul
• 3:1 suure teksti (18pt või 14pt paksus kirjas) ja kasutajaliidese komponentide puhul

Kasutage värvikontrastsuse kontrollimise tööriista, et veenduda, kas teie värvikombinatsioonid vastavad neile nõuetele. Saadaval on mitmeid veebipõhiseid tööriistu, näiteks WebAIM Color Contrast Checker.

5. Testige abitehnoloogiatega

Kõige tõhusam viis ligipääsetavuse tagamiseks on testida oma rakendust abitehnoloogiatega. Kasutage ekraanilugejat (nt NVDA, VoiceOver) ja klaviatuurinavigatsiooni, et testida lohistamisfunktsiooniga failide üleslaadimise funktsiooni puudega kasutaja vaatenurgast.

Testimise näpunäited:

• Ekraanilugeja: Veenduge, et lohistamisala on korralikult sildistatud ja et ekraanilugeja teatab operatsiooni olekust (nt "Lohistage failid siia", "Fail üles laaditud", "Viga: vale failitüüp").
• Klaviatuurinavigatsioon: Veenduge, et lohistamisala ja alternatiivne failivaliku nupp on klaviatuuri abil fookustatavad ning et kasutaja saab failivaliku dialoogi aktiveerida.

6. Arvestage rahvusvahelistamise ja lokaliseerimisega

Globaalsele publikule failide üleslaadimise komponente kujundades arvestage rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n). See tähendab, et teie komponenti peab saama kohandada erinevatele keeltele ja kultuurilistele tavadele.

Põhikaalutlused:

• Teksti suund: Mõned keeled on paremalt vasakule (RTL) loetavad. Veenduge, et teie lohistamisala ja sellega seotud elemendid renderdatakse RTL-paigutustes korrektselt. CSS-i loogilised omadused (nt margin-inline-start asemel margin-left) võivad selles aidata.
• Kuupäeva ja kellaaja vormingud: Kui teie failide üleslaadimise protsess hõlmab kuupäeva ja kellaaja teabe kuvamist, kasutage sobivaid lokaliseeritud vorminguid.
• Numbriformaadid: Kasutage failisuuruste ja muude numbriliste andmete jaoks lokaliseeritud numbriformaate.
• Veateated: Tõlkige veateated ja muu kasutajale suunatud tekst kasutaja keelde.
• Märgikodeering: Veenduge, et teie rakendus toetab Unicode'i (UTF-8), et käsitleda erinevate keelte märke.
• Kultuuriline tundlikkus: Vältige ikoonide või piltide kasutamist, mis võivad teatud kultuurides olla solvavad või sobimatud.

Näide (veateadete lokaliseerimine):

Selle asemel, et veateateid oma JavaScripti koodi sisse kirjutada, salvestage need eraldi ressursifaili ja laadige sobiv fail vastavalt kasutaja keelele.

            // en.json
{
  "invalidFileType": "Invalid file type. Please upload a JPG, PNG, or GIF file.",
  "fileSizeExceeded": "File size exceeded. Maximum file size is 10MB."
}

// et.json
{
  "invalidFileType": "Vale failitüüp. Palun laadige üles JPG, PNG või GIF fail.",
  "fileSizeExceeded": "Faili suurus ületatud. Maksimaalne faili suurus on 10MB."
}
            

              
                Copy
              
            
          

Teie JavaScripti kood laadiks seejärel sobiva ressursifaili ja kuvaks lokaliseeritud veateate:

            const translations = {
  en: {
    invalidFileType: "Invalid file type. Please upload a JPG, PNG, or GIF file.",
    fileSizeExceeded: "File size exceeded. Maximum file size is 10MB."
  },
  et: {
    invalidFileType: "Vale failitüüp. Palun laadige üles JPG, PNG või GIF fail.",
    fileSizeExceeded: "Faili suurus ületatud. Maksimaalne faili suurus on 10MB."
  }
};

const userLanguage = navigator.language.substring(0, 2); // Hangi keelekoodi kaks esimest tähte (nt 'en' inglise keele jaoks, 'et' eesti keele jaoks)
const currentLanguage = translations[userLanguage] ? userLanguage : 'en'; // Kui keelt ei toetata, kasuta vaikimisi inglise keelt

function displayErrorMessage(errorType) {
  const errorMessage = translations[currentLanguage][errorType];
  alert(errorMessage);
}
            

              
                Copy
              
            
          

7. Pakkuge selgeid juhiseid ja suuniseid

Selged juhised on üliolulised kõigile kasutajatele, eriti kognitiivsete puuetega inimestele. Pakkuge lühikesi ja kergesti mõistetavaid juhiseid failide üleslaadimiseks nii lohistamise kui ka alternatiivse failivaliku meetodi abil.

Parimad tavad:

• Kasutage selget ja lihtsat keelt. Vältige tehnilist žargooni.
• Pakkuge visuaalseid vihjeid. Kasutage kasutajate suunamiseks ikoone ja illustratsioone.
• Pakkuge tööriistavihjeid või abiteksti. Pakkuge lisateavet hiirega hõljumisel või fookuses olles.
• Kaaluge videoõpetusi. Lühike video võib olla väga tõhus viis failide üleslaadimise protsessi selgitamiseks.

8. Testige erinevates brauserites ja seadmetes

Veenduge, et teie lohistamisfunktsiooniga failide üleslaadimise rakendus töötab järjepidevalt erinevates brauserites (nt Chrome, Firefox, Safari, Edge) ja seadmetes (nt lauaarvuti, mobiil, tahvelarvuti). Brauserite ebakõlad võivad mõnikord põhjustada ligipääsetavusprobleeme.

Näide: ligipääsetava lohistamisfunktsiooniga failide üleslaadimise rakendamine

Siin on täielikum näide ligipääsetava lohistamisfunktsiooniga failide üleslaadimise rakendamisest, kasutades HTML-i, CSS-i ja JavaScripti:

            <div class="upload-container">
  <div id="drop-area" aria-dropeffect="copy" tabindex="0" aria-labelledby="drop-area-label">
    <h3 id="drop-area-label">Laadi failid üles</h3>
    <p>Lohistage failid siia või</p>
    <button id="select-file">Vali failid</button>
  </div>
  <input type="file" id="file-input" multiple style="display: none;">
  <div id="upload-status" aria-live="polite"></div>
  <ul id="file-list"></ul>
</div>

<style>
.upload-container {
  width: 400px;
  margin: 20px auto;
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}

#drop-area {
  cursor: pointer;
}

#drop-area.drag-over {
  background-color: #f0f0f0;
}

#file-list {
  list-style: none;
  padding: 0;
}

#file-list li {
  margin-bottom: 5px;
}

/* Lisage stiile vastavalt vajadusele */
</style>

<script>
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const selectFileButton = document.getElementById('select-file');
const uploadStatus = document.getElementById('upload-status');
const fileList = document.getElementById('file-list');

function handleFiles(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const listItem = document.createElement('li');
    listItem.textContent = file.name + ' (' + formatFileSize(file.size) + ')';
    fileList.appendChild(listItem);
  }

  uploadStatus.textContent = `Valitud ${files.length} faili. Üleslaadimiseks valmis.`;
}

function formatFileSize(bytes) {
  if (bytes < 1024) return bytes + ' Bytes';
  else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
  else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
  else return (bytes / 1073741824).toFixed(1) + ' GB';
}

// Drag and drop event listeners
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
  e.preventDefault()
  e.stopPropagation()
}

dropArea.addEventListener('dragover', function(e) {
  dropArea.classList.add('drag-over');
  uploadStatus.textContent = 'Lohistage üleslaadimiseks';
});

dropArea.addEventListener('dragleave', function(e) {
  dropArea.classList.remove('drag-over');
  uploadStatus.textContent = '';
});

dropArea.addEventListener('drop', function(e) {
  dropArea.classList.remove('drag-over');
  const files = e.dataTransfer.files;
  handleFiles(files);
});

// File input event listener
fileInput.addEventListener('change', function(e) {
  const files = fileInput.files;
  handleFiles(files);
});

// Select file button event listener
selectFileButton.addEventListener('click', function(e) {
  fileInput.click(); // Käivitage failisisend programmiliselt
});
</script>
            

              
                Copy
              
            
          

Kokkuvõte

Ligipääsetava lohistamisfunktsiooniga failide üleslaadimise rakendamine nõuab hoolikat planeerimist ja tähelepanu detailidele. Järgides selles juhendis toodud põhimõtteid, saate luua failide üleslaadimise kogemuse, mis on kaasav ja kasutatav kõigile kasutajatele, olenemata nende võimetest või kasutatavatest tehnoloogiatest. Ärge unustage oma rakendust põhjalikult testida abitehnoloogiatega ning arvestada rahvusvahelistamise ja lokaliseerimisega, et tagada teie failide üleslaadimise komponendi sujuv toimimine globaalsele publikule. Ligipääsetavus ei ole lihtsalt funktsioon; see on hea veebidisaini ja -arenduse fundamentaalne aspekt.

Lisamaterjalid

• Web Content Accessibility Guidelines (WCAG)
• Accessible Rich Internet Applications (ARIA)
• WebAIM