Accessibility mindreset

I discovered via Francis Rubio that the Quezon City government announced website accessibility compliance, where he points out a caveat: they’re using an overlay for the text-to-speech function. So I’ll mention why accessibility overlays are a red flag as a public service announcement, via this single-serving site, Should I Use An Accessibility Overlay? by Michael Spellacy.

“People who are disabled want to be treated equally, so they expect you to design and build your website with inclusion and accessibility in mind and not to throw a band-aid on it. The only way to do that is to commit, provision for, and make accessibility a part of your process throughout the lifetime of your website.”

Another important resource on the matter—co-signed by many accessibility experts, is Overlay Factsheet.

“Given that conformance is defined as meeting all requirements of the standard, these products’ documented inability to repair all possible issues means that they cannot bring a website into compliance. Products marketed with such claims should be viewed with significant skepticism.”

Anyway, that QC Gov article has a few lingering issues:

1. The page automatically loaded in dark mode for me, which is fine, except that the text in the logo isn’t readable.
2. No alt text in the tweet announcement, and in the article on the website it’s blank (which could be fine in certain cases but I’m gonna argue that this one shouldn’t be—more on that below).
3. No text in the social share links below the article. No label for the text-to-speech icon either.

Before I go any further, I will give kudos on this effort—they set an actual goal and (mostly) achieved it. It’s all we can hope for as citizens. (deep sigh netizens? deep sigh) It’s notable because Philippine government sites are so notorious for being horrible that it’s such a meme now, let alone accessible.

But for the record, as a Web professional, I know from our friends at the Philippine Web Accessibility Group (PWAG) that accessibility initiatives have been chugging along all these years (coming up on decades), and standards compliance actually exist for government websites. (Side note: I checked out Francis’ site and he built the Philippine Consulate General of Calgary in Eleventy! See, progress!)

So if the QC Gov is really in the mindset of inclusion, and they’re talking about it in the open, then that sounds promising. You could even say it’s time to raise the bar then, right? Like not resorting to accessibility overlays? ;)

alt notes (rants)

Back to the list: the third item definitely fails accessibility compliance, while the other two are more subjective. There are probably more cases like this if you do a full accessibility audit. Example: in the People’s Corner in the homepage section, the text is white on a photo background. If that image fails to load, you won’t be able to read that text (in light mode). The View Count on the article is not labeled at all, so you’ll hear a number read out without context. Technically compliant for screen readers, but not good practice.

And that’s the problem with hand-waving human-centered concerns with automation. Yes, the images on the site have alt values, so they pass the test, but they’re not very useful to screenreader users, the real people. “Header logo” or “Quezon City Website banner image” are not descriptions, more like file names.

alt text is supposed to answer the question, “what does the image look like for someone who cannot see?”

As for blank alt values, those are acceptable if they’re decorative and don’t need to be heard by the screenreader user.

“Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:

• Visual styling such as borders, spacers, and corners;
• Supplementary to link text to improve its appearance or increase the clickable area;
• Illustrative of adjacent text but not contributing information (“eye-candy”);
• Identified and described by surrounding text.”

— World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI)

But if you ask me, an article banner should not be excluded from that as it’s typically contextual to the content. In this case, it’s a banner marking the article as a press release. In the Philippines especially, we stuff images with tons of text and post on social media this way, assuming everyone can read everything from them. I even see disability advocates who don’t use alt text in their posts.

It’s worse on the homepage where a typical image slideshow is front and center. A combined GIF of an emergency hotline and an award (why?) have the alt “Quezon City Website banner image” which is, once again, not helpful at all.

I can totally imagine how this falls through the cracks in the workflow. Because alt is considered a developer thing, it’s not going to be exposed to people assigned to publish content on the website. Or maybe they are aware but there just isn’t time to sit down and write like that. Some people will even suggest using AI to get it out of the way.

But it’s a prime opportunity to be articulate and enthusiastic about how you’re communicating to constituents. Reframe it as a visible caption to everyone perhaps? Or: Filipinos are an expressive bunch in their songs, dances, and dramas; one could argue this is just another way you can express yourself. ;)

But A11Y is harddd

Believe me, I feel you. I won’t deny that my own site is imperfect. But the least we can do is change our mindset and approach it from helpfulness rather than detached, soulless compliance. I’ve mentioned it a million times, but let’s start with that one iconic (overshared?) image from Microsoft Inclusive Design: the persona spectrum points out that disabilities can be situational, temporary, or permanent. (It’s in the guidebook, but you’ll see them in the articles below.)

“A persona spectrum is not a fake person. It’s an articulation of a specific human motivation and the ways it’s shared across multiple groups. It shows how that motivation can change depending on context. Sometimes, a trait can be permanent, like someone who has been blind since birth. A person recovering from eye surgery might temporarily have limited or no vision. Another person might face this barrier in certain environments, like when dealing with screen glare out in the sun. How would your product adapt to this range of people and circumstances with similar needs?”

— Margaret Price

“Designing for inclusivity not only opens up our products and experiences to more people with a wider range of abilities. It also reflects how people really are. All humans are growing, changing, and adapting to the world around them every day. We want our designs to reflect that diversity. Every decision we make can raise or lower barriers to participation in society. It’s our collective responsibility to lower these barriers though inclusive products, services, environments and experiences.”

— Julio Madeira

We start by realizing disability can happen to all of us, then acknowledge disability is not an unchangeable, pitiable state. We can contribute to change the conditions and make the environment more accessible, even in your tweets.