Xippo / OM-Cookie-Manager

TYPO3 Extension - OM Cookie Manager | Feats: Consent Panel (Optin), Grouping and Google Tag Manager support
GNU General Public License v3.0
10 stars 9 forks source link

Keyboard Accessibility #22

Open fgeierst opened 1 year ago

fgeierst commented 1 year ago

Currently the cookie panel is inserted at the end of the DOM. If you are a screenreader user or a keyboard user you need to tab through all focusable elements of the page to finally get to the cookie panel at the very end. Only then you can make your choice and with that close the panel. Depending on the page it is likely that you need to tab through links/buttons that are visually hidden behind the cookie panel.

There are several ways to improve this, reading https://uxdesign.cc/cookie-banners-and-accessibility-d476bf9ee4fc and watching a screenreader user interacting with cookie panels https://www.youtube.com/watch?v=Uaqo4FOI_DY (especially from min 11), I think the best practice would be to follow the Alert Dialog pattern (https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). That is to make the cookie banner the first thing on the page and trap the focus inside of the panel. Only after the user has clicked on a button, the panel is closed and the actual page content is accessible.

Current behavior image

Expected behavior image

Xippo commented 1 year ago

Hi Florian,

Thank you for your great input. I will take a look into it and improve the accessibility. I hope to find some spare time during the next week's, maybe Christmas. But if you need it earlier, you can adapt the template and CCS as well. It's fully customizable. I have some other plan as well. Like offering an new default view, where you can see advanced information about the different services/cookies and maybe offer a proper API but time is rare :(

Best regards, Oliver

Florian Geierstanger @.***> schrieb am Fr., 7. Okt. 2022, 09:25:

Currently the cookie panel is inserted at the end of the DOM. If you are a screenreader user or a keyboard user you need to tab through all focusable elements of the page to finally get to the cookie panel at the very end. Only then you can make your choice and with that close the panel. Depending on the page it is likely that you need to tab through links/buttons that are visually hidden behind the cookie panel.

There are several ways to improve this, reading https://uxdesign.cc/cookie-banners-and-accessibility-d476bf9ee4fc and watching a screenreader user interacting with cookie panels https://www.youtube.com/watch?v=Uaqo4FOI_DY (especially from min 11), I think the best practice would be to follow the Alert Dialog pattern ( https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). That is to make the cookie banner the first thing on the page and trap the focus inside of the panel. Only after the user has clicked on a button, the panel is closed and the actual page content is accessible.

Current behavior [image: image] https://user-images.githubusercontent.com/22551442/194492526-d46e5d37-9356-4cfc-9c97-1c3069817265.png

Expected behavior [image: image] https://user-images.githubusercontent.com/22551442/194491398-d1ceb720-78a6-4b13-a41f-447afa4f4ea0.png

— Reply to this email directly, view it on GitHub https://github.com/Xippo/OM-Cookie-Manager/issues/22, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD7ETWEHF62WQIUXQW7DX4DWB7F55ANCNFSM6AAAAAAQ7KGDJ4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

fgeierst commented 1 year ago

Thank you Oliver for adressing this! I'm happy to test once there is a PR for the improved behavior.