Screen Reader Accessibility Issues

Just a note that the current UI configuration you have setup here has some accessibility issues for users of assistive technology (screen reader programs such as JAWS). I am not sure how easy it would be to make changes to out-of-the-box layouts like this, though. I work in web development for accessibility, however, and I'm blind myself.

A brief list of the issues: - No text label on the Search button. This can be fixed with an aria-label attribute. - Many other links with no accurate text label that I am assuming are images/icons of some sort. Rule of thumb: if there is an image, provide an alternative text label using aria-label or visually hidden text in a span. Mouseover/mousehover text is not read by a screen reader and does not count. - No headers/regions/landmarks at the beginning of each reply in a post. This makes it difficult to jump from reply to reply. If you don't want to use an actual h2/h3 for visual reasons, you can use role="heading" on any span or div and that will be noted as a heading for a screen reader. - Some items are not properly setup with keyboard access. The "compose..." interactable above the text box in this post box is not set up properly. It must be a clickable span or div or something - it needs to be ensured to be keyboard accessible with a tabindex and also with role="button" or role="link"

There are probably more things that I haven't noticed yet as I haven't tried all the features, though one of the usual culprits is also not properly indicating to a screen reader when something is selected or expandable, which is also an easy fix if you can actually make changes to the layout code.

As an example, this is what I see in that ul (unordered list) of unlabelled links/images at the top of this page: List of 8 items Link Link 42 ? 42 Link Link Link Link Link Link

(The above is all in a navigation region, but none of the links have text labels so it is impossible to tell what these links do. There are unlabelled links like these scattered all over the layout.)

Finding themes is on the to-do list, to my knowledge. To repeat what I was suggested, do you know of a good accessible theme that works for nodebb?

Solid points, Livdera. This is completely unrelated, but if you get a chance, could you give a site I'm working on a quick once over with the reader? I've a friend who usually does it but he's on vacation until the 21st. www.labreesbakery.com - Everything should work well with a reader. My only two concerns are the slider at the top and also the social media buttons at the top. They are text labeled, but I'm not sure they're text labeled in a way that's front facing, especially with the java that runs the slider.

Edit: Also I know there are six images that are just text labeled as "Large Image" at the moment. That's intentional as they're placeholders.

Can you check the categories button? I added an alias in the mod console, and would like to confirm it before adding it to others. There is already configured hover-over text, but per your second post, but, doesn't look like that's what you're looking for.

@Flimbo If I get a chance later in the day, I'll take a peek.

@Whirlin Where is this Categories button and I can take a look?

And no, mousehover/mouseover text is not adequate. Keyboard users don't use a mouse, so the "title" attribute is not read.

aria-label works as a screen-reader only text label.

WAI-ARIA is the name of the list of attributes for screen readers.

WebAIM also has a tool you can run the code through and it tells you all the things that are wrong.

Couple other issues I noticed: - The button after the "Reply" button is unlabelled. Not sure what it does. - The list of forum posts seem like they should be in a table format (there are column headers across the top for topic, etc.) but the screen reader is not indicating them as a table and I can't navigate by column or row. I haven't checked the source code, but if this is divs/spans using CSS to appear as a table, some role attributes can be added to them. If it is using table code (table/td/th, etc.), it may still need role attributes. I've seen certain table attributes such as width=100% break the table layout for a screen reader. Table element (or what would be a table element): role="grid" Th element (or what would be a th element): role="columnheader" Tr element (or what would be a tr element): role="row" Td element (or what would be a td element): role="gridcell"

As an addendum - the collapse/expand stuff seems to be working.

I noticed at the top of the page when I got a notification about responses here I saw (this obviously needs a text label, too!): Link 1 ?1

And when I hit enter on it, it expanded and I was able to hit enter on the notification.

It is just the links that don't have proper labels.

Imagines in our sticky top navigation that I thought you were referring to.

There are other problems here though, will add it to the backlog. Once we determine eventual skin, we'll evaluate whether it's an attribute of the skin or underlying code, and go from there,

@Whirlin It might be those images.

Whatever is in an unordered list (ul) and seems to be images of some sort. All I can tell there are 8 elements.

I'm available for feedback on things if needed when it comes to the new skin/layout.

Is there a "Recent Posts" link somewhere? Can't seem to find it.

And none of those UL objects now have proper tags? Just tried adding one to only the categories ones. hmm..

Recent Posts is something we're working on, right now, it's just updated threads. We have a way of delivering it, but it ends up being a side bar frame, and a terrible end user experience.

@livderaderalleur

The list of 8 is a header at the top of the page, the first link is categories, the second link is unread posts, the third link is recent, the fourth link is tags, the fifth link is popular, the sixth link is users, the seventh link is groups and the eighth link is search.

The next link after that is some kind of index thing that I'm not sure what it does yet. Then you'll have another search link, a notifications link, a chat link and then a profile link.

The 10 out of 10 (should now be 11/11) is used to navigate between the posts on the page and to give you a rough estimate of how much you've read in a given topic. It's super useful on mobile viewing.

But you're right on the redundancy of searching. Let me do that!

@Whirlin If you're putting it on the ul element itself, it won't work.

I am assuming it has an a tag inside the ul element. The aria-label needs to go on the a element/anchor tag. The thing that is actually the link.

@Alastir Thanks for that. At least I know what the links are now!

And @Whirlin. I wondered what that was and figured it must have something to do with the posts.

@livderaderalleur

There are several ways to modify the look or layout of pages. There's a front-end and a back-end way. I'm guessing the issues you're experiencing are going to have to be addressed on the back end where the actual code lies.

@Alastir I figured as much. I've had to work with out of the box pre-build code at my work and it's always the biggest PITA to work with as a majority don't consider accessibility and then it's difficult making changes without breaking potential upgrades in the future.

At least this should hopefully be easier to alter since it is just the layout code (I hope!)

accessibility is a priority, and when I have time to work on the theme more generally I will make sure that i address adding aria attributes wherever is necessary to enhance accessibility.

Props for the priceless feedback and the way it's being handled. +100

@ondreian Thanks much!

I can thankfully still access most of the pertinent functionality alright - just needs a bit of polishing and labels in certain places to make stellar. I think I find the lack of headers delineating the beginning of each reply in a post to be the most difficult to get used to, the rest I've been able to workaround well enough for now.