Accessibility of various components

General Help
1

Hi! Can you advise why the following components are deemed not accessible?

  • Hotgraphic
  • Infographic
  • Media Carousel

We are asking from a technical perspective, not from a user experience perspective. We have people who can provide great insights into user experience. Our first hurdle is ensuring that the component is technically accessible.

Thank you in advance!

2

Hi Anne,

From my experience:

Hotgraphic - if using the screen reader, the user won’t know where the clickable icons are positions in relation to the image. Say, if it is a diagram that describes a process. The user won’t know which icon refers to which part of the image.

Infographic - it is image with text. Unless a transcript is provided, this won’t be accessible.

Media carousel - It has got some settings that may enable automatic image change. The user needs to be able to control it themselves (without timers or loops)

I am sure others will have more to add to this topic.

Thanks

2 Likes
3

So first off I would say it’s worth reading my response to another post on accessibility here as that gives more background on the whole ‘not accessible’ thing and the ongoing work on accessibility in Evolve.

With Media Carousel, it’s partly down to the fact that it’s a ‘carousel’ style interaction; these are really hard to make accessible. I would argue that even the WAI ‘best practice’ example of an accessible carousel isn’t a great experience - and that’s just with text/graphic carousel items…

Even for users without accessibility requirements, carousel interactions are typically considered a problematic UI experience.

All three of these components are further complicated by the sheer number of configuration options available - this makes it nigh-on impossible for us to guarantee that all possible configurations would be accessible*

Infographic has an additional issue in that, in order for the animation functionality to work, it doesn’t start rendering until it has scrolled into the viewport by a certain amount, this unfortunately messes up keyboard accessibillity so that’s an immediate fail of Level A… this is something we’d like to address but again there’s so much complexity in this component due to the sheer number of configuration options, it’s pretty challenging to do, especially whilst maintaining backwards-compatibility.

* that said, if you set up Media Carousel with each item just consisting of text and/or graphic it’s generally a pretty good accessibility experience (except perhaps in NVDA, but that’s NVDA for you…! )
To a similar extent Hot Graphic can also be set up so that it works pretty well, so long as you don’t enable these settings:

  • Show Popup as carousel
  • Tooltip items
  • Display item inline

Hope this is useful info.

3 Likes
4

Thank you both. We don’t use the carousel for its “carousel” feature - the learner has control to move forward or backward. As Matt mentioned, media carousel is simply text and a decorative graphic. Heh - noted that NVDA can be problematic, bless its heart. We don’t animate Infographic, so the issue of rendering until it has scrolled into the viewport by a certain amount isn’t a concern. I think we’re quite vanilla in our use of Hotgraphic and Infographic. We’re going to have these components tested internally; I will come back here with any useful information.

5

Unfortunately the ‘don’t render until it has scrolled into the viewport’ problem exists even if you’re not using animations. The problem occurs if you’re navigating using the keyboard without using a screenreader - mainly because when you’re using the tab key to navigate it only sets focus to clickable elements, so you can easily get into a situation where it skips over the Infographic component completely.

1 Like
6

Sorry I should have been clearer there, carousels can be problematic even if they are not automatically navigating through the items, particularly if the carousel item contains something interactive - which either requires the user to navigate backwards after clicking the ‘next/forward’ button* or for the component to automatically set focus back to something within the Carousel Item every time one of the navigation buttons is selected - which is generally considered to be something you should avoid doing unless it’s absolutely necessary - though I can see an argument that this might be a situation where it is appropriate.

* that reminds me - each Media Carousel item has an ‘Item ARIA Label’ field which you can use to prompt the learner to navigate backwards to access the content of an interactive carousel item.

7

Ahhh, thanks for the heads up.

8

Really interesting and useful thread, thanks Matt and Anne!

1 Like