Tiedostojen lataus: saavutettavan vedä ja pudota -toiminnon toteuttaminen globaalille yleisölle

Nykypäivän verkkosovelluksissa tiedostojen lataaminen vedä ja pudota -toiminnolla on yleistynyt. Se tarjoaa visuaalisesti intuitiivisen ja kätevän tavan ladata tiedostoja. On kuitenkin tärkeää muistaa, että kaikki käyttäjät eivät ole vuorovaikutuksessa verkkosivustojen kanssa samalla tavalla. Monet käyttävät apuvälineteknologioita, kuten ruudunlukijoita tai näppäimistönavigointia. Siksi on ensiarvoisen tärkeää varmistaa, että vedä ja pudota -tiedostolataukset ovat saavutettavia, jotta voidaan luoda aidosti inklusiivisia verkkokokemuksia maailmanlaajuiselle yleisölle.

Miksi saavutettavuus on tärkeää tiedostojen latauksessa

Saavutettavuus ei ole vain säännösten noudattamista; se on yhtäläisten mahdollisuuksien tarjoamista kaikille. Kun tiedostojen latausominaisuus ei ole saavutettava, vammaiset käyttäjät jäävät tehokkaasti ulkopuolelle. Tämä voi johtaa turhautumiseen, palvelun hylkäämiseen ja lopulta negatiiviseen käyttäjäkokemukseen. Liiketoiminnan näkökulmasta saavutettavuuden laiminlyönti rajoittaa potentiaalista asiakaskuntaasi ja voi vahingoittaa brändisi mainetta. Globaalin yleisön huomioiminen laajentaa tätä näkökulmaa entisestään – se, mikä toimii moitteettomasti yhdellä alueella, saattaa aiheuttaa huomattavia esteitä toisella alueella joko teknologisen infrastruktuurin, paikallisten apuvälineteknologioiden tai kieli-/kulttuuriesteiden vuoksi.

Erityisesti saavuttamaton vedä ja pudota -tiedostolataus voi aiheuttaa seuraavia haasteita:

• Ruudunlukijoiden käyttäjät: Ruudunlukijat ilmoittavat sivun elementit ja antavat käyttäjien navigoida näppäinkomennoilla. Jos vedä ja pudota -aluetta ei ole merkitty oikein eikä se anna riittävää palautetta, ruudunlukijoiden käyttäjät eivät pysty ymmärtämään, miten tiedostoja ladataan.
• Näppäimistön käyttäjät: Käyttäjät, jotka käyttävät näppäimistönavigointia, tarvitsevat tavan päästä käsiksi ja aktivoida tiedostojen latausominaisuus näppäimistöllä. Jos vedä ja pudota -alue ei ole kohdennettavissa tai sillä ei ole siihen liittyviä näppäinkomentoja, nämä käyttäjät eivät voi ladata tiedostoja.
• Käyttäjät, joilla on motorisia rajoitteita: Vetäminen ja pudottaminen voi olla vaikeaa tai mahdotonta käyttäjille, joilla on motorisia rajoitteita. Vaihtoehtoinen tapa, kuten tavallinen tiedostonvalintaikkuna, on välttämätön.
• Käyttäjät, joilla on kognitiivisia rajoitteita: Monimutkaiset tai epäselvät ohjeet voivat olla hämmentäviä käyttäjille, joilla on kognitiivisia rajoitteita. Tiedostojen latausprosessin tulisi olla mahdollisimman yksinkertainen ja selkeä.

Saavutettavan vedä ja pudota -tiedostolatauksen avainperiaatteet

Tässä on joitakin avainperiaatteita, jotka ohjaavat saavutettavan vedä ja pudota -tiedostolatauksen toteuttamista:

1. Tarjoa näppäimistöllä saavutettava vaihtoehto

Tärkein periaate on tarjota näppäimistöllä saavutettava vaihtoehto vedä ja pudota -toiminnolle. Tämä saavutetaan tyypillisesti sisällyttämällä tavallinen tiedostonvalintapainike vedä ja pudota -alueen viereen.

Esimerkki:

            <div class="upload-container">
  <div id="drop-area">
    <p>Vedä ja pudota tiedostot tähän tai</p>
    <button id="select-file">Valitse tiedostot</button>
  </div>
  <input type="file" id="file-input" multiple>
</div>
            

              
                Copy
              
            
          

Tässä esimerkissä <button>-elementti tarjoaa näppäimistöllä saavutettavan tavan valita tiedostoja käyttämällä tavallista tiedostonvalintaikkunaa. Varmista, että painike on selkeästi nimetty (esim. "Valitse tiedostot") ja että sillä on tarvittaessa asianmukaiset ARIA-attribuutit (katso alla).

Tähän liittyvän JavaScriptin tulisi sitten käsitellä sekä painikkeen napsautus- että vedä ja pudota -tapahtumat ja käsitellä valitut tiedostot samalla tavalla syöttötavasta riippumatta.

2. Käytä ARIA-attribuutteja semantiikan parantamiseksi

ARIA (Accessible Rich Internet Applications) -attribuutit tarjoavat lisätietoa semantiikasta apuvälineteknologioille. Käytä ARIA-attribuutteja tehdäksesi vedä ja pudota -alueesta ymmärrettävämmän ja navigoitavamman ruudunlukijoiden käyttäjille.

Esimerkki:

            <div id="drop-area" aria-dropeffect="copy" tabindex="0">
  <p>Vedä ja pudota tiedostot tähän</p>
</div>
            

              
                Copy
              
            
          

Tässä on erittely käytetyistä ARIA-attribuuteista:

• aria-dropeffect="copy": Osoittaa, että vedä ja pudota -toiminto johtaa vedetyn datan kopioimiseen. Muita mahdollisia arvoja ovat "move", "link", "execute" tai "popup". Valitse arvo, joka parhaiten kuvaa toimintoa, joka tapahtuu, kun tiedosto pudotetaan.
• tabindex="0": Tekee elementistä kohdennettavan näppäimistöllä. Tämä on ratkaisevan tärkeää näppäimistön käyttäjille. tabindex-arvo 0 tarkoittaa, että elementti on mukana luonnollisessa sarkainjärjestyksessä.

Voit myös harkita aria-label- tai aria-labelledby-attribuuttien käyttöä kuvaavan nimen antamiseksi vedä ja pudota -alueelle. Esimerkiksi:

            <div id="drop-area" aria-dropeffect="copy" tabindex="0" aria-labelledby="drop-area-label">
  <h3 id="drop-area-label">Lataa tiedostoja</h3>
  <p>Vedä ja pudota tiedostot tähän</p>
</div>
            

              
                Copy
              
            
          

3. Anna selkeää ja oikea-aikaista palautetta

Palaute on välttämätöntä kaikille käyttäjille, mutta se on erityisen tärkeää apuvälineteknologioiden käyttäjille. Anna selkeää ja oikea-aikaista palautetta vedä ja pudota -toiminnon tilan ilmaisemiseksi.

Palautteen tyypit:

• Visuaalinen palaute: Muuta vedä ja pudota -alueen ulkoasua, kun tiedostoa vedetään sen päälle (esim. muuta taustaväriä, lisää reunus).
• Ruudunlukijapalaute: Käytä ARIA live-alueita ilmoittaaksesi muutoksista vedä ja pudota -alueen tilassa ruudunlukijoiden käyttäjille.
• Virheilmoitukset: Anna selkeät ja informatiiviset virheilmoitukset, jos tiedoston latauksessa on ongelmia (esim. virheellinen tiedostotyyppi, tiedostokokoraja ylitetty).
• Edistymisindikaattorit: Näytä edistymispalkki tiedoston latausprosessin aikana.

Esimerkki (ARIA live-alueiden käyttö):

            <div id="drop-area" aria-dropeffect="copy" tabindex="0">
  <p>Vedä ja pudota tiedostot tähän</p>
</div>
<div id="upload-status" aria-live="polite"></div>
            

              
                Copy
              
            
          

Tässä esimerkissä upload-status-elementti on ARIA live-alue. Kaikki muutokset tämän elementin sisältöön ilmoitetaan ruudunlukijoiden käyttäjille. aria-live="polite"-attribuutti osoittaa, että päivitykset tulisi ilmoittaa, kun käyttäjä on toimeton.

JavaScript-koodi päivittäisi sitten upload-status-elementin sisällön vedä ja pudota -toiminnon tilan perusteella:

            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 = 'Pudota ladataksesi';
});

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 = `Ladataan ${files.length} tiedostoa...`;
  // ... (Latauslogiikka tähän) ...
  uploadStatus.textContent = `Lataus valmis!`;
}
            

              
                Copy
              
            
          

4. Varmista riittävä värikontrasti

Riittävä värikontrasti tekstin ja taustan välillä on välttämätöntä heikkonäköisille käyttäjille. Noudata WCAG (Web Content Accessibility Guidelines) -ohjeita värikontrastisuhteista.

WCAG 2.1 vaatii kontrastisuhteen:

• 4.5:1 normaalille tekstille
• 3:1 suurelle tekstille (18pt tai 14pt lihavoituna) ja käyttöliittymän komponenteille

Käytä värikontrastin tarkistustyökalua varmistaaksesi, että väriyhdistelmäsi täyttävät nämä vaatimukset. Verkossa on saatavilla lukuisia työkaluja, kuten WebAIM Color Contrast Checker.

5. Testaa apuvälineteknologioilla

Tehokkain tapa varmistaa saavutettavuus on testata toteutustasi apuvälineteknologioilla. Käytä ruudunlukijaa (esim. NVDA, VoiceOver) ja näppäimistönavigointia testataksesi vedä ja pudota -tiedostolatausominaisuutta vammaisen käyttäjän näkökulmasta.

Testausvinkkejä:

• Ruudunlukija: Varmista, että vedä ja pudota -alue on merkitty oikein ja että ruudunlukija ilmoittaa toiminnon tilan (esim. "Vedä tiedostot tähän", "Tiedosto ladattu", "Virhe: Virheellinen tiedostotyyppi").
• Näppäimistönavigointi: Varmista, että vedä ja pudota -alue ja vaihtoehtoinen tiedostonvalintapainike ovat kohdennettavissa näppäimistöllä ja että käyttäjä voi aktivoida tiedostonvalintaikkunan.

6. Huomioi kansainvälistäminen ja lokalisointi

Kun suunnittelet tiedostojen latauskomponentteja globaalille yleisölle, ota huomioon kansainvälistäminen (i18n) ja lokalisointi (l10n). Tämä tarkoittaa sen varmistamista, että komponenttisi voidaan mukauttaa eri kieliin ja kulttuurisiin käytäntöihin.

Tärkeitä huomioita:

• Tekstin suunta: Jotkin kielet luetaan oikealta vasemmalle (RTL). Varmista, että vedä ja pudota -alue ja siihen liittyvät elementit renderöityvät oikein RTL-asetteluissa. CSS:n loogiset ominaisuudet (esim. margin-inline-start margin-left:n sijaan) voivat auttaa tässä.
• Päivämäärä- ja aikamuodot: Jos tiedoston latausprosessi sisältää päivämäärä- ja aikatietojen näyttämisen, käytä asianmukaisia lokalisoituja muotoja.
• Numeromuodot: Käytä lokalisoituja numeromuotoja tiedostokokoja ja muita numeerisia tietoja varten.
• Virheilmoitukset: Käännä virheilmoitukset ja muut käyttäjälle näkyvät tekstit käyttäjän kielelle.
• Merkistökoodaus: Varmista, että sovelluksesi tukee Unicodea (UTF-8) eri kielten merkkien käsittelemiseksi.
• Kulttuurinen herkkyys: Vältä sellaisten kuvakkeiden tai kuvien käyttöä, jotka voivat olla loukkaavia tai sopimattomia tietyissä kulttuureissa.

Esimerkki (Virheilmoitusten lokalisointi):

Sen sijaan, että kovakoodaisit virheilmoitukset JavaScript-koodiisi, tallenna ne erilliseen resurssitiedostoon ja lataa sopiva tiedosto käyttäjän kielen perusteella.

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

// fi.json
{
  "invalidFileType": "Virheellinen tiedostotyyppi. Lataa JPG-, PNG- tai GIF-tiedosto.",
  "fileSizeExceeded": "Tiedostokoko ylittyi. Suurin sallittu tiedostokoko on 10 Mt."
}
            

              
                Copy
              
            
          

JavaScript-koodisi lataisi sitten sopivan resurssitiedoston ja näyttäisi lokalisoidun virheilmoituksen:

            const translations = {
  en: {
    invalidFileType: "Invalid file type. Please upload a JPG, PNG, or GIF file.",
    fileSizeExceeded: "File size exceeded. Maximum file size is 10MB."
  },
  fi: {
    invalidFileType: "Virheellinen tiedostotyyppi. Lataa JPG-, PNG- tai GIF-tiedosto.",
    fileSizeExceeded: "Tiedostokoko ylittyi. Suurin sallittu tiedostokoko on 10 Mt."
  }
};

const userLanguage = navigator.language.substring(0, 2); // Hae kielikoodin kaksi ensimmäistä kirjainta (esim. 'en' englannille, 'fi' suomelle)
const currentLanguage = translations[userLanguage] ? userLanguage : 'en'; // Käytä oletuksena englantia, jos kieltä ei tueta

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

              
                Copy
              
            
          

7. Anna selkeät ohjeet ja opastus

Selkeät ohjeet ovat ratkaisevan tärkeitä kaikille käyttäjille, erityisesti niille, joilla on kognitiivisia rajoitteita. Anna ytimekkäät ja helposti ymmärrettävät ohjeet tiedostojen lataamiseen sekä vedä ja pudota -menetelmällä että vaihtoehtoisella tiedostonvalintamenetelmällä.

Parhaat käytännöt:

• Käytä selkeää ja yksinkertaista kieltä. Vältä teknistä jargonia.
• Tarjoa visuaalisia vihjeitä. Käytä kuvakkeita ja kuvituksia ohjaamaan käyttäjiä.
• Tarjoa työkaluvihjeitä tai ohjetekstejä. Tarjoa lisätietoa hiiren ollessa päällä tai elementin ollessa kohdennettuna.
• Harkitse video-oppaita. Lyhyt video voi olla erittäin tehokas tapa selittää tiedoston latausprosessi.

8. Testaa eri selaimilla ja laitteilla

Varmista, että vedä ja pudota -tiedostolatauksen toteutus toimii johdonmukaisesti eri selaimilla (esim. Chrome, Firefox, Safari, Edge) ja laitteilla (esim. pöytäkone, mobiili, tabletti). Selainten epäjohdonmukaisuudet voivat joskus johtaa saavutettavuusongelmiin.

Esimerkki: Saavutettavan vedä ja pudota -tiedostolatauksen toteutus

Tässä on täydellisempi esimerkki saavutettavan vedä ja pudota -tiedostolatauksen toteutuksesta käyttäen HTML:ää, CSS:ää 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">Lataa tiedostoja</h3>
    <p>Vedä ja pudota tiedostot tähän tai</p>
    <button id="select-file">Valitse tiedostot</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;
}

/* Lisää muuta muotoilua tarpeen mukaan */
</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 = `Valittu ${files.length} tiedostoa. Valmis lataukseen.`;
}

function formatFileSize(bytes) {
  if (bytes < 1024) return bytes + ' tavua';
  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';
}

// Vedä ja pudota -tapahtumakuuntelijat
['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 = 'Pudota ladataksesi';
});

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

// Tiedoston syöttökentän tapahtumakuuntelija
fileInput.addEventListener('change', function(e) {
  const files = fileInput.files;
  handleFiles(files);
});

// Valitse tiedostot -painikkeen tapahtumakuuntelija
selectFileButton.addEventListener('click', function(e) {
  fileInput.click(); // Käynnistä tiedoston syöttö ohjelmallisesti
});
</script>
            

              
                Copy
              
            
          

Yhteenveto

Saavutettavan vedä ja pudota -tiedostolataustoiminnon toteuttaminen vaatii huolellista suunnittelua ja yksityiskohtien huomioimista. Noudattamalla tässä oppaassa esitettyjä periaatteita voit luoda tiedostojen latauskokemuksen, joka on inklusiivinen ja käytettävä kaikille käyttäjille, riippumatta heidän kyvyistään tai käyttämistään teknologioista. Muista testata toteutuksesi perusteellisesti apuvälineteknologioilla ja ottaa huomioon kansainvälistäminen ja lokalisointi varmistaaksesi, että tiedostojen latauskomponenttisi toimii saumattomasti maailmanlaajuiselle yleisölle. Saavutettavuus ei ole vain ominaisuus; se on olennainen osa hyvää verkkosuunnittelua ja -kehitystä.

Lisälähteet

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