Difference between revisions of "Input Element Multiple Types"

From Level Access Web Labs
Jump to navigation Jump to search
(File input type)
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
==This page covers the following input types==
 
==This page covers the following input types==
 +
* type color
 
* type date
 
* type date
 
* type datetime
 
* type datetime
Line 19: Line 20:
 
<html>
 
<html>
 
<div>
 
<div>
  <input type="date" />
+
<label for="color1"> Favorite Color: </label>
 +
  <input id="color1" type="color" />
 
</div>
 
</div>
 
<div>
 
<div>
  <input type="datetime" />
+
<label for="date1"> Date: </label>
 +
<input id="date1" type="date" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="email" />
+
  <label for="datetime1"> Date and Time </label>
 +
   <input id="datetime1" type="datetime" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="file" />
+
  <label for="email1"> Email: </label>
 +
   <input id="email1" type="email" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="hidden" />
+
  <label for="file1"> File: </label>
 +
   <input id="file1" type="file" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="month" />
+
  <label for="hidden1"> hidden </label>
 +
   <input id="hidden1" type="hidden" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="number" />
+
  <label for="month1"> Month: </label>
 +
   <input id="month1" type="month" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="password" />
+
  <label for="number1"> Number </label>
 +
   <input id="number1" type="number" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="range" />
+
  <label for="password1"> Password: </label>
 +
   <input id="password1" type="password" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="reset" />
+
  <label for="range1"> Range: </label>
 +
   <input id="range1" type="range" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="search" />
+
  <label for="reset1"> Reset:</label>
 +
   <input id="reset1" type="reset" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="submit" />
+
  <label for="search1"> Search: </label>
 +
   <input id="search1" type="search" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="tel" />
+
  <label for="submit1"> Submit: </label>
 +
   <input id="submit" type="submit" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="time" />
+
  <label for="tel1"> Telephone: </label>
 +
   <input id="tel1" type="tel" />
 
</div>
 
</div>
 
<div>
 
<div>
   <input type="url" />
+
  <label for="time1"> Time: </label>
 +
   <input id="time1" type="time" />
 
</div>
 
</div>
 
<div>
 
<div>
  <input type="week" />
+
  <label for="url1"> URL: </label>
 +
  <input id="url1" type="url" />
 +
</div>
 +
<div>
 +
<label for="week1"> Week: </label>
 +
  <input id="week1" type="week" />
 
</div>
 
</div>
 
</html>
 
</html>
 +
 +
==Results==
 +
===File input type===
 +
* In Chrome with NVDA 2019.2.1 and JAWS 2020 the accessible name is announced but not the "choose file" visible text.
 +
* In Firefox JAWS 2020 and NVDA 2019.2.1 do announce but the accessible name and the visible text of the button “browse”.
  
 
[[Category:Elements]]
 
[[Category:Elements]]
 +
[[Category:HTML5]]

Latest revision as of 22:58, 10 January 2020

This page covers the following input types

  • type color
  • type date
  • type datetime
  • type email
  • type file
  • type hidden
  • type month
  • type number
  • type password
  • type range
  • type reset
  • type search
  • type submit
  • type tel
  • type time
  • type url
  • type week

Results

File input type

  • In Chrome with NVDA 2019.2.1 and JAWS 2020 the accessible name is announced but not the "choose file" visible text.
  • In Firefox JAWS 2020 and NVDA 2019.2.1 do announce but the accessible name and the visible text of the button “browse”.