Your weekly frequent11y newsletter, brought to you by @ChrisBAshton:
Better accessible names
Hidde de Vries shares some great tips for naming your labels and aria-labels:
- Describe what the thing does, rather than what it looks like, e.g. “Next slide” vs “Arrow right”
- Frontload the most unique part of the thing, e.g. in a list of albums, use “Midnight Marauders – Album” over “Album – Midnight Marauders”
- Be concise: 1-3 words is ideal
- Avoid roles, e.g. use “Close” instead of “Close button”, as the role will be announced by screen readers anyway
- Keep names unique, e.g. “See also: [name of page]” vs “Click here”
- Start names with a capital letter, and don’t end with a period – names aren’t sentences. This should lead to better pronunciation by screen readers.
Which fonts to use for your charts and tables
At first glance, this blog post looks like an advert for the website it’s hosted on: Datawrapper. But it’s packed with informative and useful content, and written by Lisa Charlotte Muth – so let’s dive in. Of course, due to the subject area, some of this will be quite subjective. Your mileage may vary.
The first recommendation is to use sans-serif typefaces as a general rule, as opposed to serif ones which are most useful for long texts such as articles. Sans-serif looks cleaner and is easier to skim. You can still use serif sparingly, such as for the chart title or labels.
Next, your font choice should have lining and tabular numbers. Lining numbers all have the same height, whereas ‘old style’ numbers go above/below the line (e.g. the ‘tail’ in the number 9). The picture in the article demonstrates this much more easily than I can describe! Similarly, tabular numbers all have the same width.
Going one step further, choose a multiplexed font: one where the height and width of each character is the same regardless of whether the weight of the font is bold. This can be useful for bolding a particular row in a table, whilst still making the table look neat. Bold, by the way, should be used sparingly, to emphasise things.
There’s a warning about ensuring your chosen font supports all the glyphs you need, such as characters for specific languages (ü ß é). And also a suggestion to choose a font that is not too wide nor too thin, though it then links to some well-known exceptions to the rule, so don’t take that as gospel.
Only at the halfway point is WCAG mentioned, followed by advice about ensuring your text is big enough and has a high enough contrast. Some specific sizes and ratios are given, if you’re unfamiliar.
Finally, there’s a note about using UPPERCASE text sparingly, and the often unwanted side-effect of said text becoming much wider than before. This can be corrected through a three step process: spacing out the letters more (called ‘tracking’ or ‘letter-spacing’), decreasing the font size to make it shorter, and then making the text bolder to aim for the same letter stroke width as the original text.
Giving your future self a little credit with progressive enhancement
This article alludes to the concept of technical credit, which is the antithesis of tech debt. It is the idea that putting in some effort now will make things easier on ourselves in future.
The article describes the difference between progressive enhancement and graceful degradation, and cites some useful statistics. Around 0.2% of users ‘opt out’ of the modern web by disabling JavaScript. But at least around an extra 0.9% face pages where JavaScript simply fails to load, for whatever reason. These figures are based on a 2013 study run by Government Digital Service. The author re-ran GDS’s experiment and put the figure closer to 3% of users for whom JavaScript doesn’t load.
The author underlines the fact that these are 3% of visits, not users – so the real figure of ‘how many users fail to get some of your JavaScript?’ is probably much higher. He visualises this with an animated gif of emoji faces, representing users on their journey on your site.
The article is full of thought provoking soundbites like “An escalator can never break… it can only become stairs”. Worth a read!
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.
