Skip to main content

Hello! I’m creating some WYSIWYG widgets to add multiple buttons to a single background. However, we flagged that these elements do not automatically add a focus indicator as required by accessibility guidelines. This references WCAG criterion 2.4.7 Focus Visible (Level AA). When I try to add the tabindex=”0” to the HTML and include the focus, Docebo’s editor strips it out. This is definitely an accessibility problem, and affects those not using a mouse to navigate the page. Has anyone come across a solution, or workaround, for this problem? I’m currently unable to make changes through the main platform CSS, so need to get the tab focus directly in the HTML elements on the WYSIWYG pages.

 

Thank you!

 

Any chance you can post example of the broader code you are working on, depending upon how you are approaching it can have different recommended paths/answers.

Hi @Bfarkas thanks, I’ll post an example code of what I was trying to accomplish: 

<div style="padding-bottom:1rem;padding-left:0.75rem;">
<a href="https://linkaddress"><img src="https://linkaddress" alt="These Skills" height="43" tabindex="0"/></a>
</div>

The attribute tabindex= “0”  is getting stripped on page save (though funnily enough not on widget save). It’s a problem because I cannot get a focus to appear around the buttons or links I’ve added into the WYSIWYG editors. Any workarounds or solutions you’ve come across would be much appreciated.

Ah, so that is actually working for me tabbing, no tabindex needed (which is good since your page has other elements out of your control that would have different tab index numbers), the problem for me is that there is no style to change the image in any way when it is in focus.

Unfortunately that requires a pseudo class in CSS to fix, :focus, and is not able to be placed using inline CSS. I know you said you don’t have access to the master area but in this particular case, can you put a request in to have this update system wide?

 

@Bfarkas I think we do have an organization wide class for focus - other elements of the page do show the focus indicator (for example breadcrumbs, catalog stream items), but the problem comes in that I can not apply that focus to the custom WYSIWYG editor, if I’m understanding correctly?

 

No, the issue I was having was the focus for an image is usually a different style than for text and I did not have one defined, once I did it showed. Prior to defining I could carefully tab in sequence and if I hit enter when I thought it was on it, it would open the link as expected.

Put another way, it is because you are setting an image as the link object and needs a focus style for that. If you have one, maybe a class needs to be applied to your link to pick it up.

Ah I see, that clarifies it. Thank you! 

Reply


Terms & ConditionsCookie settings