Difference between revisions of "MikeS redundant markup"

From Level Access Web Labs
Jump to navigation Jump to search
Line 13: Line 13:
 
<h2>Button to trigger a phone camera app</h2>
 
<h2>Button to trigger a phone camera app</h2>
  
 +
<h3>Original implementation<, VO/TB see no button/h3>
 +
 +
<label for="take-photo-input" id="take-photo-label" class="btn btn-block primaryButton">
 +
Take a Photo
 +
<input name="takePhoto" id="take-photo-input" class="visually-hidden" type="file" accept="image/*" capture="camera" required="required" data-role="none" aria-hidden="true">
 +
</label>
 +
 +
<h3>Client-suggested implementation</h3>
 
<label for="take-photo-input" id="take-photo-label">
 
<label for="take-photo-input" id="take-photo-label">
<button class=”bnt btn-block primaryButton”>Take a Photo</button>
+
<span role=”button” class=”bnt btn-block primaryButton”>Take a Photo</span>
 +
<input name="takePhoto" id="take-photo-input" class="visually-hidden" type="file" accept="image/*" capture="camera" required="required" data-role="none" aria-hidden="true">
 +
</label>
 +
 
 +
<h3>Trying to make it work</h3>
 +
<label role="button" for="take-photo-input" id="take-photo-label" class="btn btn-block primaryButton">
 +
Take a Photo
 
<input name="takePhoto" id="take-photo-input" class="visually-hidden" type="file" accept="image/*" capture="camera" required="required" data-role="none" aria-hidden="true">
 
<input name="takePhoto" id="take-photo-input" class="visually-hidden" type="file" accept="image/*" capture="camera" required="required" data-role="none" aria-hidden="true">
 
</label>
 
</label>
 +
  
 
<h4>footer</h4>
 
<h4>footer</h4>

Revision as of 21:22, 7 October 2021

Standard image markup

Hi I am an alt attribute

Redundant role and alt text

Results

TalkBack reads both images, but iOS VoiceOver only reads the standard markup version

Button to trigger a phone camera app

Original implementation<, VO/TB see no button/h3>

Client-suggested implementation

Trying to make it work

footer