E-mail List Archives
Thread: Small clarifications for a newbie
Number of posts in this thread: 3 (In chronological order)
From: Laurie-Anne Gignac
Date: Fri, Mar 24 2023 2:15PM
Subject: Small clarifications for a newbie
No previous message | Next message →
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
From: Mark Magennis
Date: Mon, Mar 27 2023 8:49AM
Subject: Re: Small clarifications for a newbie
← Previous message | Next message →
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
From: Christine Hogenkamp
Date: Mon, Mar 27 2023 12:34PM
Subject: Re: Small clarifications for a newbie
← Previous message | No next message
Apologies for not naming my subject line to indicate it was a reply to
Laurie-Anne's question, I blame a case of the Monday Mornings with my brain
still asleep sigh
For icons that are indicating an action or function such as opening link in
a new tab, the icon can be an opportunity to add that text "link opens as
new window" as the alt text, but you could also just have text that is
visually hidden by the CSS but screen readers can still "see" it to read it
out, the info text about what will happen when clicking the link doesn't
have to be tied to the icon and I would only do so if the icon does appear
to be showing that function visually AND is part of the link itself (ie
clickable, same with using invisible screen reader only text) otherwise the
user might think ok I just need to hit Enter when that alt text is read out
and nothing happens (because they are currently just on the icon image and
not the actual link).
I do think it might be better to make the PDF part mentioned in the link
text itself, for people who are moving through the page just by using the
tab key between focusable interactive elements (such as links) or using a
navigation method like the Elements List panel in NVDA that has a list for
links, since on that list of links it won't be showing the words before or
after the link text, so PDF will not be read out that way (assuming you
want them to know the link is to a PDF file specifically)
I hope that helps Susan :)
*x*
*Christine Hogenkamp (She, Her)*
Front-end Developer
ContextCreative.com <http://contextcreative.com/>;
> From: "Stegemann, Susan" < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Mon, 27 Mar 2023 15:08:11 +0000
> Subject: Re: [WebAIM] WebAIM-Forum Digest, Vol 216, Issue 24
> Probably a tangent, but what's the best way, then, to use icons for PDFs
> and visual indicators that open links in new windows? We were going to add
> both, but then include alt text that spells out âPDFâ and/or âLink opens in
> new window.â Does that seem like the right approach?
>
> Susan
>
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Christine Hogenkamp
> Sent: Monday, March 27, 2023 10:14 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] WebAIM-Forum Digest, Vol 216, Issue 24
>
> CAUTION: External email.
>
> Hi Laurie-Anne,
>
> 1. Usually icons are meant to be decorative and do not require alt text, so
> leaving the alt text as alt="" will indicate the icon is decorative and not
> be announced by screen readers and other assistive tech. Ideally, any image
> should not have alt text that isn't already present as live text nearby,
> because then it will just be read out twice which is redundant.
>
> 2. You can also make this image decorative with alt text such as alt=""
>
> 3. This is a bit difficult to answer without seeing an example of the coded
> format, but if your goal is to help users correctly identify the button, as
> long as the button uses the tag <button> or is given the role "button" to
> the element, it should get announced as a button as the user moves to that
> item on the screen with a screen reader so the button diagram with arrow
> having alt text shouldn't be necessary if the item has been given the
> correct semantic format. You may want to also reconsider the action term
> "click" since not all users will be using mice that click, though I think
> most keyboard users or other assistive tech have an understanding of what
> is asked for by "click" i.e. activate.
>
> 4. Usually in a table in HTML, headers are not indicated by using header
> tags i.e. <h2> etc. Instead you give the table a header row <th> tag which
> should assign the cells under in that column that header text. The text
> itself doesn't require any tags within the header row cells. It may also be
> that using a header tag within a table may create confusion for the
> hierarchy of the text, if you use header tags elsewhere on the page (I
> think a table header is not considered the same as a page header, for
> organizing the text into the appropriate sections, like chapters in a book)
> and I just did a quick search abou captions and tables, it seems they can
> be used as headers for a table but do not require the use of an actual
> header tag, see more info:
> https://www.w3.org/WAI/tutorials/tables/caption-summary/<
> https://www.w3.org/WAI/tutorials/tables/caption-summary>
>
> Hope this helps!
>
> *x*
> *Christine Hogenkamp (She, Her)*
> Front-end Developer
> ContextCreative.com<http://ContextCreative.com>; <
> http://contextcreative.com/<;http://contextcreative.com>;>
>
>
> On Sat, Mar 25, 2023 at 2:00 PM < = EMAIL ADDRESS REMOVED =
> <mailto: = EMAIL ADDRESS REMOVED = >>
> wrote:
>
> >
> >
> > ---------- Forwarded message ----------
> > From: Laurie-Anne Gignac < = EMAIL ADDRESS REMOVED = <mailto:
> = EMAIL ADDRESS REMOVED = >>
> > To: " = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >"
> < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> > Cc:
> > Bcc:
> > Date: Fri, 24 Mar 2023 20:15:32 +0000
> > Subject: [WebAIM] Small clarifications for a newbie
> > 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
> >
> >
> >
> >
> > > > > http://list.webaim.org>;
> > > http://webaim.org/discussion/archives>;
> > > = EMAIL ADDRESS REMOVED = >
> >
> > > http://list.webaim.org/>;
> > http://webaim.org/discussion/archives>;
> > = EMAIL ADDRESS REMOVED = >
>
>
>
> ----------------------------------------------------------------------------------------------------------------------------------------------------------------
>
> The information contained in this e-mail message may be privileged and
> confidential information and is intended only for the use of the individual
> and/or entity
> identified in the alias address of this message. If the reader of this
> message is not the intended recipient, or an employee or agent responsible
> to deliver it
> to the intended recipient, you are hereby requested not to distribute or
> copy this communication.
>
> If you have received this communication in error, please notify us
> immediately by telephone or return e-mail and delete the original message
> from your system.
>
>
> ----------------------------------------------------------------------------------------------------------------------------------------------------------------
>
> > > > >