Difference between revisions of "MikeS redundant markup"

From Level Access Web Labs
Jump to navigation Jump to search
Line 14: Line 14:
  
 
<label for="take-photo-input" id="take-photo-label">
 
<label for="take-photo-input" id="take-photo-label">
<span role=”button” class=”bnt btn-block primaryButton”>Take a Photo</span>
+
<<button class=”bnt btn-block primaryButton”>Take a Photo</button>
 
<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>

Revision as of 21:07, 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

footer