WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Small clarifications for a newbie

for

From: Christine Hogenkamp
Date: Mar 27, 2023 12:34PM

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 REMOVED> >
> To: WebAIM Discussion List < <EMAIL 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 REMOVED> > On Behalf Of
> Christine Hogenkamp
> Sent: Monday, March 27, 2023 10:14 AM
> To: <EMAIL 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 REMOVED>
> <mailto: <EMAIL REMOVED> >>
> wrote:
>
> >
> >
> > ---------- Forwarded message ----------
> > From: Laurie-Anne Gignac < <EMAIL REMOVED> <mailto:
> <EMAIL REMOVED> >>
> > To: " <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >"
> < <EMAIL REMOVED> <mailto: <EMAIL 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 REMOVED> >
> >
> > > http://list.webaim.org/>;
> > http://webaim.org/discussion/archives>;
> > <EMAIL 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.
>
>
> ----------------------------------------------------------------------------------------------------------------------------------------------------------------
>
> > > > >