Difference between revisions of "Input Element Type Text"

From Level Access Web Labs
Jump to navigation Jump to search
(Readonly Input text with label)
 
(40 intermediate revisions by 4 users not shown)
Line 1: Line 1:
Possible attributes that can affect accessibility
+
* For use of list attribute (see [[Datalist Element]]
* autofocus
+
==Input text with title (required, placeholder, autofocus)==
* autocomplete
 
* checked
 
* disabled
 
* list (see [[Datalist Element]]
 
* placeholder
 
* readonly
 
* required
 
* type button
 
* type checkbox
 
* type date
 
* type datetime
 
* type email
 
* type file
 
* type hidden
 
* type month
 
* type number password
 
* type radio
 
* type range
 
* type reset
 
* type search
 
* type submit
 
* type tel
 
* type time
 
* type url
 
* type week
 
 
 
==Input text with title==
 
 
<html>
 
<html>
   <input placeholder="enter search term here" title="search" type="text" />
+
   <head>
  <button> Go </button>
+
  <style>
 +
    input { border: thin solid #red !important; }
 +
  </style>
 +
  </head>
 +
  <body>
 +
    <input style="border: thin solid #eeeeee;" autofocus required placeholder="enter search term here" title="search" type="text" />
 +
    <button> Go </button>
 +
  </body>
 
</html>
 
</html>
  
==Input text with label==
+
==Input text with label (required)==
 
<html>
 
<html>
   <input id="i1" placeholder="enter search term here" type="text" />
+
   <body>
  <label style="border:solid thin;" for="i1"> Search </label>
+
    <input required id="i1" placeholder="enter search term here" type="text" />
 +
    <label style="border:solid thin;" for="i1"> Search </label>
 +
  </body>
 
</html>
 
</html>
  
 
==Input text with aria-label==
 
==Input text with aria-label==
 
<html>
 
<html>
   <input aria-label="search" id="i1" placeholder="enter search term here" type="text" />
+
   <body>
  <span style="border:solid thin;"> Search </span>
+
    <input aria-label="search" id="i1" placeholder="enter search term here" type="text" />
 +
    <span style="border:solid thin;"> Search </span>
 +
  </body>
 
</html>
 
</html>
  
 
==Input text with aria-labelledby==
 
==Input text with aria-labelledby==
 
<html>
 
<html>
   <input aria-labelledby="s1" id="i1" placeholder="enter search term here" type="text" />
+
   <body>
  <span id="s1" style="border:solid thin;"> Search </span>
+
    <input aria-labelledby="s1" id="i1" placeholder="enter search term here" type="text" />
 +
    <span id="s1" style="border:solid thin;"> Search </span>
 +
  </body>
 
</html>
 
</html>
  
 
==Input with implicit label==
 
==Input with implicit label==
 
<html>
 
<html>
   <label>
+
   <body>
    <input id="i1" placeholder="enter search term here" type="text" />
+
    <label>
    <span id="s1" style="border:solid thin;"> Search </span>
+
      <input id="i1" placeholder="enter search term here" type="text" />
   </label>
+
      <span id="s1" style="border:solid thin;"> Search </span>
 +
    </label>
 +
   </body>
 
</html>
 
</html>
  
 
==Input with explicit and implicit label==
 
==Input with explicit and implicit label==
 
<html>
 
<html>
   <label for="ie1">
+
   <body>
    <input id="ie1" placeholder="enter search term here" type="text" />
+
    <label for="ie1">
    <span id="s1" style="border:solid thin;"> Search </span>
+
      <input id="ie1" placeholder="enter search term here" type="text" />
   </label>
+
      <span id="s1" style="border:solid thin;"> Search </span>
 +
    </label>
 +
   </body>
 
</html>
 
</html>
  
 
==Input text with label and aria-describedby==
 
==Input text with label and aria-describedby==
 
<html>
 
<html>
   <input aria-describedby="s2" id="il1" placeholder="enter search term here" type="text" />
+
   <body>
  <label for="il1" style="border:solid thin;"> Search </label>
+
    <input aria-describedby="s2" id="il1" placeholder="enter search term here" type="text" />
  <span id="s2" >You can search for anything you want.</span>
+
    <label for="il1" style="border:solid thin;"> Search </label>
 +
    <span id="s2" >You can search for anything you want.</span>
 +
  </body>
 
</html>
 
</html>
  
 
==Disabled Input text with label==
 
==Disabled Input text with label==
 
<html>
 
<html>
   <input disabled id="id1" placeholder="enter search term here" type="text" />
+
   <body>
  <label style="border:solid thin;" for="id1"> Search </label>
+
    <input disabled id="id1" placeholder="enter search term here" type="text" />
 +
    <label style="border:solid thin;" for="id1"> Search </label>
 +
  </body>
 
</html>
 
</html>
  
 
==Readonly Input text with label==
 
==Readonly Input text with label==
 
<html>
 
<html>
   <input readonly id="ir1" placeholder="enter search term here" type="text" />
+
   <body>
   <label for="ir1" style="border:solid thin;"> Search </label>
+
    <input readonly value="hello world" id="ir1" placeholder="enter search term here" type="text" />
 +
    <label for="ir1" style="border:solid thin;"> Search </label>
 +
  </body>
 +
</html>
 +
 
 +
==Input text with label (autocomplete on)==
 +
<html>
 +
   <body>
 +
    <input autocomplete="on" id="ia1" placeholder="enter search term here" type="text" />
 +
    <label for="ia1" style="border:solid thin;"> Search </label>
 +
  </body>
 +
</html>
 +
 
 +
<html>
 +
  <body>
 +
    <input autocomplete="on" id="ia2" placeholder="enter search term here" type="text" />
 +
    <label for="ia2"> Search </label>
 +
  </body>
 +
</html>
 +
 
 +
==Input with only title==
 +
<html>
 +
  <body>
 +
    <input type="text" title="this is a title" />
 +
  </body>
 +
</html>
 +
 
 +
==Input with only placeholder==
 +
<html>
 +
  <body>
 +
    <input type="text" placeholder="This is a placeholder" />
 +
  </body>
 +
</html>
 +
 
 +
==Input with maxlength 3==
 +
<html>
 +
  <body>
 +
    <input type="text" maxlength="3"/>
 +
  </body>
 +
</html>
 +
 
 +
==Input with multiple aria-labelledby IDREF's==
 +
<html>
 +
  <style>
 +
    .screen-reader-text {
 +
      position: absolute !important;
 +
      height: 1px; width: 1px;
 +
      overflow: hidden;
 +
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 +
      clip: rect(1px, 1px, 1px, 1px);
 +
      clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
 +
    }
 +
  </style>
 +
  <body>
 +
    <label id="lbl1">Price</label>
 +
    <label id="lbl2" class="screen-reader-text">From</label>
 +
    <input aria-labelledby="lbl1 lbl2" type="text"/>
 +
  </body>
 +
</html>
 +
 
 +
==Input with aria-labelledby label immediately preceding the text element==
 +
<html>
 +
  <body>
 +
    <label id="lbl3">Price</label>
 +
    <input aria-labelledby="lbl3" type="text"/>
 +
  </body>
 +
</html>
 +
 
 +
==Input with aria-labelledby label element wrapping text element==
 +
<html>
 +
  <body>
 +
    <label id="lbl3">Price
 +
      <input aria-labelledby="lbl3" type="text"/>
 +
    </label>
 +
  </body>
 +
</html>
 +
 
 +
==Input with aria-labelledby label element not immediately preceding the text element==
 +
<html>
 +
  <body>
 +
    <label id="lbl3">Price</label>
 +
    <span>(lowest)</span>
 +
    <input aria-labelledby="lbl3" type="text"/>
 +
  </body>
 +
</html>
 +
 
 +
==Input using aria-label ==
 +
<html>
 +
  <body>
 +
    <label>Price</label>
 +
    <input aria-label="Price range from" type="text"/>
 +
    <span aria-hidden="true">&nbsp;to&nbsp;</span>
 +
    <input aria-label="Price range to" type="text"/>
 +
  </body>
 +
</html>
 +
 
 +
==Input with alt attribute and no accessible name==
 +
<html>
 +
  <input alt="test" type="text" />
 +
</html>
 +
 
 +
==Input with no other attributes or accessible name==
 +
<html>
 +
  <input type="text" />
 
</html>
 
</html>
  
 
[[Category:Elements]]
 
[[Category:Elements]]
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 14:11, 19 December 2019

Input text with title (required, placeholder, autofocus)

Input text with label (required)

Input text with aria-label

Search

Input text with aria-labelledby

Search

Input with implicit label

Input with explicit and implicit label

Input text with label and aria-describedby

You can search for anything you want.

Disabled Input text with label

Readonly Input text with label

Input text with label (autocomplete on)

Input with only title

Input with only placeholder

Input with maxlength 3

Input with multiple aria-labelledby IDREF's

Input with aria-labelledby label immediately preceding the text element

Input with aria-labelledby label element wrapping text element

Input with aria-labelledby label element not immediately preceding the text element

(lowest)

Input using aria-label

Input with alt attribute and no accessible name

Input with no other attributes or accessible name