Your weekly 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.

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.