WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG 2.0 Questions

for

From: glen walker
Date: May 29, 2018 5:03PM

Just a few quick thoughts because you're the one being paid to evaluate the
site :-)

Have you already looked at the "understanding" references for each success
criteria? For example, 1.4.5 has
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html.
It has examples of successes as well as techniques for success and often
shows failure conditions.

In the case of a coupon, they can generally be displayed as real text
instead of an image, with the entire block being a link perhaps to print
the coupon, but you can certainly use an image if you want, provided the
alt text describes it. If you decided to use an image with proper alt
text, it'd be difficult to imagine being sued over you using an image
instead of real text (assuming the rest of your site was fully compliant),
but I'm not a lawyer nor am I giving legal advice. 1.4.5 is kind of
squishy in deciding what's "essential".

I would expect a sales banner to be text too, with proper CSS styling. You
can have images in your banner for decorative purposes (alt=""). If you
had a "20% off" text in a funky font that can't be mimicked in CSS, make it
an image with alt="20% off".

My (personal) rule of thumb is always try to use real text with CSS and if
all else fails, use an image.

For 1.3.1, don't use a heading just to get the styling benefits of that
heading level. Make sure it really labels a section. Using them for
expand/collapse areas is ok as that's what the authoring practice
recommends for accordion headers,
https://www.w3.org/TR/wai-aria-practices/#wai-aria-roles-states-and-properties

For the grid view, does it have column headers? Does it visually look like
a table or do you just have a series of products in a row, over multiple
rows where each product happens to line up so it appears like there are
columns? If you don't have the same info in a column, for example, if the
first column had all product images, the next column was the product name,
the next column was the description, the next column was the price, etc,
then it's not really a table/grid (at least given the scant details you
provided). It sounds like having them as a list is the right thing to do.

For the modal, it sounds like you have more than just a 1.3.2 issue. The
modal should be announced when it displays and the focus should move to it
and the focus (both the keyboard and screen reader) should be constrained
to the modal until the user takes the appropriate action. It doesn't
matter if the actual modal html code is at the end of the DOM.
https://www.w3.org/TR/wai-aria-practices/#dialog_modal

For the svg logo, svg isn't considered an image (it's not an <img>
element). When used inside a link, I always specify an aria-label on my
link to override what might be in the svg. For Internet Explorer, you
probably have to add <svg focusable="false"> to prevent the svg from
receiving focus, otherwise your link would be one tab stop and the svg
would be another tab stop.

Glen



On Tue, May 29, 2018 at 4:05 PM, Dane Dunham < <EMAIL REMOVED> > wrote:

> Hello all,
>
> I work for an organization, which conducts accessibility testing on
> websites. As we evaluate websites, we have come across some scenarios,
> which lead to several WCAG questions, listed below. Any thoughts from the
> community on the below would be appreciated. Thank you.
>
> For Images of text: 1.4.5
> How can we best determine if the presentation of text in images is
> essential? I.E. If the text represents branding. E.G. A coupon, sales
> banner, etc.
>
> For Info and relationships: 1.3.1
> According to Understanding Success Criterion 1.3.1, "headings are often in
> a larger, bold font separated from paragraphs by blank lines." If HTML
> headings are used in other ways, such as to code expanding/collapsing
> items, such as navigation links/menus, does this violate WCAG 1.3.1, since
> that makes it difficult for screen reader users to determine the true
> structure of the content, based on the failure "F43: Failure of Success
> Criterion 1.3.1 due to using structural markup in a way that does not
> represent relationships in the content"? Some pages we have assessed have
> used expanding/collapsing headings as a means to show/hide lists of links,
> rather than entire sections of content.
>
> A page we are assessing contains products for sale in a grid view. The
> product images are atop the links leading to the product pages. Screen
> readers interpret each product (both image and link) as being inside a list
> item (<li> HTML tag), making it possible to navigate from product to
> product. CSS is used to visually format the HTML list into a grid. Do
> screen readers also need to be made aware of the grid structure?
>
> For Meaningful Sequence: 1.3.2
> A page we are assessing contains a modal dialog (window covering page
> content and requiring interaction). However, the HTML code for the modal
> gets inserted at the end of the page after the modal is triggered, and
> screen reader users don't recognize that anything has occurred until they
> reach that content. Is this a violation?
>
> For Text Alternative: 1.1.1
> A page we are assessing contains clickable logos inserted using SVG
> instead of <img> elements. Each SVG graphic contains a properly nested
> <desc> element to describe it. However, there also exists aria-label
> attributes for each SVG, with values equal to the already provided
> descriptions in the <desc> elements. Should we advise our client to remove
> the aria-label attributes in this scenario?
>
>
> Regards,
>
> Dane Dunham
> Accessibility Specialist
> WeCo Accessibility Services
>
> This e-mail, including attachments, may include confidential and/or
> proprietary information, and may be used only by the person or entity to
> which it is addressed. If the reader of this e-mail is not the intended
> recipient or his or her authorized agent, the reader is hereby notified
> that any dissemination, distribution or copying of this e-mail is
> prohibited. If you have received this e-mail in error, please notify the
> sender by replying to this message and delete this e-mail immediately.
> > > > >