Skip to main content

Tab focus button in WYSIWYG widget


Talitw
Novice III

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!

 

Did this post help you find an answer to your question?

Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • October 31, 2022

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.


Talitw
Novice III
  • Novice III
  • November 1, 2022

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.


Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • November 1, 2022

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?

 


Talitw
Novice III
  • Novice III
  • November 2, 2022

@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?

 


Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • November 2, 2022

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.


Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • November 2, 2022

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.


Talitw
Novice III
  • Novice III
  • November 2, 2022

Ah I see, that clarifies it. Thank you! 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings