Expand my Community achievements bar.

AEM Rich Text Editor Keyboard Accessibility

Avatar

Level 1

Hi! I am trying to navigate the Rich Text Editor in AEM with a keyboard only. When I am in the RTE I am unable to figure out how to activate the buttons for editing text (alignment, bullets, links, full screen) with the keyboard.

StephanieNa_1-1702829121762.png

 

Once in Fullscreen mode, I am also not able to access the buttons in the RTE with the keyboard.

StephanieNa_3-1702829375926.png

Is there a way to access these buttons with the keyboard? 

4 Replies

Avatar

Community Advisor

Hi @StephanieNa 
You can using arrow keys to navigate within RTE toolbar

chrome-capture-2023-12-18.gif

 



Arun Patidar

Avatar

Level 1

Thank you so much for your help, Arun! I appreciate it. The video is very useful.

 

With your help, I was able to get to the toolbar when I am in the Full-Screen RTE by pressing Shift+Tab. Then I can navigate with the arrow keys.

 

I'm still not able to use the keyboard to get from the text box in an In-Line TouchUI RTE to the toolbar. I'd like to at least be able to get from the In-Line RTE to the Full-Screen RTE with the keyboard. I'm in the WKND demo in AEM 6.5. I added a text component to my page. This is what the RTE looks like: 

StephanieNa_2-1702913309048.png

 

 

 

Avatar

Community Advisor

Hi @StephanieNa 
You have to use arrow to navigation inside inline toolbar.

As soon as inline editor is opened, you can navigation to options using right, left arrow keys

 

chrome-capture-2023-12-18 (1).gif

 



Arun Patidar

Avatar

Level 1

Yes, I am able to navigate with the arrows here to select the icons:

StephanieNa_1-1702921802137.png

 

 

After I select the first icon (pencil) to Edit above, I am unable to use the keyboard to navigate in the formatting toolbar that shows up next to chose text format (bold, italic, underline), lists, links, etc. or the Full-Screen button.

StephanieNa_2-1702921852365.png