Difference between revisions of "MikeS redundant markup"
Jump to navigation
Jump to search
(Created page with "<html> <body> <h2>Standard image markup</h2> <img id="back-of-id-img" alt="example of back of state ID" src="../../../../../content/ao/plcc/2.1.latest/BackOfID.svg"> <h2>Red...") |
|||
| (8 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
<h2>Standard image markup</h2> | <h2>Standard image markup</h2> | ||
| − | <img id="back-of-id-img" alt=" | + | <img id="back-of-id-img" alt="Hi I am an alt attribute" src="https://www.webaccessibility.com/wp-content/uploads/2021/05/elevin-is-free-2.png"> |
<h2>Redundant role and alt text</h2> | <h2>Redundant role and alt text</h2> | ||
| − | <img id="back-of-id-img" alt="" role="img" aria-label=" | + | <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> | + | <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
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