WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Small clarifications for a newbie

for

From: Mark Magennis
Date: Mar 27, 2023 8:49AM

Hi Laurie-Anne,

A couple of points on top of what Christine has already said.

1. In your icon block you have a heading within a link. Where you have something that is both a heading and a link, if possible it is best to make sure the link is within the heading. If the heading is within the link then VoiceOver/Safari won't announce it as a heading when the link is tabbed to or arrowed to or announce the heading level when navigated to using the 'h' shortcut. The situation is even worse for headings that are within buttons.

2. As long as the book icon is within the same link as the title then you can give the icon null alt or hide it. But if it is a separate link it will need a name so you can't do that. If you can't for some reason include both within the same link then it would be best to make the icon mouse clickable but not focusable and also hide it from AT using aria-hidden="true" (automated accessibility checkers may complain bitterly). This will avoid there being two identical links next to each other.

3. Your image is intended to inform the user of the position of the button on the page. So you might consider giving it alt text with that information. Something like "xxx page showing the xxx button below the video". But only if you think you can write something that will actually help users find it more easily or add it to their mental model of the page. AT users have many ways to find a button but some do rely on tabbing or jumping through headings so it can be useful to be given some kind of mental model of the button's position. Not a huge accessibility issue but something to consider.

4. When you said "header (H2,H3...)" you meant "heading". A header is the thing in the first cell of a table row or column and is completely different from a heading (I expect you probably realize that and just made a typo). But if you are asking whether it is okay to have a heading before a table rather than a caption, then the answer is yes. If the table has a clear heading that says what it is for then a caption isn't required. The benefit of a caption is that if someone jumps straight into the table (using the 't' command in NVDA and JAWS for instance) then they will hear the caption but will have jumped past any heading you placed before it. But I expect most users will get to the table by going through the heading and the only ones that would jump straight to it probably already know what it contains.

Hope this helps,
Mark

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Laurie-Anne Gignac
Sent: Friday 24 March 2023 20:16
To: <EMAIL REMOVED>
Subject: [EXTERNAL] [WebAIM] Small clarifications for a newbie

[You don't often get email from <EMAIL REMOVED> . Learn why this is important at https://aka.ms/LearnAboutSenderIdentification ]

Hello, I am fairly new to web accessibility. I did the Introduction to Web Accessibility course (W3C/edX). I do not have a great background in development (HTML/CSS only not much of anything else). I'm using Typo3 CMS. I need to work on the accessibility of my organization website, but sometimes I have questions about whether a problem really needs to be fixed.


1- We have "icon blocks". These blocks are composed of a link on two elements: an image and a title. <a><img></img><h3></h3></a> . The image sometimes has 2-3 words of text, but the same words are also used in the text. Is this okay? We should avoid text in images, but since there is text next to it in the link, is it okay? Also, does the image need an alternative text?

2- When I have an image of a book cover next to its title. Both elements are clickable. The image is only for aesthetic purposes, but since it is also a link, should we put an alternative text even if it is the same as the book title?

3- In a procedure, we explain that the user needs to click on a button. We have an image of the button in the text to facilitate recognition. I assume that we put an empty alternative text because it is redundant with the text (please validate). If we put an image of the entire screen with the button highlighted, potentially with an arrow, should this image have an alternative text or should it be empty?

4- If I have a table, is it ok to only use header (H2,H3...) or do I need to use caption?

Thanks a lot! :)

Laurie-Anne
Bibliothécaire édimestre
Direction des bibliothèques