Difference between revisions of "MikeS redundant markup"

From Level Access Web Labs
Jump to navigation Jump to search
 
(6 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
<img id="back-of-id-img" alt="" role="img" aria-label="is there a good reason why VoiceOver skips over me?" src="https://www.webaccessibility.com/wp-content/uploads/2021/05/elevin-is-free-2.png">
 
<img id="back-of-id-img" alt="" role="img" aria-label="is there a good reason why VoiceOver skips over me?" src="https://www.webaccessibility.com/wp-content/uploads/2021/05/elevin-is-free-2.png">
  
<h2>fin</h2>
+
<h3>Results</h2>
 +
<p>TalkBack reads both images, but iOS VoiceOver only reads the standard markup version</p>
 +
 
 +
<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">
 +
<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">
 +
</label>
 +
 
 +
 
 +
<h4>footer</h4>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest 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

Client-suggested implementation

Trying to make it work

footer