Support » Accessibility » Accessibility confusion (3 questions)

  • Resolved ShadowmarkPro

    (@shadowmarkpro)


    Hello, I’m trying to get our webcomic site up to snuff in terms of Accessibility features and I’m quite confused on a few topics.

    My first question is, regarding images, do I need to wrap them in HTML page headings, add tabindex=0, or are images inherently navigational in the same way links are?
    My second question is about Custom Header Widgets. We have different custom header widgets (via a child theme) for several pages (each book, the contact page, our About page, and our Links page). I gave the custom header widgets the Aria role = “banner,” but when I test our site using the WAVE tool the only information it returns for the widgets is just that: “Banner.” I can’t figure out how to get the name/Alt text of the banner images to show up in the WAVE tool structure tree (ie, Library, Contact, About, etc.). At one point I managed to give the banner roles h1 headings and a title, but the actual text of the title appeared above the header images. I tried to use the “Aria-labled” feature to hide the text on the front end but then the WAVE tool returned an error saying that the h1 heading was empty.
    And my third question is about image galleries on our “Chapters” pages and the “Next/Previous” links at the bottom of each comic book page. Should I wrap all of the images in one heading, like h2, should I give each image/icon it’s own heading, or should I use a ul? I tried the ul but it ruined the layout of the galleries/icons. Many thanks to anyone that can give me insight into any of these questions.

    • This topic was modified 2 months, 3 weeks ago by ShadowmarkPro.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • What you have tried seems a bit haphazard. You need to think about what you are trying to accomplish. Since your main content is images, it is automatically less of an experience for a visually impaired person. To remedy that, you would use alt text for each image that describes the scene and has the text that is in the speech bubbles, just like you would if your were reading it to a blind person.
    The navigation of the pages should use standard links, which allow navigation by keyboard, finger(mobile), and mouse. No, images do not have any navigational properties, but if they are already wrapped in a link, there is no more to do than make sure there is screen reader text (usually not visible to sighted users) on the links to indicate where the link will take them.

    You should remove the ARIA role of banner that you added, since it sounds like they are links, not banners. Screen reader text for links and alt text for images is what you need.

    The galleries don’t need headings. Each image should have its alt text, and the Next/Previous links should have screen reader text.

    • This reply was modified 2 months, 3 weeks ago by Joy.

    Damn Joy, you’re like my Yoda. The first advice you gave me about using gallery plugins was right on, and now you’ve cleared the haze on issues I’ve been struggling with for months. Thank you so much.

    One query about the answer you just gave, to be certain I’m understanding/explaining correctly. (Please excuse my ignorance on the topic, I’m not second-guessing your expertise). In regards to the images being wrapped in links: yes, the header images are wrapped in links (when clicked they go to different pages) but the actual comic book pages only have the src link, and then those media files are served in a lightbox (via the Foobox lightbox plugin) upon clicking them. Does that technically qualify them as being linked or does that mean I should add some focusable feature such as tabindex? Thanks again for taking the time to answer.

    I just looked at your site and it is not very accessible, even for sighted users. I can’t see the menu unless hovered. I have no clue what those icons mean. I don’t know that the images are links or what they are for. The site conveys no meaning to me. I imagine that the search engine is similarly clueless, since there’s no text to work with.
    When I try using keyboard navigation instead of mouse, there are no focus outlines, so I can’t tell where I am. There is no skip to content link either.
    And the site title, which is an image, is linked to the mobile folder?

    I was trying to understand your question “the actual comic book pages only have the src link, and then those media files are served in a lightbox upon clicking them” but I didn’t see this in action. You should not add tabindex unless you have a very good reason. The lightbox may or may not be accessible. Links have built-in browser handling for keyboard navigation, and alt text on the images is used by screen readers. I don’t have any idea what the lightbox is doing but it’s the same as an image in the page: alt text and screen reader text for those that are impaired. And no keyboard trap in the lightbox, where you can’t get out without a mouse.

    • This reply was modified 2 months, 3 weeks ago by Joy. Reason: forgot the screenshot

    Hey Joy, thanks for getting back to me so soon, I appreciate it.
    Yeah, sites a bit of a mess right now as the accessibility tweaks are in flux at the moment.
    I was aware of of the missing skip to content link and the problems with keyboard navigation. The skip to content link is coming and the keyboard navigation issue is what I’m trying to resolve now, hence the questions about page headings and the tabindex and such.
    I’m surprised you couldn’t see or make sense of the menu icons, though. I’ll have to think about that.

    The images on the home page are the cover of the books and they link to the interior pages of the comic books, which is where the lightbox is active. There is no lightbox on the home page.
    Yeah, for the header images in the banner I had a hidden Easter Egg but I realized that was confusing and intend to change that as well.
    The general lack of overall text is a design issue. I’ll have to think about that. I have alt text for all the images and I have plans for screen reader text. I’ll have to explore the lightbox to see if it’s accessible.
    Thanks for the input about the tabindex and the feedback overall about the site. Lots of work to do but you’ve helped me tremendously.
    I think I’ll be able to work out all the issues now. Thank you once again for getting me on the right path. Hope all and everyone is well on your end. Stay safe.

    The skip to content link is coming and the keyboard navigation issue is what I’m trying to resolve now, hence the questions about page headings and the tabindex and such.

    Those seem unrelated. The problem is your theme is styling the :focus indication to be invisible (or because it’s a dark site, it there but default is dark also).

    I’m surprised you couldn’t see or make sense of the menu icons

    Surprised? Really? Did you see the screenshot? Who can see black on black? That screenshot is all I see when I open your site. Scrolling down doesn’t enlighten me any either. If you have to explain here what I’m seeing there, you missed something major.

    Well, if we’re being technical, it’s black on grey, and many see them just fine. But like I said, I appreciate your input and I’ll take the feedback into consideration.
    And this is a webcomic site. Most of our visitors come here to read comics, they know what they’re getting and understand the reference to “pulp,” which is a comic book reference: pulp fiction. Which is clearly marked on the page (the text passes Accessibility tests in terms of contrast ratio).

    The focus, keyboard navigation, and skip link are in fact related as they all pertain to accessibility. And, as I said above, there is a list of issues I’m working to resolve one after the other.

    I’ve added SEO descriptions on the back end for all my pages and images. The SEO needs to be tweaked a bit (page titles are too long right now) but the SEO is not a problem. Just the Accessibility issues.

    • This reply was modified 2 months, 3 weeks ago by ShadowmarkPro.
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.