ACC1. Difficulty directly accessing files

Definition

A situation that arises from difficulty opening and obtaining files due to indirect file access, ineffective semantic markup (text with tooltip) , or lack of instructions on how to access files.

Factors Leading to the Situation

Inadequate features/functions: indirect file access
Inadequate support: ineffective semantic markup (text with tooltip)
Incompatibility: incompatible with browsers and devices
Lack of features/functions/items/information: lack of descriptive information
Unclear instruction: file access

Guidelines

Ensure that linked files and attachments are accessible and directly opened.
Ensure that relevant information about options to access files is presented to users.

Rationale for Suggesting the above Guidelines

BVI (text with tooltip) users may struggle to access files when only links of files are provided on a page. These guidelines ensure that BVI users can efficiently access linked files and attachments on a page. By displaying files directly on a page and providing appropriate file specifications (e.g., descriptive titles that can be understood by BVI users) and instructions for accessing files, DLs allow BVI users to better access and understand linked or downloadable files. These guidelines prioritize inclusivity and ease of use for all DL users.

Techniques and Methods to Comply with a Specific Design Guideline

1.1. Integrate a file viewer (text with tooltip) to open file directly.
1.2. If applicable, use <iframe> (text with tooltip) in HTML with <iframe title> or in JavaScript code with <iframe.title> to include the file content within the webpage.
2.1. Assign a meaningful title and specify the type and size of the file.
2.2. Present specific descriptions (e.g. links, pop-up windows) for all the options to access files.

Features Suggested for Users

1.1.1/1.2.1. “ Inline view (text with tooltip) ” (See example 1.1.1.a./1.2.1.a.)
2.1.1. File specifications (See example 2.1.1.a.)
2.2.1. Descriptions

Examples of Best Practice

1.1.1.a./1.2.1.a. Using <iframe> on JavaScript

As shown in ACC1 Figure a1, utilizing JavaScript and <iframe> (text with tooltip) can dynamically load the content into an HTML element upon user interaction such as a click.

View and Copy code

<!-- Placeholder for the clickable link --> 
 
<a href="#" id="pdfLink">Click here to view PDF</a> 
 
   
 
<!-- Container for displaying PDF content --> 
 
<div id="pdfContainer" style="display: none;"></div> 
 
   
 
<script> 
 
  document.addEventListener("DOMContentLoaded", function () { 
 
    // Get reference to the clickable link and the container for PDF content 
 
    var pdfLink = document.getElementById("pdfLink"); 
 
    var pdfContainer = document.getElementById("pdfContainer"); 
 
   
 
    // Add click event listener to the link 
 
    pdfLink.addEventListener("click", function (event) { 
 
      event.preventDefault(); // Prevent default link behavior (e.g., following the link) 
 
   
 
      // Load PDF content into the container 
 
      loadPDFIntoContainer("path/to/your/pdf/file.pdf", pdfContainer); 
 
    }); 
 
  }); 
 
   
 
  function loadPDFIntoContainer(pdfUrl, container) { 
 
    // Create an iframe element 
 
    var iframe = document.createElement("iframe"); 
 
   
 
    // Set iframe attributes 
 
    iframe.src = pdfUrl; // Set the source of the iframe to the PDF URL 
 
    iframe.width = "100%"; // Set width to 100% of container (adjust as needed) 
 
    iframe.height = "500px"; // Set a fixed height for the iframe (adjust as needed) 
 
    iframe.title = "Document viewer for PDF"; // Provide a meaningful title for accessibility 
 
   
 
    // Append the iframe to the container 
 
    container.innerHTML = ""; // Clear any existing content in the container 
 
    container.style.display = "block"; // Make the container visible 
 
    container.appendChild(iframe); 
 
  } 
 
</script>

JavaScript and iframe codes to dynamically load the content into an HTML element upon user interaction. ACC1 Figure a1. Example code for using <iframe>

2.1.1.a. Use a <a> tag and provide additional information of file.

This allows users to navigate to another webpage, file, or a specific section within a webpage. The primary attribute of the <a> tag is href, which specifies the URL of the destination. A target attribute could be added to indicate opening the link in a new tab or window. Source: Orange digital accessibility guidelines. (n.d.).