Accessibility in Reality: Pro Helvetia, a Swiss case study

Problem

“The linked site logo must have an alternative text that reflects the dual function of the logo (conveying the sender’s identity and indicating the destination of the link).”

The Pro Helvetia logo used to have an alt text saying “Logo of Pro Helvetia” and an anchor element around it, linking to the home page. Both not wrong, but a mistake when you combine them like this. Screen readers will say: “Link, Logo of Pro Helvetia”, which does not tell you that the link is leading to the home page. Instead, you might think it leads to a raw logo file.

<a href="[…]">
  <img alt="Logo of Pro Helvetia" />
</a>Code language: HTML, XML (xml)

Solution

In the accessibility review, this solution was suggested: Adding the string “… back to homepage” to the logo’s alt text.

<a href="[…]">
  <img alt="Logo of Pro Helvetia, back to homepage" />
</a>Code language: HTML, XML (xml)

This is a perfectly fine solution. We chose another one, that also works: Adding an aria-label attribute to the anchor element, saying “Return to home page of Pro Helvetia”, and leaving the alt attribute of the image intentionally empty. When aria-label is present, screen readers will ignore the logo’s alt text, either way.

<a href="[…]" aria-label="Return to home page of Pro Helvetia">
  <img alt="" />
</a>Code language: HTML, XML (xml)

Learning

Images need alt texts and links need link texts. Linked images might serve as link texts.

Problem

“The frequently searched terms are visually grouped with the heading ‘Suggestions’, but it is not formatted as a legend to a fieldset.”

In the search modal, there are frequently-searched terms as search suggestions. They are labelled as “Suggestions”, but this relation was not that obvious in the source code. The text was just a paragraph element, followed by an unordered list of inputs.

<div class="[…]">
  <p class="[…]">
    Suggestions
  </p>
  <ul class="[…]">	
    <li>[…]</li>   
    <li>[…]</li> 
    <li>[…]</li> 	
  </ul> 
</div>Code language: HTML, XML (xml)

Solution

Simply replacing div and p with a fieldset and legend. The latter two elements have a clear semantic relation to each other. (Source: https://www.w3.org/WAI/tutorials/forms/grouping/)

<fieldset class="search-suggestions">
  <legend class="search-form__label">
    Suggestions
  </legend>
  <ul class="search-suggestions__list">	
    <li>[…]</li>
    <li>[…]</li>
    <li>[…]</li> 	
  </ul> 
</fieldset>Code language: HTML, XML (xml)

Learning

p‘s don’t label anything. legend‘s label fieldset‘s.

This is a great segue into HTML semantics, the topic of our next example.

Problem

“The newsletter registration and the footer content are visually clearly separated, but semantically subordinate to the last preceding heading, to which they do not belong.”

The home page had a general h1, followed by a h2 for the news section called “What’s on” and then individual h3‘s for the single news posts. The last h3 “Stay up to date”, however, belonged to the newsletter form and was not supposed to be a subheading of “What’s on”.

<h1>Welcome to Pro Helvetia</h1>
  <h2>What's on</h2>
    <h3>Pavillon of …</h3>
    <h3>Illustration …</h3>
    <h3>How do cross …</h3>
    <h3>Annual report …</h3>
    <h3>Sélection …</h3>
    <h3>She Got Game …</h3>
    <h3>Rewilding the …</h3>
    <h3>Interview with …</h3>
    <h3>Stay up to date</h3>Code language: HTML, XML (xml)

Solution

In the Block Editor we can easily change the heading from h3 to h2. There we can also make sure that it does not change its appearance and keeps looking the same as before.

<h1>Welcome to Pro Helvetia</h1>
  <h2>What's on</h2>
    <h3>Pavillon of …</h3>
    <h3>Illustration …</h3>
    <h3>How do cross …</h3>
    <h3>Annual report …</h3>
    <h3>Sélection …</h3>
    <h3>She Got Game …</h3>
    <h3>Rewilding the …</h3>
    <h3>Interview with …</h3>
  <h2>Stay up to date</h2>Code language: HTML, XML (xml)

Learning

Always check your headings in the context of the whole page. Separate visual presentation from structural hierarchy.

Problem

“The button for triggering the search is labelled ‘Send’, which is not useful.”

The search modal has a search button, that is represented by the often-used magnifying glass icon, but the hidden screen reader text simply said “submit”. Without seeing the icon, it was not clear what submitting the button would do.

<button type="submit">
  <span class="screen-reader-text">Submit</span>
  <svg>[…]</svg>
</button>Code language: HTML, XML (xml)

Solution

Changing the text to “search”, or even “find”.

<button type="submit">
  <span class="screen-reader-text">Search</span>
  <svg>[…]</svg>
</button>Code language: HTML, XML (xml)

Learning

Label your interactive elements with words that describe what they actually do. Look out for hidden stuff.

This is a classic case where we did not mislabel the button on purpose. But because it was a hidden text, it was easily overlooked during development.

Problem

“If the adjustment of the filter dropdowns leads to an automatic update of the number of results, screen reader users must be informed of this.”

When we filter through Pro Helvetia‘s funding opportunities, the number of results is dynamically updated. This information is easy to notice for visual users, but harder to perceive if you rely on a screen reader.

This problem, in theory, would be more complex to solve than the previous ones because it relies on JavaScript. But as I said earlier, we made a smart decision by choosing WordPress as our CMS in regards of accessibility.

Solution

Just import the package @wordpress/a11y, one of many pre-built WordPress utility JavaScript modules. This easily implements a so-called “live region” that announces updates to screen readers, simply by calling a function speak().

import { speak } from '@wordpress/a11y';

speak(
  sprintf(
    _n(
      '%s result found.',
      '%s results found.', 
      results.length,  
      'ph-one-factsheets'
    ),
    results.length
  )
);Code language: JavaScript (javascript)

Learning

When you do client-side modifications with JavaScript, announce what you are changing to screen reader users. In complex cases, look for pre-built utilities.