diff options
| author | Juuso Lapinlampi <wub@partyvan.eu> | 2015-09-26 13:29:20 +0200 |
|---|---|---|
| committer | Juuso Lapinlampi <wub@partyvan.eu> | 2015-09-26 13:30:32 +0200 |
| commit | 6f51b356a4c08f8ec3b452e92e301062c828dbc5 (patch) | |
| tree | e47bbddbfbd10ced21247a9c7fdf5baaeab0aa05 | |
| parent | 2e0945412f9046ae83ebfe17fcc23dd396be7701 (diff) | |
Replace #upload-btn <a> element with <button>
Corrects semantics and increases accessibility.
The <a> element represents a hyperlink. A hyperlink is "a link from a
hypertext file or document to another location or file." This is not
what #upload-btn is, it's a button.
Ask yourself: "Does the element change the URL?" In our case, the upload
button does not so it is incorrect to use an <a> element here.
The idea to use <a> elements as buttons comes from years ago when you
couldn't style <button> elements in legacy browsers. Today you can, so
there's no reason to break the semantics.
Reference: http://blogs.ancestry.com/techroots/buttons-vs-anchors/
| -rw-r--r-- | pages/upload_form.swig | 2 | ||||
| -rw-r--r-- | pages/upload_formca.swig | 2 |
2 files changed, 2 insertions, 2 deletions
diff --git a/pages/upload_form.swig b/pages/upload_form.swig index 91a28e8..126b3c4 100644 --- a/pages/upload_form.swig +++ b/pages/upload_form.swig @@ -19,6 +19,6 @@ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. #} -<a href="javascript:;" id="upload-btn" class="btn">Select <span>or drop </span> file(s)</a> +<button href="javascript:;" id="upload-btn" class="btn" type="button">Select <span>or drop </span> file(s)</button> <input type="file" id="upload-input" name="files[]" multiple data-max-size="{{max_upload_size}}MiB"> <ul id="upload-filelist"></ul> diff --git a/pages/upload_formca.swig b/pages/upload_formca.swig index c653f05..0bb4f7a 100644 --- a/pages/upload_formca.swig +++ b/pages/upload_formca.swig @@ -21,6 +21,6 @@ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. #} -<a href="javascript:;" id="upload-btn" class="btn">Selecciona <span>o arrastra</span> fitxers(s) ací</a> +<button href="javascript:;" id="upload-btn" class="btn" type="button">Selecciona <span>o arrastra</span> fitxers(s) ací</button> <input type="file" id="upload-input" name="files[]" multiple data-max-size="{{max_upload_size}}MiB"> <ul id="upload-filelist"></ul> |