Chris Ashton

fortnight11y issue 51

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

The endless search for “here” in the unhelpful “click here” button

  • Eric Bailey articulates all the reasons why you should stop using links and buttons with the text value “here” or “click here”. This is such a common mistake across the web and is a habit we need to break out of.
  • Compare the following two sentences:
    1. Click here to learn about how to roast Brussels sprouts
    2. Learn how to roast Brussels sprouts
  • The former makes no sense out of context. If a screen reader user pulls up a list of all links in the page, they’re not going to know what “click here” is referring to. “How to roast Brussels sprouts” is the main action, and makes sense on its own. The latter also has a greater surface area to click on. Finally, some users activate links by saying the name of the link; the latter works well for that, whereas the former would be problematic if there were several links called “click here”.
  • Now consider these instructions: “Click the button below”. There are two problems here:
    • “Click” only makes sense in a desktop/laptop mouse context. It doesn’t make sense for keyboard or touchscreen users. Yes, they’ll probably still understand what to do, but that doesn’t mean we can’t use more universal language, such as “Select”.
    • “Below” is also problematic. What if our content has been translated into a vertically-oriented language, and therefore makes no sense? What if the design is different for desktop, such that the link ‘below’ is actually to the side? What if we’re reading this in VR – does “below” now mean someone will think it’s underneath them? The web is a highly malleable place. Better to use language like “next/previous” or “following/preceding”.
  • Eric ends by pointing to the proposed CSS Logical Properties module. This favours “start/end” properties rather than the more traditional “top/right/bottom/left”, as the latter have an implicit default writing mode of left-to-right & top-to-bottom – not a good look for a global technology.

WebAIM guidance on Alternative Text

  • This guidance was given a fresh update in October 2021, so I’m reading it anew.
  • “Although technology is getting better at recognizing what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page. A maple leaf might represent Canada, or it might just illustrate the leaf of a tree.”
  • There are several examples of good vs bad alt text, and clarifications around when an empty alt text is appropriate. But I knew that already, so have cherry-picked some of the more interesting content in the points that follow.
  • Other than the alt attribute, “alternative text can be presented within visible body text near the image” or even “on a separate page, linked from either the image or a text link adjacent to the image” (but only “when the text equivalent cannot be presented succinctly”). Note that the longdesc attribute is deprecated and should not be used.
  • A trip down memory lane: image maps. The main image associated with the <map> must have an alt attribute that describes the content within the image, but is not otherwise presented with each image map hot spot. For example, a State of New York map that has an <area> for each county might have alt="Counties of New York", whereas its hot spots would each have an alt attribute containing the name of the county. If the main image does not convey content (just a container for the hot spots), then alt="" is appropriate.
  • Finally, a note on <figure> and <figcaption>. The <img> within the <figure> must have non-empty alt attribute, which should not just be a repeat of the <figcaption> contents. I was surprised by this, so I read the linked How do you figure? blog post by Scott O’Hara. Some highlights from that post:
    • “One of the biggest misunderstandings of using a figcaption is that it’s used in place of image alternative text”.
    • “A figcaption is meant to provide a caption or summary to a figure, conveying additional information that may not be directly apparent from reviewing the figure itself. If an image is given an empty alt, then the figcaption is in effect describing nothing. And that doesn’t make much sense, does it?”
    • Moreover, using an empty alt="" on the image causes serious screen reader issues. It’s essentially the same as an <img alt="" /> anywhere else in the page; in other words, it’s treated as decorative, and ignored by the screen reader. So an empty alt="" will mean your entire <figure> gets skipped over.

VR Game Gravitational Blends Puzzles With Real Accessibility Challenges

  • Electric Monkeys Studio has built a VR game set in the future, in a scientific facility where gravitational technology is being discovered. The protagonist, Sebastian, uses a wheelchair, presenting an extra challenge in navigating the environment after an explosion destroys much of the facility, as you have to find ways around obstacles in your path.
  • It’s promising to see more representation of wheelchair users, adding to games like Life is Strange and Sly Cooper. In November 2020, Bethesda added wheelchairs to Fallout 76 after a fan asked the developer to add her aid to the game.
  • The article lacks detail on the gameplay, but there are a few reviews on Steam. Whilst there are complaints around the graphical quality and the controls, one positive reviewer goes into detail about some of the accessibility constraints forced on the player, which I thought was interesting:
  • “You can’t look around very much without seeing the start of ‘tunnel vision’ and colors fading, and a red icon reminding you to push a button to re-orient. I accept this because a person with paralysis mainly turns their head, not their body. In real life, such a person has to make big adjustments just to see in a different direction. Yes, it’s annoying, and holds you back. I accept it as simulating part of what it feels like to be this person.”
  • As a VR player myself, one of the most immersion-ruining aspects is movement. Pressing a button to walk or run kind of pulls you out of the experience (and can cause motion sickness), so to have a game where being seated matches what your character is doing, is quite a clever solution to the problem.

Adding A Dyslexia-Friendly Mode To A Website

  • Smashing Magazine article by John C Barstow. I thought this was going to be one of those “choose a dyslexic-friendly font” type article, but it covers a lot more than that!
  • According to John, “research shows that standard fonts like Helvetica and Times New Roman are just as readable as purpose-built fonts like Dyslexie or Open Dyslexic”. He goes on to clarify that the most important factor is the spacing between letters and words. The reason fonts like Comic Sans are so popular with dyslexic readers is the wider spacing found in that font.
  • We can increase the letter spacing of our chosen font using the ch unit, which is based on the size of the 0 glyph – often a good approximation of the average character width. John comes up with this CSS: .dyslexia-mode { letter-spacing: 0.35ch; word-spacing: 1.225ch; }, which gives a 3.5x letter spacing.
  • Ligatures are when multiple characters are merged into a single glyph; you’ll often see this when “f” and “i” are rendered next to one another, forming a joined-together “fi”. Dyslexic readers may struggle with ligatures, so we can disable the feature with font-variant-ligatures: none, though this may be disabled automatically by some browsers when the letter spacing is set high enough.
  • I learned about Heydon Pickering’s owl selector (* + *), which can be used to apply consistent line-spacing, e.g. * + * { margin-top: 1.5em }.
  • John finishes up by applying a slightly bigger font weight to his text, to counteract the extra whitespace (font-weight: 600, which is “demi-bold”, apparently). He also applies style to his bold text, to differentiate it from the demi-bold regular text: .dyslexia-mode strong { color: #000 }.
  • There’s also a tip around avoiding unnecessarily distracting elements, such as background images, for which you can use the :not pseudo-class. Example: body:not(.dyslexia-mode) main { background-image: url("...") }.
  • The article concludes with a CodePen showing the before-and-after. The comments below the article are also worth a read.

Collaborative planning, the forgotten step of accessible development

  • A deque article describing “a11yBID”, or “Accessibility Business Informed Development”.
  • It’s essentially BDD (“Behaviour Driven Development”), in that it involves conversations between stakeholders and cross-functional team members to define Acceptance Criteria (AC), often in a formatted plain language format called Gherkin.
  • a11yBID is different to BDD as it “doesn’t discover classic business requirements as BDD does. Instead, it clarifies the accessibility-specific aspects of those business requirements”.
  • Starting with high-fidelity designs (i.e. PDFs), the process begins with an “a11y Amigos” meeting between the designer, the tester and the business analyst. The group reviews the design from an a11y perspective, asking questions around focus management etc, and drafting the “a11yAC” user stories. Here is an example of one:
    • Scenario: A blind screen reader user can understand that content is loading
    • Given I am a blind screen reader user
    • And I have submitted the form
    • And a loading spinner is visible as I await a response from the server
    • When I navigate to the loading spinner image
    • Then I hear the image role
    • And I hear the alt text as “loading”
  • The article concludes with some general advice to make a11yBID scale. For example, making use of a design system and component library, so that you can reuse tried-and-tested designs.

The CSS “content” property accepts alternative text

Niagara-made audio game nominated for accessibility Game Award

  • The Vale: Shadow of the Crown, by Falling Squirrel games company, is an audio-only game, released in August 2021.
  • The game gained a nomination at this year’s Game Awards (which was watched by 80 million people in 2020).
  • I found a more informative article on digitaltrends, which notes that the games origins weren’t “altruistic” in nature; the studio director simply didn’t have any design experience, so wanted to build a game on a scale that he could afford!
  • “The story centers around Alex — a feisty, intensely brave, and blind princess — and her companion, Shepherd, and their journey to save their realm from destruction”. The game uses 3D audio technology and controller feedback to immerse the player in the story. There are no visuals other than the menu, which can also be navigated by audio only, i.e. this game is fully accessible to visually impaired players.

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.