dropzone.js辅助功能

问题描述：

目前，我正在使用dropzone.js，例如:

Currently I am using dropzone.js like such:

<cfform name='UploadFiles' action="uploadfiles.cfm" class="dropzone">

我无法通过"Tab"和"Enter"访问此控件，这是一个可访问性问题.如何使该键盘易于使用?

I am not able to access this control via 'Tab' and 'Enter, which is an accessibility issue. How can I make this keyboard accessible?

答

我通过在Dropzone消息中添加< button> 元素实现了键盘的可访问性.参见代码段:

I achieved keyboard accessibility by adding a <button> element in the Dropzone message. See the snippet:

Dropzone.autoDiscover = false;

// Putting a <button> element in the dropzone message which can be targeted by the keyboard.
// Note: Clicking the dropzone area or the button will trigger the file browser.
var myDropzone = new Dropzone('#my-awesome-dropzone', { 
	dictDefaultMessage: "Drop files here or <button type='button'>select</button> to upload."
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet"/>


<label for="in1">Input 1</label>
<input type="text" id="in1">
<br/>
<label for="in1">Input 2</label>
<input type="text" id="in2">

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>
      
<label for="in1">Input 4</label>
<input type="text" id="in4">
<br/>
<label for="in1">Input 5</label>
<input type="text" id="in5">

通过将config选项设置为:

By setting the config option as:

dictDefaultMessage: "Drop files here or <button type='button'>select</button> to upload."

您可以选择并定位该按钮，然后按Enter键，然后会弹出文件浏览器.

You can tab through and target that button, hit enter and the file browser pops up.

在尝试解决与您相同的问题时，我只是偶然发现了这一点，但它似乎工作正常.有关Dropzone的可配置选项的详细信息，请点击此处: http://www.dropzonejs.com/#configuration

I only stumbled across this while trying to solve the same problem as you but it seems to work alright. Details on configurable options for Dropzone here: http://www.dropzonejs.com/#configuration

dropzone.js辅助功能

相关推荐