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) Semantic markup refers to the use of HTML (or XML) tags that convey meaning about the structure and content of a web page or digital document, rather than just controlling its appearance , 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) Semantic markup refers to the use of HTML (or XML) tags that convey meaning about the structure and content of a web page or digital document, rather than just controlling its appearance
  • Incompatibility: incompatible with browsers and devices
  • Lack of features/functions/items/information: lack of descriptive information
  • Unclear instruction: file access

Guidelines

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

Rationale for Suggesting the above Guidelines

BVI (text with tooltip) The acronym for Blind and Visually Impaired. It refers to BVI users who rely on screen readers to interact with digital libraries (DLs). users may struggle to access files when screen readers do not support them in viewing file content on a page directly. These guidelines ensure that BVI users can efficiently view linked files and attachments on a page. By displaying files directly on a page and providing appropriate file specifications (e.g., descriptive titles that BVI users can understand) 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) An application that allows users to display and interact with files without needing to transfer them to the device beforehand. (e.g., Google Drive viewer) to open the file directly.
1.2. If applicable, use <iframe> (text with tooltip) An HTML tag that embeds a separate HTML document within another, creating nested browsing content for user interaction.  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) for all the options to access files.

Features Suggested for Users

1.1.1/1.2.1. “ Inline view (text with tooltip) A feature that allows users to load links or pages dynamically on the current webpage without downloading them, such as iframe. ” (See example 1.1.1.a./1.2.1.a.)
2.1.1. File specifications (See example 2.1.1.a/2.2.1.a.)
2.2.1. Descriptions (See example 2.1.1.a/2.2.1.a.)

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) An HTML tag that embeds a separate HTML document within another, creating nested browsing content for user interaction.  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>
 

This image shows an example of inline view using iframe ACC1 Figure a1. Example of an inline view

2.1.1.a/2.2.1.a. Use a <a> tag, aria-label, and aria-describedby to provide additional information about files.

This approach guarantees that screen readers instantly convey the file’s identity and purpose. A well-written, context-independent anchor text enables users to hear clearly what the file contains, where the link leads, and what it downloads, reducing confusion and cognitive load when navigating with assistive technology

View and Copy code 
<a href="six_questions_visual_aid.pdf"
aria-label="Download Six Questions Visual Aid PDF, size 2 MB"
aria-describedby="six-questions-desc">
Download the Visual Aid
</a>
<span id="six-questions-desc" hidden>
This document presents six visual aids designed to support comprehension.
</span>
 

Examples of Poor Practice

1.1.1.b. Difficulty directly accessing files

ACC1 Figure b1 shows that there are links to content available in both PDF and DOCX formats. However, when users click these links, the files will be opened on a different page or be downloaded to their devices. As a result, the user does not notice this and may think the files are inaccessible.

“What is the any image or any other girl or a description of the setup? So that’s uh, those are that’s meant. So they’re not they for unpermitted to open.” (AT18-OL)

This image highlights the unclickable link for downloading materials.
ACC1 Figure b1. Screenshot of difficulty directly accessing files

Resources

See also: