Difference between revisions of "NirajThapa"

From Level Access Web Labs
Jump to navigation Jump to search
 
(35 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
This is a test page for internal use.
 
This is a test page for internal use.
 
+
<br />
Add more later.
+
Add more later. <br />
 
</head>
 
</head>
  
 
<body>
 
<body>
 +
<strong> Form Field with Label: </strong><br />
 
<label for="fname">
 
<label for="fname">
First Name: </label>
+
First Name: </label><br />
<input type="text" id="fname">
+
<input type="text" id="fname"><br />
 +
 
 +
<br />
 +
<strong> Form field with Aria-Label: </strong><br />
 +
First Name: <br />
 +
<input type="text" aria-label="First name"> </br> </br>
 +
 
  
<br>
+
<strong> Form field with Aria-labelledby: </strong><br />
 +
<span id="namef">
 
First Name:
 
First Name:
<input type="text" aria-label="First name">
+
</span> <br />
 +
<input type="text" aria-labelledby="namef"> <br /> <br />
 +
 
 +
<fieldset>
 +
<legend>Are you ready? </legend><br />
 +
<input type="radio" id="answer1" name="answers">
 +
<label for="answer1">Yes </label><br />
 +
<input type="radio" id="answer2" name="answers">
 +
<label for="answer2">No</label> <br />
 +
</fieldset>
 +
 
 +
<button  type="button">I'm a native button. </button>
 +
 
 +
<div tabindex="0" role="button">I'm a simulated button. </div>
 +
 
 +
<label for="daysselect">Days of the Week.</label>
 +
<select id="daysselect">
 +
<option value="Sunday">Sunday</option>
 +
<option value="Monday">Monday</option>
 +
<option value="Tuesday">Tuesday</option>
 +
<select>
 +
 
 +
<a href="#">I am a native link.</a> <br />
 +
<span tabindex="0" role="link" id="link">I am a simulated link.</span> <br /> <br />
 +
 
 +
Alternative Text for SVG with Aria-Labelledby, Title and Role:
 +
<svg height="100" width="100" role="img" aria-labelledby="svim">
 +
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
 +
<title id="svim">Red Circle</title>
 +
</svg>
 +
 
 +
<br /><br />
 +
 
 +
<div role="group" aria-labelledby="shipping_head" style="float: left; border: 1px solid #333; padding: 0 .5em .5em; margin-right: 1em;">
 +
<div id="shipping_head" style="font-weight: bold; padding: .25em 0;">Shipping Address:</div>
 +
<div>
 +
<label for="aria_shipping_name"><span class="visuallyhidden">Shipping </span>Name:</label><br />
 +
<input type="text" name="aria_shipping_name" id="aria_shipping_name">
 +
</div>
 +
<div>
 +
<label for="aria_shipping_street">Street:</label><br />
 +
<input type="text" name="aria_shipping_street" id="aria_shipping_street">
 +
</div>
 +
<div>
 +
<label for="aria_shipping_number">Number:</label><br />
 +
<input type="text" name="aria_shipping_number" id="aria_shipping_number">
 +
</div>
 +
<div>
 +
<label for="aria_shipping_city">City:</label><br />
 +
<input type="text" name="aria_shipping_city" id="aria_shipping_city">
 +
</div>
 +
<div>
 +
<label for="aria_shipping_zip">ZIP code:</label><br />
 +
<input type="text" name="aria_shipping_zip" id="aria_shipping_zip">
 +
</div>
 +
</div>
 +
<br> <br>
 +
Optgroup
 +
<select>
 +
<optgroup label="fruits">
 +
<option value="Apple">Apple</option>
 +
<option value="Pineapple">Pineapple</option>
 +
</optgroup>
 +
 
 +
<optgroup label="food">
 +
<option value="Noodles">Noodles</option>
 +
<option value="Dumplings">Dumplings</option>
 +
</optgroup>
 +
</select>
 +
<br /><br />
 +
 
 +
<div class="tabs">
 +
  <div role="tablist" aria-label="Entertainment">
 +
    <button role="tab"
 +
            aria-selected="true"
 +
            aria-controls="nils-tab"
 +
            id="nils">
 +
      Nils Frahm
 +
    </button>
 +
    <button role="tab"
 +
            aria-selected="false"
 +
            aria-controls="agnes-tab"
 +
            id="agnes"
 +
            tabindex="-1">
 +
      Agnes Obel
 +
    </button>
 +
    <button role="tab"
 +
            aria-selected="false"
 +
            aria-controls="complexcomplex"
 +
            id="complex"
 +
            tabindex="-1"
 +
            data-deletable="">
 +
      Joke
 +
    </button>
 +
  </div>
 +
  <div tabindex="0"
 +
      role="tabpanel"
 +
      id="nils-tab"
 +
      aria-labelledby="nils">
 +
    <p>
 +
      Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
 +
    </p>
 +
  </div>
 +
  <div tabindex="0"
 +
      role="tabpanel"
 +
      id="agnes-tab"
 +
      aria-labelledby="agnes"
 +
      hidden="">
 +
    <p>
 +
      Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.
 +
    </p>
 +
  </div>
 +
  <div tabindex="0"
 +
      role="tabpanel"
 +
      id="complexcomplex"
 +
      aria-labelledby="complex"
 +
      hidden="">
 +
    <p>
 +
      Fear of complicated buildings:
 +
    </p>
 +
    <p>
 +
      A complex complex complex.
 +
    </p>
 +
  </div>
 +
</div>
  
First Name:
+
<a href="https://www.levelaccess.com">
<input type="text" aria-labelledby="namef">
+
<img src="" alt="Level Access Logo Link">
<span id="namef">
+
</a>
My First Name
 
</span>
 
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 14:17, 2 January 2020

This is a test page for internal use.
Add more later.
Form Field with Label:



Form field with Aria-Label:
First Name:


Form field with Aria-labelledby:
First Name:


Are you ready?


I'm a simulated button.

I am a native link.
I am a simulated link.

Alternative Text for SVG with Aria-Labelledby, Title and Role:

Red Circle



Shipping Address:







Optgroup



Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

Level Access Logo Link