Your weekly frequent11y newsletter, brought to you by @ChrisBAshton:

‘May be an image’: What it’s like browsing Instagram while blind

• Kait Sanchez writes about the experience of screen reader users on social media. The auto generated alt text for photos on Instagram and other sites is often poor: “two brown cats lying on a textured surface” turned out to be a woman in a wedding dress.
• Kait says that technology can’t replace the human element; a computer is never going to know you posted an image of your dog because of its hilarious quizzical expression, rather than because he is a black-and-white pitbull mix.
• Alt text hasn’t always been possible to write on social media platforms, who often play catch-up to improve their accessibility only once they gain popularity. There’s an assumption that blind people aren’t interested in visual media. But as Kait points out, culture is moulded on social networks, and it’s not fair for people to miss out on a shared social language.
• It’s easy to blame the social media users for not providing alt text, or the tech platforms for not educating them. However, content such as memes – rapidly evolving iterations of undescribed images with tiny words in weird fonts – are particularly hard to write alt text for:
  • “The funniest images rely on comedic timing through careful visual composition, prior knowledge of a specific meme, or familiarity with several different cultural references.”
  • “Writing an image description for an esoteric meme can feel like explaining internet culture to your grandparents: you suddenly don’t know how to describe what exactly made you laugh.”
• We can educate against the simpler problems though. Kent Dodds demonstrates why special characters and emojis in usernames provide a terrible experience for some social media users. “A screen reader isn’t technically incorrect if it reads a character as “mathematical bold capital,” but most sighted people will read it simply as a letter with different formatting.”

Do not assume users turn off CSS or JavaScript

• I’ve seen this before, but Stefan Judis’ newsletter pointed it out to me again.
• This is the Government Digital Service’s “service manual” on “Building a resilient frontend using progressive enhancement”.
• It maintains that we don’t support no-JS / no-CSS browsers for the sake of a minority of individuals who may disable such features. Instead, we do so to account for all manner of other circumstances, including network errors, ad blockers, firewalls and proxies, all of which can interfere with the loading and execution of CSS/JS.
• Making services work without JS or CSS makes them more accessible to a wide variety of users.

Accessibility of the section element

• Scott O’Hara writes about the <section> element, designed for representing a group of content that has an “overarching theme”. Headings within each <section> are meant to be scoped semantically within that section (you could in theory put <h1> tags inside each <section>), but in practice, nothing different gets programmatically exposed to assistive technologies.
• The only thing <section> currently does in that regard is to define an implicit role="region". However, this does not get announced to screen readers unless it is given a name, either via aria-labelledby, aria-label, or title.
• Scott recommends naming <section> elements only when absolutely necessary: “if everything’s a landmark then there’s nothing really special about them, is there?”. Instead, Scott suggests using proper heading levels to indicate sections and sub-sections of content.

Hyperlegible: an approach to accessible type design (video, 10 minutes)

• Linus Boman, who I was lucky enough to have as a housemate a few years ago, is a design expert. Here, he talks about the new Atkinson Hyperlegible Font – which he helped to develop – and which is now freely available on Google Fonts for personal and commercial use.
• The font is designed to be as accessible as possible whilst still embodying harmonious design (avoiding the trap of becoming “some kind of ransom note”, as Linus puts it).
• Linus describes how each glyph’s apertures are widened to make it easier to distinguish, and walks through other techniques such as adding serifs to differentiate between homoglyphs (e.g. lowercase L and uppercase i).
• At around 7 minutes in, the video does a particularly good job of illustrating how conditions such as blurry vision or diabetic retinopothy affect the legibility of the characters.
• Linus has quite an active YouTube channel which is definitely worth checking out further!

Link shorteners: the long and short of why you shouldn’t use them

• A blog post by the Government Communication Service.
• In the old days of social media, URLs used to count towards the character limit, so using a URL shortener was often a necessity. This isn’t the case anymore.
• Whilst these URL shorteners provide insights into how often a link is clicked, they offer little more than the social media platforms and Google Analytics offer natively.
• Short URLs provide no clue as to the content, and can’t be trusted. Some link shortening tools threaten user privacy too, installing cookies when people follow our links.
• GCS go into more detail on creating accessible links for social media:
  • One link per post (as “people who navigate via keyboard shortcuts often find it frustrating to navigate to multiple links”)
  • Clear calls to action (“Read guidance on applying for a driving license + LINK”)
  • Use capital letters at the start of each word in a hashtag, e.g. #AccessibilityAwareness. These tags are often turned into links, and assistive technologies reading the link text should read the words correctly when capitalised.

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.