Accessibility confusion (3 questions)
-
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.The page I need help with: [log in to see the link]
-
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.
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.
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.
- The topic ‘Accessibility confusion (3 questions)’ is closed to new replies.