Designing an inclusive dieUX

To enjoy the full experience of this page, please enable JavaScript for this browser.

About this Project

These pages comprise the findings of Pat Godfrey's MSc UX Design 2018-2020 taken with IADT Dun Laoghaire. Pat's dissertation hypothesis is that:

"There is a gap between accessibility (research, guidelines, and education) and the inclusive design required for image contents to meet the needs of all users.

For the project, Pat's dieUX cartoon strips prove ideal to reducing complexities around their use and copyright. The dieUX cartoon website is inevitable, of course. This isn't it.

The following is a 3-minute screen-cast, which explains the focus of this project prototype website.

Website Design

Stark, isn't it? The visual design of the header (or banner), navigation, and footer is loosely based on the design of the NCBI website and is of little importance to the study.

The study focusses on the experience of images that contain complex content and copy texts. Cartoons are an entertaining way to explore the inclusive experience of images and other infographics and a workflow demonstrates a workable alternative.

User Testing

Three accessible versions of a website were tested. An identical list of tasks was issued for each version and the difference in satisfaction measured.

The test was designed for face-to-face interventions where stewardship steered participants away from distractions and encouraged them not to get stuck on tasks that they could not complete and to move on. Although the websites are fully responsive ("mobile friendly") the tests were designed to be completed on desktop as each required navigating between browser tabs, which is more difficult on smart-phones.

Candidates were arranged just before the C19 virus forced our governments to lock us all away in our homes. Luckily, I had prepared an online version for use via Facebook groups in the hope to attract people who are blind. On deployment, this proved too difficult for people using mobile devices and the results are a little skewed by the experience of changing between the survey and each web page.

Test Versions A, B, and C

The user testing websites are available at:

  1. User testing site Version A
  2. User testing site Version B
  3. User testing site Version C

Participants were asked to use each of the three versions of the websites in turn and for each one, to report on their experience when attempting three search tasks. The testing collected qualitative and quantitative measures of task performance and the impression of accessibility and UX. Full results will be published soon.

"If you don't have the occasional failure, you are not experimenting enough. One must go too far to discover how far one can go."

Petty (1998, p.422).

Findings

There's no golden egg. As always, design depends. Testing detected a 300% improvement in satisfaction in visual users between Versions A and C. As the tests replicate the experience of people who are blind this is encouraging.

What seems vital is for UX and interaction designers to step away from their wireframes and art direction and design the inclusive experience at the HTML code level first— or at the least very early in the design process. Personas of the people who experience barriers and even for each of the available screen-readers can help here.

In the dieUX case, several ARIA and WCAG 'rules' have needed breaking to achieve a comparable experience of the cartoon strip content. ( ARIA Rule Number 4 and WCAG Success Criteria 4.1.2. in particular). I don't feel bad about that. ARIA and WCAG are always developing and updating.

All I have done is to question their premise that inclusive design enables access to the visual design. It's just not true. Visual design should follow content design. That and there is a caveat to the rules buried deep in Section 6.6. of the ARIA guidelines:

"Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies".

The button is available to visual users and ARIA-hidden from screen readers to provide a comparable UX. It works.

Our design medium is HTML. We add barriers for some users when implementing ableist visual design. WCAG and ARIA may give access to the content and do they enable a comparable or equivalent experience of it? Not always—not for cartoons and infographics. There's always a compromise and it is those encountering barriers that must work hardest to overcome it

Calvin & Hobbes

While asking for feedback from Facebook groups with members who are blind, it was lamented that Calvin & Hobbes cartoons are not accessible. They join the cartoons in 50 websites I tested that are not accessible to people using screen readers. Given their complex humour and illustration dieUX has hosted three Calvin & Hobbes strips.

Find Out More

Visit my study blog to learn more about this and allied study journeys. It'll update once the dissertation is submitted and time becomes available again.

What of Infographics?

Infographics share characteristics with cartoons and differ o0nly in their reference situations compared to fictional ones (Pedrazzini & Scheuer, 2019). There are more options in their presentation than for the cartoon strips demonstrated on this site. For a flow chart, an image with an empty alt="" in-line with a list is sensible. Whether the flow chart needs separating across the list is a matter of design.

The interesting part is discovering how VoiceOver reads nested the list items, especially when those lists are created using Markdown as my writing colleagues do. Visual readability may be improved with parentheses or whitespace—whatever, there is a solution in CSS and JavaScript!

To overcome the shortfalls in audible experience, I've experimented with improving the readability of list items programatically introducing punctuation to the counters. This gives VoiceOver cause to "take a breath" between the counter and list item content. You can see work progressing in the infographic prototype and an article will be released shortly.

Feedback

I cant but share the feedback from someone who knows accessibility:

"...I looked at your site this morning...and it's quite delightful, really. You've introduced a novel concept for visual content, and I'll admit I was a little skeptical. Moving through the page with a screen reader, though, I was pleased with how clean the presentation of the cartoon strip, caption, and associated information was. All in all, I'd give it a thumbs up! Will it be an ongoing project?"

More…

From my many helpers and target audience on Facebook:

"...Worked fine for me using NVDA on Windows 10...Any chance you could add Calvin And Hobbes strips?"

"...Everything is readable with VoiceOver."

"...Firefox on window 10 pc with NVDA...I was able to hear about the comic interchange a manager and a designer about the website design"

Iterative Prototyping

Follow the iterative journey through Pat's HTML prototyping of the core interaction design required to offer accessible image content.

References

Petty, G. (1998). A Practical Guide, Teaching Today (Second Edition). Cheltenham, UK: Stanley Thomas.

Top