After a few days off work, I return to deliver your weekly frequent11y newsletter. This week is quite a dev/design heavy one!
Your Image Is Probably Not Decorative
- Eric Bailey explains why most images nowadays need some form of alternative text.
- You can ‘nullify’ images – removing them from the screen reader experience – by adding an empty alt text, i.e.
<img alt="" ...>
. This should only be used when the image doesn’t convey information that is important to understanding the purpose of the page or view. - You might nullify your images in the following scenarios:
- Old layout techniques requiring ‘spacer’ images
- Where the image repeats content that is already in the page (though this could still be confusing for screen reader users who have partial vision)
- Supplemental icons (e.g.
<button><img alt="" src="icon.svg"> Print</button>
).
- Eric also explains how you can provide alt text when using CSS background images (hint: it uses the spacer gif!)
- Chris Heilmann talks about how the accessibility community holds back the accessibility movement by setting the pedestal too high.
- There are plenty of great talks about accessibility, but, apparently, many speakers don’t release their slides afterwards. Why? Because people “call out any accessibility problems with the materials”. If the content isn’t 100% accurate, or the platform has one or two of its own accessibility issues, then the materials don’t get released and people aren’t able to benefit from them.
- Chris says “I saw many conferences not release any of the materials or videos as they couldn’t caption them or host them on a platform that allows for it.” He says that some people enjoy criticising articles for the platform they are published on, e.g. “Isn’t it ironic that I can’t read your article on mobile best practices on my mobile device?”
- “On the surface, it seems to be valid criticism to call out when [presentations] fail to provide alternatives for each image and video in them. Except, it is a cheap shot and feels like a distraction from the problems the materials talked about.”
- Controversially, he suggests that not all content needs to be accessible. “What do we gain by ensuring that a presentation about how people use screen readers is accessible by a screen reader? Is that the audience? The one who already knows this information?”
From A Colourblind Designer To The World: Please Stop Using Red And Green Together
- A designer with deuteranopia – red/green colourblindness – writes about how the use of green and red in web design is problematic. Namely:
- Using colour to indicate validation status in forms. Adding other visual indicators such as icons would help to differentiate.
- Using green and red to indicate primary and secondary actions, e.g. “OK” and “Cancel”. Using fill colour just for the primary action helps to disambiguate.
- Red and green used to convey meaning in charts – literally unusable for people with colourblindness.
- If you have to use red and green in your design, choose different luminosity (i.e. make either the red or the green darker and saturated). UK traffic lights look quite similar between red and amber, but the green is very distinct because its saturation is different from the other two.
- Colourblindness affects 1 in 12 men and 1 in 200 women.
New in ARIA 1.2: ARIA IDL attributes
- Scott O’Hara writes about the new ARIA IDL (Interface Definition Language) attributes, allowing you to set element attributes succinctly in JavaScript via
foo.role = 'checkbox'
andfoo.ariaChecked = false
. Until now, we’ve had to usesetAttribute
, i.e.foo.setAttribute('aria-checked', 'false')
. - This is supported in all Chromium browsers, but currently not in Firefox.
- It’s not yet possible to set attributes in this way if they take multiple IDREFs. For example,
aria-labelledby="id1 id2 id3"
has no new corresponding IDL attribute yet.
Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.