Difference between revisions of "Accessible name calc"

From Level Access Web Labs
Jump to navigation Jump to search
 
(25 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
       content: "swimming ";
 
       content: "swimming ";
 
     }
 
     }
 +
    div[role="switch"] {
 +
      min-width:1em;
 +
      max-width:2em;
 +
      min-height:1em;
 +
      border: thin solid black;
 +
    }
 
   </style>
 
   </style>
 
<body>
 
<body>
 +
<h1>Image</h1>
 
<h2>Image with aria-label and alt</h2>
 
<h2>Image with aria-label and alt</h2>
 
<img src=”test.gif” aria-label="here" alt="hello">  
 
<img src=”test.gif” aria-label="here" alt="hello">  
Line 24: Line 31:
 
   <span id="a2"> Here </span>
 
   <span id="a2"> Here </span>
 
</div>
 
</div>
−
 
+
<hr>
 +
<h1>Link</h1>
 
<h2>Link with pseudo content</h2>
 
<h2>Link with pseudo content</h2>
 
<div>
 
<div>
Line 85: Line 93:
 
<p> Has an accessible name of "Jon not".</p>
 
<p> Has an accessible name of "Jon not".</p>
  
−
<h2>Reference to aria-labelledby which contains content that has aria-label</h2>
+
<h2>Reference to aria-labelledby element which has aria-label</h2>
 
<a aria-labelledby="aa2" href=”#”> jon </a>
 
<a aria-labelledby="aa2" href=”#”> jon </a>
 
<p id="aa2" aria-label="David">Avila</p>
 
<p id="aa2" aria-label="David">Avila</p>
 +
<p> Has an accessible name of "David".</p>
 +
 +
<hr>
 +
<h1>Switch</h1>
 +
  <p>Name as text content "running?"</p>
 +
  <div>Is your refrigerator running?</div>
 +
  <div tabindex="0" role="switch" aria-checked="true">Running?</div>
 +
 +
  <p>Name as aria-labelledby "Is your refrigerator running?"</p>
 +
  <div id="d2">Is your refrigerator running?</div>
 +
  <div tabindex="0"role="switch" aria-labelledby="d2" aria-checked="true">Running?</div>
 +
 +
  <p>Name as aria-label "Fridge is running?"</p>
 +
  <div>Is your refrigerator running?</div>
 +
  <div tabindex="0" role="switch" aria-label="Fridge is running?" aria-checked="true">Running?</div>
 +
 +
  <p>Name as title attribute with text content "Running?"</p>
 +
  <div>Is your refrigerator running?</div>
 +
  <div tabindex="0" role="switch" title="Fridge is running?" aria-checked="true">Running?</div>
 +
 +
  <p>Name as title attribute with no text content "Fridge is running?"</p>
 +
  <div>Is your refrigerator running?</div>
 +
  <div tabindex="0" role="switch" title="Fridge is running?" aria-checked="true"></div>
 +
 +
<h1>iframe</h1>
 +
<p>title "SSB's homepage"</p>
 +
<iframe src="https://www.ssbbartgroup.com" title="SSB's homepage"></iframe>
 +
 +
<p>aria-label "my label"</p>
 +
<iframe src="https://www.ssbbartgroup.com" aria-label="my label"></iframe>
 +
 +
<p>aria-labelledby "SSB's homepage" </p>
 +
<div id="i1"> SSB's homepage</div>
 +
<iframe src="https://www.ssbbartgroup.com" aria--labelledby="i1"></iframe>
 +
 +
<h1>Input no type</h1>
 +
<p>Explicit label</p>
 +
<div>
 +
  <p>acc name is "first name:"</p>
 +
  <label for="fname1">First name:</label>
 +
  <input id="fname1" />
 +
</div>
 +
 +
<p>Implicit label</p>
 +
<div>
 +
  <p>acc name is "first name:"</p>
 +
  <label> First name:
 +
    <input />
 +
  </label>
 +
 +
<p>title attribute</p>
 +
<div>
 +
  <p>acc name is "last name:"</p>
 +
  <input title="last name" />
 +
</div>
 +
 +
<p>aria-label attribute</p>
 +
<div>
 +
  <p>acc name is "Middle  name:"</p>
 +
  <input aria-label="middle name" />
 +
</div>
 +
 +
<p>aria-labelledby</p>
 +
<div>
 +
  <p>acc name is "SSN:"</p>
 +
  <span id="ssn">SSN:</span>
 +
  <input aria-labelledby="ssn" />
 +
</div>
 +
 +
<h1>Input type text</h1>
 +
<p>Explicit Label</p>
 +
<div>
 +
  <p>acc name is "first name:"</p>
 +
  <label for="fname">First name:</label>
 +
  <input id="fname" type="text" />
 +
</div>
 +
 +
<p>Implicit label</p>
 +
<div>
 +
  <p>acc name is "first name:"</p>
 +
  <label> First name:
 +
    <input type="text" />
 +
  </label>
 +
</div>
 +
 +
<p>title attribute</p>
 +
<div>
 +
  <p>acc name is "last name:"</p>
 +
  <input type="text" title="last name" />
 +
</div>
 +
 +
<p>aria-label attribute</p>
 +
<div>
 +
  <p>acc name is "Middle  name:"</p>
 +
  <input aria-label="middle name" />
 +
</div>
 +
 +
<p>aria-labelledby</p>
 +
<div>
 +
  <p>acc name is "SSN:"</p>
 +
  <span id="ssn1">SSN:</span>
 +
  <input type="text" aria-labelledby="ssn1" />
 +
</div>
 +
</body>
 +
</html>
 +
 +
=Object element=
 +
<html>
 +
</body>
 +
<p>Inner text</p>
 +
<div>
 +
  <p>acc name is "This is an object"</p>
 +
  <object width="400" height="400" data="acc.swf">This is an object</object>
 +
</div>
 +
 +
<p>title attribute</p>
 +
<p>Acc name = "This is an object"</p>
 +
<div>
 +
  <object  width="400" height="400" data="acc.swf" title="this is an object"></object>
 +
</div>
 +
 +
<p>aria-label attribute</p>
 +
<div>
 +
  <p>acc name is "This is an object"</p>
 +
  <object width="400" height="400" data="acc.swf" aria-label="this is an object"></object>
 +
</div>
 +
 +
<p>aria-labelledby attribute</p>
 +
<div>
 +
  <p>acc name is "This is Flash"</p>
 +
  <object width="400" height="400" data="acc.swf" aria-labelledby="o1"></object>
 +
  <div id="o1">This is Flash</div>
 +
</div>
 +
</body>
 +
</html>
 +
 +
=Applet Element=
 +
<html>
 +
<body>
 +
<p>none</p>
 +
<applet code="Acc.class" width="350" height="350">
 +
 +
<p>Inner text</p>
 +
<div>
 +
  <p>acc name is "This is inner textt"</p>
 +
  <applet code="Acc.class" width="350" height="350">This is inner text</applet>
 +
</div>
 +
 +
<p>Title attribute</p>
 +
  <p>acc name is "This is an applet"</p>
 +
<div>
 +
  <applet code="Acc.class" width="350" height="350" title="this is an applet"></applet>
 +
</div>
 +
 +
<p>Alt attribute</p>
 +
<p>Acc name = "This is an applet"</p>
 +
<div>
 +
  <p>acc name is "This is an applet"</p>
 +
  <applet code="Acc.class" width="350" height="350" alt="this is an applet"></applet>
 +
</div>
 +
 +
<p>aria-label attribute</p>
 +
<div>
 +
  <p>acc name is "This is an applet"</p>
 +
  <applet code="Acc.class" width="350" height="350" aria-label="this is an applet"></applet>
 +
</div>
 +
 +
<p>aria-labelledby attribute</p>
 +
<div>
 +
  <p>acc name is "This is Java"</p>
 +
  <applet code="Acc.class" width="350" height="350" aria-labelledby="j1"></applet>
 +
  <div id="j1">This is Java</div>
 +
</div>
 +
</body>
 +
</html>
 +
 +
=Radiogroup=
 +
<html>
 +
<body>
 +
  <h2>aria-labelledby</h2>
 +
  <p>Acc name = "Preference"</p>
 +
  <radiogroup aria-labelledby="rg1">
 +
    <div id="rg1"> Preference:</div>
 +
    <label><input type="radio" name="rg1c"/>Chocolate</label>
 +
    <label><input type="radio" name="rg1c"/>Vanilla</label>
 +
  </radiogroup>
 +
 +
  <h2>aria-label</h2>
 +
  <p>Acc name = "Ice Cream Preference"</p>
 +
  <radiogroup aria-label="Ice Cream Preference">
 +
    <div> Preference:</div>
 +
    <label><input type="radio" name="rg1a" />Chocolate</label>
 +
    <label><input type="radio" name="rg1a" />Vanilla</label>
 +
  </radiogroup>
 +
 +
  <h2>title</h2>
 +
  <p>Acc name = "Ice cream Preference"</p>
 +
  <radiogroup title="Ice cream Preference">
 +
    <div> Preference:</div>
 +
    <label><input type="radio" name="rg1b"/>Chocolate</label>
 +
    <label><input type="radio" name="rg1b"/>Vanilla</label>
 +
  </radiogroup>
 +
</body>
 +
</html>
 +
 +
=Input type button=
 +
<html>
 +
  <body>
 +
    <h2>Value attribute</h2>
 +
    <p>Acc name = "submit now"</p>
 +
    <input type="button" value="submit now" />
 +
 +
    <h2>Title</h2>
 +
    <p>Acc name = "submit now"</p>
 +
    <input type="button" value="submit" title="submit now" />
 +
 +
    <h2>aria-label</h2>
 +
    <p>Acc name = "submit now"</p>
 +
    <input type="button" value="submit" title="submit now" />
 +
 +
    <h2>aria-labelledby</h2>
 +
    <p>Acc name = "submit and pay later"</p>
 +
    <input type="button" value="submit" aria-labelledby="ib1" />
 +
    <div id="ib1">Submit and Pay later</div>
 +
 +
  </body>
 +
</html>
 +
 +
=Button=
 +
<html>
 +
  <body>
 +
    <h2>inner text</h2>
 +
    <p>Acc name = "submit"</p>
 +
    <button>Submit</button>
 +
 +
    <h2>Title</h2>
 +
    <p>Acc name = "submit now"</p>
 +
    <button title="submit now">Submit</button>
 +
 +
    <h2>aria-label</h2>
 +
    <p>Acc name = "submit now"</p>
 +
    <button aria-label="submit now">Submit</div>
 +
 +
    <h2>aria-labelledby</h2>
 +
    <p>Acc name = "submit and pay later"</p>
 +
    <button aria-labelledby="bp1">Submit</button>
 +
    <div id="bp1">Submit and Pay later</div>
 +
 +
  </body>
 +
</html>
 +
 +
=Area Element=
 +
<html>
 +
<body>
 +
<h2>Alt attribute</h2>
 +
<p>Acc name for area elements "NOVA", "Central", "Tidewater"</p>
 +
<img src="virginia.gif" width="140" height="125" alt="Virginia"
 +
usemap="#virginamap">
 +
 +
<map name="virginiamap">
 +
  <area shape="rect" coords="0,0,82,126" href="nova.htm" alt="NOVA">
 +
  <area shape="circle" coords="90,58,3" href="central.htm" alt="central">
 +
  <area shape="circle" coords="124,58,8" href="tidewater.htm" alt="Tidewater">
 +
</map>
 +
 +
<h2>Title attribute</h2>
 +
<p>Acc name for area elements "NOVA", "Central", "Tidewater"</p>
 +
<img src="virginia.gif" width="140" height="125" title="Virginia"
 +
usemap="#virginamap">
 +
<map name="virginiamap">
 +
  <area shape="rect" coords="0,0,82,126" href="nova.htm" title="NOVA">
 +
  <area shape="circle" coords="90,58,3" href="central.htm" title="central">
 +
  <area shape="circle" coords="124,58,8" href="tidewater.htm" title="Tidewater">
 +
</map>
 +
 +
<h2>aria-label attribute</h2>
 +
<p>Acc name for area elements "NOVA", "Central", "Tidewater"</p>
 +
<img src="virginia.gif" width="140" height="125" aria-label="Virginia"
 +
usemap="#virginamap">
 +
 +
<map name="virginiamap">
 +
  <area shape="rect" coords="0,0,82,126" href="nova.htm" aria-label="NOVA">
 +
  <area shape="circle" coords="90,58,3" href="central.htm" aria-label="central">
 +
  <area shape="circle" coords="124,58,8" href="tidewater.htm" aria-label="Tidewater">
 +
</map>
 +
 +
<h2>aria-labelledby attribute</h2>
 +
<p>Acc name for image "virginia"</p>
 +
<div id="virginia1">Virginia</div>
 +
<p>Acc name for area elements "NOVA", "Central", "Tidewater"</p>
 +
<img src="virginia.gif" width="140" height="125" aria-labelledby="Virginia1"
 +
usemap="#virginamap">
 +
 +
<div id="va1">NOVA</div>
 +
<div id="va2">Central</div>
 +
<div id="va3">Tidewater</div>
 +
 +
<map name="virginiamap">
 +
  <area shape="rect" coords="0,0,82,126" href="nova.htm" aria-labelledby="va1">
 +
  <area shape="circle" coords="90,58,3" href="central.htm" aria-labelledby="va2">
 +
  <area shape="circle" coords="124,58,8" href="tidewater.htm" aria-labelledby="va3">
 +
</map>
 +
 +
</body>
 +
</html>
 +
 +
=Meter Element=
 +
<html>
 +
  <body>
 +
    <h2>Inner text</h2>
 +
    <p>Acc name = "3 out of 10</p>
 +
    <meter value="3" min="0" max="10">3 out of 10</meter>
 +
 +
    <h2>Title</h2>
 +
    <p>Acc name = "3 out of 10</p>
 +
    <meter value="3" min="0" max="10" title="3 out of 10"></meter>
 +
 +
    <h2>aria-label</h2>
 +
    <p>Acc name = "3 out of 10</p>
 +
    <meter value="3" min="0" max="10" aria-label="3 out of 10"></meter>
 +
 +
    <h2>aria-labelledby</h2>
 +
    <p>Acc name = "3 out of 10</p>
 +
    <meter value="3" min="0" max="10" aria-labelledby="meter1"></meter>
 +
    <div id="meter1">3 out of 10</div>
 +
 +
  </body>
 +
</html>
 +
 +
=Progress Element=
 +
<html>
 +
<body>
 +
  <h2>Inner text</h2>
 +
  <p>Acc name= "23 out of 100"</p>
 +
  <progress value="23" max="100">23 out of 100</progress>
 +
 +
  <h2>title</h2>
 +
  <p>Acc name= "23 out of 100"</p>
 +
  <progress value="23" max="100" title="23 out of 100"></progress>
 +
 +
  <h2>aria-label</h2>
 +
  <p>Acc name= "23 out of 100"</p>
 +
  <progress value="23" max="100" aria-label="23 out of 100"></progress>
  
 +
  <h2>aria-labelledby</h2>
 +
  <p>Acc name= "23 out of 100"</p>
 +
  <progress value="23" max="100" aria-labelledby="progress1"></progress>
 +
  <div id="progress1">23 out of 100</div>
 
</body>
 
</body>
 
</html>
 
</html>
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 17:42, 7 September 2017

Image

Image with aria-label and alt

hello

having an accessible name of “here”.

Image with space for aria-label and alt

hello

having an accessible name of “ ”.

Image with null for aria-label and alt

hello

having an accessible name of “hello”.

Image with aria-labelledby with multiple id refs/h2>
Hello Here

Link

Link with pseudo content

click here

has an accessible name of "click here".

Link with only pseudo content

has an accessible name of "".

Link referencing aria-labelledby with pseudo content

click here
pool

has an accessible name of "pool".

Link referencing aria-labelledby with display none including children

click here

has an accessible name of "pool location"

Link referencing aria-labelledby with visibility hidden including children

click here

has an accessible name of "pool"

Link referencing parent with aria-labelledby

Massive storm sweeps across nation click here

has an accessible name of "Massive storms sweeps across nation click here"

Link with aria-labelledby that contains some content with aria-hidden

click here

Storm

has an accessible name of "storm".

Link with aria-labelledby that contains all content with aria-hidden

click here

has an accessible name of "click here".

Link with text and span with aria-label and span with aria-labelledby

jonnot

Avila D

Has an accessible name of "Jon not".

Reference to aria-labelledby element which has aria-label

jon

Avila

Has an accessible name of "David".

Switch

Name as text content "running?"

Is your refrigerator running?
Running?

Name as aria-labelledby "Is your refrigerator running?"

Is your refrigerator running?
Running?

Name as aria-label "Fridge is running?"

Is your refrigerator running?
Running?

Name as title attribute with text content "Running?"

Is your refrigerator running?
Running?

Name as title attribute with no text content "Fridge is running?"

Is your refrigerator running?

iframe

title "SSB's homepage"

aria-label "my label"

aria-labelledby "SSB's homepage"

SSB's homepage

Input no type

Explicit label

acc name is "first name:"

Implicit label

acc name is "first name:"

title attribute

acc name is "last name:"

aria-label attribute

acc name is "Middle name:"

aria-labelledby

acc name is "SSN:"

SSN:

Input type text

Explicit Label

acc name is "first name:"

Implicit label

acc name is "first name:"

title attribute

acc name is "last name:"

aria-label attribute

acc name is "Middle name:"

aria-labelledby

acc name is "SSN:"

SSN:

Object element

Inner text

acc name is "This is an object"

This is an object

title attribute

Acc name = "This is an object"

aria-label attribute

acc name is "This is an object"

aria-labelledby attribute

acc name is "This is Flash"

This is Flash

Applet Element

none

Inner text

acc name is "This is inner textt"

This is inner text

Title attribute

acc name is "This is an applet"

Alt attribute

Acc name = "This is an applet"

acc name is "This is an applet"

aria-label attribute

acc name is "This is an applet"

aria-labelledby attribute

acc name is "This is Java"

This is Java

Radiogroup

aria-labelledby

Acc name = "Preference"

Preference:

aria-label

Acc name = "Ice Cream Preference"

Preference:

title

Acc name = "Ice cream Preference"

Preference:

Input type button

Value attribute

Acc name = "submit now"

Title

Acc name = "submit now"

aria-label

Acc name = "submit now"

aria-labelledby

Acc name = "submit and pay later"

Submit and Pay later

Button

inner text

Acc name = "submit"

Title

Acc name = "submit now"

aria-label

Acc name = "submit now"

Submit and Pay later

Area Element

Alt attribute

Acc name for area elements "NOVA", "Central", "Tidewater"

Virginia NOVA central Tidewater

Title attribute

Acc name for area elements "NOVA", "Central", "Tidewater"

aria-label attribute

Acc name for area elements "NOVA", "Central", "Tidewater"

aria-labelledby attribute

Acc name for image "virginia"

Virginia

Acc name for area elements "NOVA", "Central", "Tidewater"

NOVA
Central
Tidewater

Meter Element

Inner text

Acc name = "3 out of 10

3 out of 10

Title

Acc name = "3 out of 10

aria-label

Acc name = "3 out of 10

aria-labelledby

Acc name = "3 out of 10

3 out of 10

Progress Element

Inner text

Acc name= "23 out of 100"

23 out of 100

title

Acc name= "23 out of 100"

aria-label

Acc name= "23 out of 100"

aria-labelledby

Acc name= "23 out of 100"

23 out of 100

Retrieved from "https://labs.levelaccess.com/index.php?title=Accessible_name_calc&oldid=4369"