dropzone.js Accessibility

问题

Currently I am using dropzone.js like such:

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

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

回答1:

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">

By setting the config option as:

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

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

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

回答2:

dropzone does not work from the keyboard. You have to implement another keyboard accessible control (like native input[type=file])

回答3:

As stated in previous answers, by default, the Dropzone is not accessible throughout keyboard, when navigating with the tab key.

I solved this very simply. Inside your dropzone form, and inside the message div, add a button element but do not wrap the message text with the button element. p.s. I'm using bootstrap so my dropzne form is inside bootstrap col block.

my HTML:

    <div class="col-12 mb-2 mb-md-3 px-0">
        <form action="{{ path('hsnb.organisation.upload_image', {id: organisation.id} ) }}"
              class="dropzone px-0 border-lightest-gray2 br-4px" id="my-dropzone">
            <div class="dz-message" data-dz-message>
                <button type="button" class="dropzone__button--fake">
                </button>

                    {{ 'general.dragAndDrop' | trans }}
            </div>
            <div class="fallback">
                <input name="file" type="file" multiple/>
            </div>
        </form>
    </div>

And my css for the fake dropzone button:

.dropzone__button--fake {
    background: 0 0;
    border: transparent;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Hope this will help someone. I spent hours trying to find a workaround.

来源：https://stackoverflow.com/questions/39999425/dropzone-js-accessibility

标签

accessibility

dropzone.js