gratis web accessibility assessment: Dixon Lambtown

Lambtown, an annual festival in Dixon, CA, has gone virtual this year, 2-4 Oct 2020! Props to them for converting an experience vibrant to participants’ physical senses into a web- and app-based experience. I’ve attended twice within the past ten years, once alone and once with my child, who enjoyed seeing weavers and spinners demonstrate their skills nearly as much as I did.

Gentle disclaimer, therefore: the assessment below is meant in good faith. I’ve sent Lambtown’s info@ contact address a link to this post, as a courtesy.

My post highlights a few critical issues; it doesn’t try to cover every major usability hurdle for the site, and it’s silent about anything cosmetic. I’m most interested in what would prevent a site visitor from accomplishing one or more of these key tasks:

  1. From the home page at lambtown.org, find the vendor page.
  2. View the vendor list at lambtown.org/vendors.
  3. View the vendor profile (details) for any particular vendor.

How do I support the vendors?

This section has two major issues for keyboard navigation: being unable to access the vendor list, and being unable to reach any specific vendor’s website. Some vision-impaired folks and many folks with motor issues navigate primarily or solely by keyboard. Read more about keyboard navigation and good practice.

Vendor list

Viewing page source on the Lambtown site’s home page (visited 2 Oct 2020) suggests that the site has been built with some help from Wix‘s tools. Of note: wix.com itself encodes hyperlinks following WCAG best practice:

  1. They use the anchor tag: <a href="">.
  2. It’s possible to select a link by pressing Tab repeatedly on a standard keyboard.
  3. Related: it’s possible to see which link is currently selected (the link has focus).

Here’s what I see for the crucial vendor page—and since I’ve found the Lambtown site via Sincere Sheep’s email newsletter, I’ve left the URL campaign parameters in the screenshot (current version of Firefox on Windows 10):
Dixon Lambtown vendor page
Navigating via keyboard on the Lambtown site moves as expected across the menu items. Then it jumps down to the social links (Instagram and Facebook) in the site footer, missing the main page content entirely. For some site visitors who’d like to learn about and perhaps buy wares from any of the awesome fifty-two vendors listed there, it’d be a frustrating experience.

Trying to right-click on any part of the vendor list is blocked. It seems to have been coded as an embedded gallery, which takes it outside the normal browser page structure. Reading the page source, I eventually found a div with id="pro-gallery-container". That may be why keyboard focus cannot “find” anything in the vendor list.

Fixing this issue—making the vendor list available to people who navigate websites via keyboard—would require coding the vendor list in a different way.

Screen readers and the vendor list

NVDA, a screen-reading app commonly used by some low-vision and non-sighted folks on Windows desktops/laptops, can “find” the gallery containing the vendor list. That’s great. VoiceOver on iOS can find and read the web vendor list, too (iOS 13, iPhone SE). I’ve checked only minimally whether the screen-reading app names specific vendors when instructed to read the web page top to bottom.

Unfortunately, TalkBack on Android cannot find the vendor list or the site menu. For both the Chrome and Opera Mini browsers, TalkBalk reads the page title on loop when asked to read the whole page starting from the top. If the user scrolls to make the gallery items visible and selects one vendor thumbnail for TalkBack to read, then TalkBack reads the text successfully—but it isn’t possible to tap through and open the vendor profile overlay (Android 11, Pixel 3a).

Vendor profile overlay

Let’s say our imagined site visitor can click or tap through successfully to a vendor profile. The screenshot below is for Shaggy Bear Farms (current version of Chrome on Windows 10):
Dixon Lambtown: Shaggy Bear Farms vendor profile overlay
Though http://shaggybearfarm.com is underlined in the profile overlay and looks like a link, neither Chrome nor Firefox interprets it as one, as shown by the non-link context menu in the screenshot. Right-clicking on a link in Chrome would show a different set of contextually relevant options.

More to the point, someone navigating by keyboard can’t tell when they’ve selected the link, and thus can’t use the link to visit the vendor’s website. They’d have to retype it, which risks error.

To fix: add focus so that people and assistive apps can detect when a link has been selected.

Screen readers and vendor profiles

NVDA can find and read the profile overlay for a given vendor.

Neither VoiceOver on iOS nor TalkBack on Android can find the overlay. VoiceOver describes content and buttons below the overlay, confusingly. Thus, the link to a vendor’s site is not available at all to lambtown.org users using a screen reader on most mobile phones.

To fix: consider making the vendor profiles into individual pages. Most of the issues flagged in my post arise from how the gallery and its overlay are coded.

Less critical issues

Page structure

I’ve used WebAIM’s WAVE tool to check the vendor page as well as one vendor profile. WAVE reports no errors!—but it cannot detect any content in the gallery (the vendor list) or on the overlay. WAVE also cannot detect the Lambtown site menu. With almost no page content available to WAVE, the lack of error is meaningless, though it is reassuring to know that the site header (including cart) and the site footer are well formed.

What WAVE does detect is shown in these two screenshots:
WAVE alert detail for Lambtown vendor page WAVE structure warning for Lambtown vendor page

  1. WAVE flags the lack of a primary heading. The “main heading” is h4, which makes it seem to a screen reader-assisted person that something is missing.
  2. WAVE declares itself unable to detect the page structure. The expected markup for the “2020 Vendors” heading centered above the vendor list is h2. The page as presented currently has an implied h1 at the top, “Lambtown Festival”— though it is confusingly marked up as h6.

Menu visual feedback

Going back to my first screenshot: if the vendor page is our current page, in the menu we’d expect “2020 Vendors” to be selected (correct) and for “Home” not to be (oops). Having two menu items show visible selection—in the site’s styles, lighter text on a darker background—is potentially confusing for any user, low-vision or not.

Why is there a PDF link?

The “2020 Vendors” heading is linked to a PDF containing the workshop schedule. Expected: a link from the Workshops page instead, or no link if it’s not meant to be a public document.

What about the Lambtown apps?

I’d planned not to investigate the apps, since Lambtown will be over by the time I could take a look. Then I noticed that the one iOS review (at time of writing) mentions accessibility issues. Though I won’t try to assess the CrowdCompass-hosted web app in full (it doesn’t solve the keyboard-nav or focus issues—it has different ones!), look for mobile app remarks in a future post.

The review is dated 14 Sept 2020 and says,

Accessibility issue?
I really want to like this app since I support the small businesses that rely on this festival for their income. However, I am having such a difficult time progressing through the set up process. I have to keep trying over and over to select the Next option at the bottom right of the screen. Is it because my text and screen settings are large? 🤷‍♀️

Lambtown app review, 14 Sept 2020, Apple App Store

Learning more about web accessibility

There are many web-based resources. Three good places to start: