search

e107inc / e107

e107 Bootstrap CMS (Content Management System) v2 with PHP, MySQL, HTML5, jQuery and Twitter Bootstrap. Issue Discussion Room: https://gitter.im/e107inc/e107
https://e107.org
GNU General Public License v3.0
318 stars 212 forks source link

[Bug]: [Accessibility]: bootstrap 5 theme - the collapseable menus for user information and private messaging system doesn't have any alternative text for screen readers #5210

Open sanslash332 opened 3 months ago

sanslash332 commented 3 months ago

What e107 version are you using?

Latest Github version (just updated)

Bug description

If your site are using the bootstrap 5 example theme, and your enter to it with a not signed session, you find two sign-in related links below (or next to, i cant tell you the visual part) the navigation area, one for sign-up and sign-in. These links are OK, and have their corresponding alternative text for screen readers.

But, after you sign-in, these links are replaced with two expandable menus. One for the private messaging system, and other for control your profile with links to sign-out, view the profile page, etc. These expandable menus doesn't have any understandable alternative text to understand their function when you use a screen reader. They contains a simple "#" label. You can understand their function just after press it and view the expanded menu.

So is possible add a aria-label with the corresponding text that represent their function? I've tried to find the template where these menus are built, but on the theme I just found the " {SIGNIN}" shortcode that aren't created on the theme itself, and cant found it on the built-in templates or shortcodes to check how it works and try to modify by myself.

How to reproduce

  1. grab your screen reader of preference. NVDA, JAWS or narrator on windows, voiceover on apple systems.
  2. Open any web browser
  3. enter to any e107 website using the default bootstrap 5 example theme. For example www.tiflojuegos.com
  4. Find the sign-in and sing-up links. check that they are OK
  5. enter to the sign-in option, and input your credentials to sign-in.
  6. After the page loads, go to the same place where the sign-in and sign-up links were, and note that now, are two links labelled as "#"
  7. Press enter on one of it, and surprise, you found that one of them can be a menu of your private messaging system, or your personal menu.

Expected behavior

That these menus have a small name (not a complex description) with their function. Like messages, pm, private messages or something similar for the first menu, and profile menu, profile, or simple the name of your signed user for the second.

What browser(s) are you seeing the problem on?

Firefox, Chrome / Brave, Microsoft Edge

PHP Version

7.4.33

Alex-e107nl commented 3 months ago

@sanslash332 hi, something has changed, you can find the links under e107_plugins/signin/templates. You can place the template signin_template.php in your own theme under e107_themes/bootstrap5/templates and make your adjustments. Hope this helps you on your way!

sanslash332 commented 3 months ago

O, thanks @Alex-e107nl for the tip.

I don't expected that the signing template was part of a plugin 😢 But well, lets try some changes, and if they fit wells, prepare a small PR to fix this in general. Maybe can be a small change and benefit to all blind or vision impaired people that enter to any e107 site :-)

Thanks.

Moc commented 3 months ago

PR is very much appreciated! If you have any other recommendations for enhancements to facilitate visually impaired, please do post them.