Gitter Channel Archive 12th of May 2016
Gitter Channel Archive 12th of May 2016
What fresh hell is THIS now? - Patrick Lauke
<div class="a-column a-span11"> <legend>Choose a shipping speed</legend> <div class="a-row shipping-speed-row"> <span class="a-declarative" data-action="set-shipping-speed" data-set-shipping-speed="{}"> <div data-a-input-name="shipment_selectshipoption_miq://document:1.0/Ordering/amazon:1.0/LineItem:1.0/1faa3cdf-d719-4a72-9857-3a3466d503b0###" data-testid="" class="a-radio no-js-hide"> <label> <input type="radio" name="shipment_selectshipoption_miq://document:1.0/Ordering/amazon:1.0/LineItem:1.0/1faa3cdf-d719-4a72-9857-3a3466d503b0###" value="std-n-us###A1AY5RZ7VATCZF###NOT_GUARANTEED###notSSS"> <i class="a-icon a-icon-radio"></i> <span class="a-label a-radio-label"> <span class="a-letter-space"></span> <span data-testid="">4-5 Business Days</span> <span class="a-letter-space"></span> <span data-testid="" class="a-color-success"></span> </span> </label> </div> </span> </div> … </div>
That's funny. I was doing a review yesterday and came across : ```<nav class="pagination" role="menubar" aria-label="Pagination">
<label>
<span class="label">Page:</span>
<li class="current">
<a>
1 </a> </li> <li class=""> <a href="/llb/shop/607?page=womens-shirts&nav=pg2-607&start=49"> 2 </a> </li> <li class=""> <a href="/llb/shop/607?page=womens-shirts&nav=pg3-607&start=97"> 3 </a> </li> <li class=""> <a href="/llb/shop/607?page=womens-shirts&nav=pg4-607&start=145"> 4 </a> </li> <li class=""> <a href="/llb/shop/607?page=womens-shirts&nav=pg5-607&start=193"> 5 </a> </li> <li class=" next"> <a href="/llb/shop/607?page=womens-shirts&nav=pgnext-607&start=49" rel="next"> <span class="offscreen">Next</span><i class="icon-right-open"></i> </a> </li> </label>
</nav>```
alt=“” over role=“presentation"
role=“presentation” is very well supported by user agents and AT
role=“presentation” communicates intention more clearly
alt=“” almost looks like a mistake
role=“presentation” has equal support, is there any reason not to use it over alt=“”?
alt=“” as it gets devs in the habit of always asking themselves what the text alternative for an image should be (nothing or something).
alt=“” as alt, so the code looks like this: <img alt src=‘image.jpg’/>. I can see how that’d be confusing.
alt attributes
alt=“” with the assumption it is dead code.
role=“presentation”, though
role=“presentation” dead code, but i often wonder if developers might remove ARIA + role properties if they don’t have a clear understanding of what they do
alt cites sighted users’ experience
alt attribute on broken src images will create a jarring experience for sighted users
src if alt=“”?
alt=“” is the first rule of aria: "If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.” https://www.w3.org/TR/aria-in-html/#first-rule-of-aria-use
role=“presentation” has more semantic value than alt=“”
img with role=presentation, but without alt="", will probably trip up some test tools.
<img style="opacity: 0">
var imageIsPresentational = (image.hasAttribute('alt') && image.alt == '') || image.getAttribute('role') == 'presentation';
"description": "Ensures <img> elements have alternate text or a role of none or presentation”,
alt=“” off and recommending they run an accessibility checker so they'll know they forgot alt text. We’re then adding context for screen reader users with an aria-label containing the original filename until the uploader adds an alt attribute. Supporting two kinds of users at once.
aria-label
aria-label because it changes the accessible name property but not the markup, so validators will still fail but the experience is the same with a screen reader?
alt text if none is specified
<img src="//d3v2mfwlau8x6c.cloudfront.net/assets/upcase/upcase-header-logo-small-74d881f2938298c588db0b7c93de56caf020a767f5981ad9919f1ab5728e278f.svg" alt="Upcase header logo small 74d881f2938298c588db0b7c93de56caf020a767f5981ad9919f1ab5728e278f">
menu and menuitem ARIA roles. That doesn't look so appropriate to me :slightly_smiling_face: