Difference between revisions of "Button Element"

From Level Access Web Labs
Jump to navigation Jump to search
(Add normal button with short text)
 
(8 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<p>Welcome to SSB BART Group.</p>
+
<p>Welcome to Level Access.</p>
<button accesskey="l" onclick="javascript:window.location.assign('http://amp.ssbbartgroup.com');"> Launch AMP </button>
+
 
 +
<button accesskey="l" onclick="javascript:window.location.assign('https://amp.levelaccess.net/');"> Launch AMP </button>
 
<div>Let the Accessibility Management Platform transform how your organization handles accessibility.</div>
 
<div>Let the Accessibility Management Platform transform how your organization handles accessibility.</div>
  
Line 16: Line 17:
 
<button type="reset">This button pretends to reset the form</button>
 
<button type="reset">This button pretends to reset the form</button>
  
<hr>
+
<br>
<h1>Testing on Android - Will Remove</h1>
+
<br>
<li id="uniqName_2_4" class="mblListItem" tabindex="0" widgetid="uniqName_2_4" role="button" lang="en">
+
<button onclick="javascript:window.alert('You pressed this button!');"> This button! </button>
<div class="mblListItemRightIcon">
+
<br>
<div class="mblDomButtonArrow mblDomButton" title="">
+
<button disabled onclick="javascript:window.alert('You pressed this disabled button!');"> This disabled button! </button>
<div>
+
<br>
<div>
+
<p>A disabled button cannot be made focusable with tabindex="0":</p>
<div>
+
<button disabled tabindex="0" onclick="javascript:window.alert('You pressed this disabled button with tabindex="0"!');"> This disabled button with tabindex="0"! </button>
<div></div>
+
<br>
</div>
+
 
</div>
+
<p>Content with role="button" and tabindex="0"</p>
</div>
+
<div role="button" tabindex="0">ARIA button</div>
</div>
+
 
</div>
+
<h2> Buttons with short text </h2>
<div class="mblListItemRightText" data-dojo-attach-point="rightTextNode"></div>
+
<button>Red</button>
<div class="mblListItemLabel" data-dojo-attach-point="labelNode" style="display: block;">Personal Loans</div>
+
<div role="button" tabindex="0">Red</div>
<div class="td-ListItem-Description" style="display: none;"></div>
+
 
</li>
 
<button>Personal Loans</button>
 
 
</html>
 
</html>
 
[[Category:Elements]]
 
[[Category:Elements]]

Latest revision as of 17:31, 26 August 2022

Welcome to Level Access.

Let the Accessibility Management Platform transform how your organization handles accessibility.

Images button example

Images and text button example

Button with value

Button type reset





A disabled button cannot be made focusable with tabindex="0":


Content with role="button" and tabindex="0"

ARIA button

Buttons with short text

Red