Many elements are not clear interactive elements to screen readers.

[rkingett]

Many interactive elements, clickable elements, appear as plain text to screen readers. For example,

On a books details page, a keyboard user cannot open the, more bookshelves, menu, because it is not a clear interactive element. I'd make this a button, and make the currently reading, element inside of that menu a button as well.

In the, my books, section of the bookwyrm.social website, the elements that say, I'm done! More shelves, review, quote, everything in that area is not a clear interactive element. It would be best to make those buttons, actual buttons.

In the shelves pages, the change shelf element is not a clear button. I personally think it should be a button.

When looking at statuses, the comment, element, on a books page, should be a button.

I'm sure there's many more, but that is all I have for now.

[mouse-reeve]

I'm starting to go through the app page by page with Apple VoiceOver today, so hopefully I can catch some of these obvious problems and hopefully save you the hassle of pointing them out to me in the future. I'll update here as I correct things.

[hartsick]

@mouse-reeve, I'm happy to help tackle this, both for specing out and implementation! I've also done some review with the WAVE extension in Chrome to help identify some accessibility issues. I'm going to use this issue as a way to complete a first pass. I had started this a bit ago, before you commented, so hope it's not redundant.

Here is a list of the things rkingett mentioned above, plus some things I've noticed using WAVE. I'll add additional pages in comments below as I get to them:

All pages

• Need an h1 (right now most pages start with h2s, which breaks page hierarchy)

Site nav

• No alt text - Profile image
• Not selectable - Hamburger button on smaller sizes
• No label - Search text box

'Updates feed' page

Book section column

• Not selectable - Disclosure arrow to select shelf
• Not selectable - I'm done
• Not selectable - Review / Comment / Quote tabs
• Not selectable - Star selection

Book start modal

• Not selectable - Cancel button
• Not selectable - Xs to close
• No label read - Started reading & Finished reading fields

Updates column

• Not selectable - Disclosure arrow to select shelf
• Not selectable - I'm done
• Not selectable - Comment
• Not selectable - More options reveal

'Your shelves' page

• Not selectable - Change shelf dropdown (inner options ok)

Book details page

• Not selectable - Disclosure arrow to select shelf
• Not selectable - Edit / Delete buttons
• Unclear label - Review textbox
• Not selectable - Star rating in review section
• No label read - Started reading & Finished reading fields
• No label - Tags input
• Not selectable - Review / Comment / Quote tabs (same as updates page)
• Not selectable - Star selection (same as updates page)

[mouse-reeve]

not at all redundant! I'm working on tabs right now, and I updated a couple alt tags

[rkingett]

Could this bot help with pull requests? I was looking for a free version of this, though.

[rkingett]

I think I found a free version for Github that is open source. Check this out. Lighthouse. It apparently works across your repository and pull requests, too, and is open source.

[hartsick]

I've used axe-matchers on ruby projects before, which runs as part of a test suite and can be run on CI. it looks like there's a python version that could be hooked up for integration testing.

the output isn't as nice as the tools you linked to, but it is very easy to get up and running.

[mouse-reeve]

I've addressed the glaring issues here, and I installed AccessLint as a checker on pull requests, so I think it makes sense to consider this ticket closed and address any other issues that come up in new issues. Thanks for the guidance on this!