<h1>Input + Link Title Tests</h1>

<h2>Test 1: title + acc name have diff caps</h2>
<p><a href="/"
    aria-label="Home"
    title="home"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g><path d="M812.8,948.8H174.4c-17.8,0-32.2-14.4-32.2-32.2V370.8h64.4v513.5h573.9V370.8H845v545.8C845,934.3,830.6,948.8,812.8,948.8z"/><path d="M957.8,533.2c-7.7,0-15.5-2.7-21.7-8.3L496.5,127.1L64,524.7c-13,12.1-33.4,11.3-45.5-1.9c-12.1-13.1-11.1-33.5,1.9-45.6L474.5,59.7c12.2-11.2,31.1-11.3,43.4-0.1l461.5,417.5c13.1,11.9,14.2,32.3,2.3,45.5C975.3,529.6,966.5,533.2,957.8,533.2z"/><path d="M625.2,832.6h-64.4V619.1H426.5v213.5H362V586.9c0-17.8,14.4-32.2,32.2-32.2h198.7c17.8,0,32.2,14.4,32.2,32.2L625.2,832.6L625.2,832.6z"/></g>
</svg></a>
</p>
<label for="un1">User name</label>
<input type="text" title="User name" id="un1">



<h2>Test 2: title + acc name are exactly the same</h2>
<p><a href="/"
    aria-label="Home"
    title="Home"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g><path d="M812.8,948.8H174.4c-17.8,0-32.2-14.4-32.2-32.2V370.8h64.4v513.5h573.9V370.8H845v545.8C845,934.3,830.6,948.8,812.8,948.8z"/><path d="M957.8,533.2c-7.7,0-15.5-2.7-21.7-8.3L496.5,127.1L64,524.7c-13,12.1-33.4,11.3-45.5-1.9c-12.1-13.1-11.1-33.5,1.9-45.6L474.5,59.7c12.2-11.2,31.1-11.3,43.4-0.1l461.5,417.5c13.1,11.9,14.2,32.3,2.3,45.5C975.3,529.6,966.5,533.2,957.8,533.2z"/><path d="M625.2,832.6h-64.4V619.1H426.5v213.5H362V586.9c0-17.8,14.4-32.2,32.2-32.2h198.7c17.8,0,32.2,14.4,32.2,32.2L625.2,832.6L625.2,832.6z"/></g>
</svg></a>
</p>
<label for="un1a">User name</label>
<input type="text" title="User name" id="un1a">



<h2>
	Test 3: Acc name + title convey diff info
</h2>
<p><a href="/"
    aria-label="Home"
    title="go back home"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g><path d="M812.8,948.8H174.4c-17.8,0-32.2-14.4-32.2-32.2V370.8h64.4v513.5h573.9V370.8H845v545.8C845,934.3,830.6,948.8,812.8,948.8z"/><path d="M957.8,533.2c-7.7,0-15.5-2.7-21.7-8.3L496.5,127.1L64,524.7c-13,12.1-33.4,11.3-45.5-1.9c-12.1-13.1-11.1-33.5,1.9-45.6L474.5,59.7c12.2-11.2,31.1-11.3,43.4-0.1l461.5,417.5c13.1,11.9,14.2,32.3,2.3,45.5C975.3,529.6,966.5,533.2,957.8,533.2z"/><path d="M625.2,832.6h-64.4V619.1H426.5v213.5H362V586.9c0-17.8,14.4-32.2,32.2-32.2h198.7c17.8,0,32.2,14.4,32.2,32.2L625.2,832.6L625.2,832.6z"/></g>
</svg></a>
</p>
<label for="un">User name</label>
<input type="text" title="your user name is your email" aria-describedby="teste">

<h2>
	Test 4: Acc name + title convey diff info + aria-describedby
</h2>
<p><a href="/"
    aria-label="Home"
    title="go back home" aria-describedby="tested"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g><path d="M812.8,948.8H174.4c-17.8,0-32.2-14.4-32.2-32.2V370.8h64.4v513.5h573.9V370.8H845v545.8C845,934.3,830.6,948.8,812.8,948.8z"/><path d="M957.8,533.2c-7.7,0-15.5-2.7-21.7-8.3L496.5,127.1L64,524.7c-13,12.1-33.4,11.3-45.5-1.9c-12.1-13.1-11.1-33.5,1.9-45.6L474.5,59.7c12.2-11.2,31.1-11.3,43.4-0.1l461.5,417.5c13.1,11.9,14.2,32.3,2.3,45.5C975.3,529.6,966.5,533.2,957.8,533.2z"/><path d="M625.2,832.6h-64.4V619.1H426.5v213.5H362V586.9c0-17.8,14.4-32.2,32.2-32.2h198.7c17.8,0,32.2,14.4,32.2,32.2L625.2,832.6L625.2,832.6z"/></g>
</svg></a>
</p>
<label for="un4">User name</label>
<input type="text" title="your user name is your email" aria-describedby="testie" id="un4">
<br>
<span id="tested">new desc</span>
<span id="testie">new desc</span>
a {display: inline-block;
  height: 20px;
  width: 20px;
  border: 1px solid #333;
padding: 8px;}

a:hover,
a:focus {border-color: blue; outline: 2px solid blue;}

button { min-height: 20px; min-width: 20px; border: 2px solid; }


input:focus { outline: 2px solid blue; box-shadow: none;}
View Compiled
/** 

Test Results:

Test 1: 

Accessible name and title are the same, with only capitalization differences 

e.g. home vs Home

NVDA
If a `title` and the accessible name for an element have the same value, but have variations in their capitalization or punctuation, when tabbing or using quick keys with NVDA, most screen reader and browser pairings will announce both the accessible name and the title attribute. Only IE11 links, and FireFox inputs recognize the redundant values and make a single announcement.

When using arrow keys to navigate content, all browsers and NVDA provide a single announcement.


JAWS18
Under the same test, JAWS primarily recognizes the redundant accessible name and title values, and provides a single announcement for inputs, and links accessed by arrow keys.  However, JAWS will announce both the accessible name and title attribute in IE11, Chrome and FireFox, when a link is accessed via the tab key, even if the values are the same with only capitalization differences.


VoiceOver
In Safari and Chrome on desktop, and mobile Safari, links and inputs consistently announced both the accessible name and title values even though they were the same with only capitalization differences.



Test 2:

Accessible name and title are exactly the same

NVDA

When navigating by the tab key, FireFox treats links and inputs with identical accessible names and title values as a single announcement. IE11 will do the same for links.

All other browsers for links and inputs, and IE11 for inputs, will announce both the accessible name and the title value, even though they're the same.

JAWS18 will treat each link and input with identical accessible names as a single announcement, when accessed via tab key or arrow keys.


VoiceOver

On both desktop and mobile, links with identical accessible names and title values are treated as a single announcement.  Inputs announce both the name and the title separately even though they're the same.



Test 3:

Accessible name and title convey different values

NVDA

For links and inputs that have an accessible name and a title attribute with a different value, NVDA will announce both the accessible name and the title for these elements, when tabbed to, with the exception of IE11 which only announces the accessible name for a link.

Using the arrow keys to navigate to links, only the accessible name is announced in all browsers.


JAWS18
JAWS will also annonce the accessible name and title for links and inputs, except when in Edge. In Edge inputs do not announce their title attribute when tabbed into.

When using arrow keys to navigate to links, only the accessible name is announced.


VoiceOver

On desktop with safari and chrome and with mobile Safari, VoiceOver announces the accessible name and title when interacting with links and inputs.



Test 4: 
Accessible name and value convey different values, with an aria-described by

NVDA

Tabbing to links and inputs in all browsers resulted in NVDA announcing the accessible name and aria-describedby value. Title was ignored.

Using arrow keys to navigate to links only resulted in the accessible name being announced.


JAWS18

All browsers, except latest Edge, announced the accessible name and aria-describedby when tabbing to links or inputs.

Edge only announced the accessible name.

Using arrow keys to navigate to links only resulted in the accessible name being announced.


VoiceOver

VO + Safari on desktop and mobile, and Chrome on desktop all announced the link and input's accessible names and aria-describedby values when these elements were interacted with.



*/
Rerun