Just announced: Level Access and eSSENTIAL Accessibility agree to merge! Read more.
blue key on a computer keyboard with text "webinar"

Last week’s presentation in our Accessibility Basics Webinar Series covered best practices for non-text elements. Training Specialist Erica Zelmanowicz presented the webinar and has provided answers to the questions that came in during Q&A – including those we weren’t able to get to during the allotted time.

The webinar slides, transcript, and recorded presentation can be accessed at https://www.levelaccess.com/resources/overview/.

Why use the term “non-text elements” instead of images?

Erica: Technically the term non-text element refers not just to images but also word art, charts/graphs, and decorative images such as background images.  Non-Text Elements is just a broader term.

Is there a law or requirement for captions on live web video? We caption our video within 4 business days, but wondered if that’s good enough legally.

Erica: The laws around captioning are that you need to provide a synchronized text alternative for multimedia.  In terms of length of time it takes you to make that available, there are not necessarily any requirements around that, however, if you add a video to your site without captions and within a day, someone who requires captions accesses the video, you could potentially face some risk of a complaint.  You could provide documentation stating that captions will be provided however, this would not justify not having captions and could still face complaints from users.

Are there any tools that can check the quality of alt-text, e.g., stars vs. 4 stars?

Erica: Screen readers and computers cannot identify the meaning or purpose of an image.  For this reason, automatic testing can be done to check whether images are missing alternative text, but not whether the text is meaningful – that requires manual testing

Is there a list of standard alt text for buttons?

Erica: This would require some clarification, but to answer what I think you are asking, you would want to provide alternative text that describes the purpose or functionality of the button, if you are providing an image button with the text “submit”, then your alternative text should be “submit” (although if possible, use text instead of images of text in this case).  Image buttons with icons such as PDF, Save, etc. should also contain that same alternative text that describes the purpose of the button.

What is the preferred mode for alt text? Title case? Sentence case? What about punctuation for complete sentences?

Erica: There is no standard on this, however, you want to provide a concise alt text.  If you are showing an image of a dog holding a bone, “dog holding a bone” is sufficient

How does using FontAwesome affect compliance since you cannot use alt tag. By using “title”?

Erica: Icon fonts support high contrast mode and can be magnified without pixilation.  However, they are rendered by the screen reader as the character code.  They are also disabled by ZoomText in Firefox.  You would want to use aria to hide the character code and then use an accessible label if the icon conveys meaning.  You could use aria-label, a span with text and maybe a title to add a tooltip for sighted users (see this resource for more information:  http://fontawesome.io/accessibility/)

What alternatives to Capcha are available?

Erica: Audio is one alternative, but here is a great resource on another CAPTCA implementation (the Google reCAPTCHA – https://www.google.com/recaptcha/intro/index.html)

Could you please explain off screen text?

Erica: Off screen text means that the text is positioned off screen using CSS.  Give the element a class and then push it off screen with CSS.  You do not want to hide the off-screen text using display:none or aria-hidden as this will hide the content from screen reader users.  The intent is that the off-screen text is still available to screen reader users or users who remove styles from the page.

Is an adjacent data table the same thing as a legend?  

Erica: This would be a data table that provides the same information conveyed in the graph.  Table header cells should be used along with table data cells that are associated with the headers (check back May 12th for our data tables webinar)

In documentation, we use images of text to clarify workflows within the UI.  We also include the list of steps that are in the workflow below the image.  Is this OK?

Erica: Yes, as long as you are providing a textual description that explains the meaning and function of the image, then that should be okay.  You want to make sure that the user can understand the same information if the image was not displayed on the page.

If the text displayed in the image is already conveyed elsewhere as text, then could those images with the same text be considered “eye-candy” and be marked empty alt? Since the information is already conveyed elsewhere contextually?

Erica: If the text is adjacent to the image, then yes, you can add a null alt attribute (alt=””) to ensure that the screen reader does not render that information twice.

What do we do with math equation editors that output as images?

Erica: You could use MathML as long as the screen supports it.  If the screen reader does not support it, you could write the equation out the same way would read it to someone over the phone in the alt text.

Should alt tags start with “image of”, “photo of”… is there a best practice?

Erica: If it is important for the user to know that the image you are providing is a photo for example, then you can provide that information.  If it is not pertinent to understanding the meaning of the element, then you do not need to provide it.  For example, you do not need to say “image of a dog eating a bone”, you can just say “dog eating a bone”

Is it ok to use a single space character as an alt attribute for a decorative image? (alt=” “)  Are screen readers be able to deal with that? Some accessibility scanners don’t like (and count as inaccessible) empty/null alt attributes. (alt=””)

Erica: Null alt attribute does not contain spaces:  (alt=””) no spaces

How would you recommend dealing with repetitive images, such as logos? only tag the first one with Alt text and empty alt the others?

Erica: If there is no function or purpose to the repeated logo images, then yes, you can use alt=”” for redundant images.  If the logo is at the top of the page in the navigation and then again at the bottom of the page, you would still want to provide meaningful alternative for both of the images, but for your question, I am picturing the same image multiple times across the top of the page for example – in that case, then yes, you could use alt=””

Do you have any other tips for data visualizations/charts? Anything to avoid when providing descriptions or tables for these?

Erica: Proper data table markup should be used when creating tables as a text equivalent (check back May 12th for our webinar on Data Tables); the key here is that you want to provide the same information displayed in a graph in a table or summary of the graph.  If the user were to remove the graph from the page, can they still understand the information based on the graph or summary provided

Is the screen capture of a UI considered to be original text?

Erica: A screenshot would almost certainly be an exception because it contains other visual content and the presentation of the screenshot of the UI is important to understanding the UI and it is likely not possible to convert the text parts to text and keep the presentation; From SC 1.4.5 Note: This does not include text that is part of a picture that contains significant other visual content; So it would be fine to leave as an image that contains text.  You’d still need alt text or a long description though.

Any example of alt values for infographics? Or URL resources?

Erica: My first recommendation would be to use text instead of images of text and then style that text using CSS, provide a text alternative that conveys the same text displayed in the image if it is not possible to convert the image into text.  If the text within the graphic would be too long to place in alt text, then a longer description would have to be provided either on screen or through a link to another page with the description – WebAIM provides a good example of an infographic at http://webaim.org/resources/designers/

Can you add the null quotations in alt text in Word?

Erica: If you have a decorative image in word, leave the description field blank.  When converting the word document to a PDF document in Acrobat, you can set that image as an artifact or decorative

You said that some screen readers truncate ALT at 150 characters – which ones? 

Erica: This is typically for older screen readers and browsers; however, in IE if height and width are provided, alt text is truncated to fit within the image box, but if not, then all of the alt text will be read.  The same would be true in Firefox as well. – in researching this it seems that this could be an outdated standard, however, as a typical rule of thumb, limit your alternative text to 150 characters so that users of screen readers won’t miss important information

In your examples for complex images, you showed us how to link to another page. I’m just curious as to why you didn’t show us how to use the longdesc attribute?

Erica: The longdesc attribute only provides the long description to some screen readers.  Sighted users will not be aware of that long description. Longdesc is not currently part of HTML5 as well. If you must use a longdesc then it is recommended that a standard link to the long description page also be present.

Not sure if this applies to this training, but would a blank table that needs to be completed by a user need to have alt text?

Erica: For data tables, a caption may be necessary depending on how complex the data is.  As long as you structure your table properly with <th> and <td> elements (and associate your table header columns with table cells for complex tables), then screen reader users will be able to navigate through a table using keyboard commands (check back May 12th for our webinar on Data Tables)

When using alt tags is there a need to also use the title tag as well?

Erica: A great answer came in from one of the attendees of the webinar (thank you for providing this info!):

  • Title text is virtually non-existent to users of mobile and touchscreen devices. Since there’s no way to “hover” over an image to see the title text, mobile and touchscreen users are being put at a disadvantage as there is content that they are incapable of accessing. It’s excluding a rather large user group.
  • When used in conjunction with screen magnifiers, the tooltip created by title text over images could block large sections of the page and make content difficult to see.
  • Here is a resource from WebAIM which provides additional information on using the title attribute:  http://webaim.org/articles/gonewild/#title)

Any advice on webfonts?

Erica: There are a few things to keep in mind when dealing with fonts:  use real text rather than text with graphics, select basic, simple, and easy to read fonts, don’t rely on the appearance of the font to convey meaning.  Typically, it is best to avoid serif fonts, as these are harder for users with cognitive disabilities as well as users with low vision to read.

How important is adding WAI ARIA with the compliant alt text?

Erica: It depends on what it is being used for.  If you have a simulated control with an image button for instance, you will want to provide a role for that control (role=”button”).  For just a standard image that does not provide functionality and cannot be activated using the mouse or keyboard, a standard image with alt text is sufficient.

Are these same principles applicable to social media sites?

Erica: Yes. Twitter and Facebook for example have implemented a method for users to add descriptive text to their images.  Although these would be uploaded by users themselves, so it is a bit different when we think about meaningful alternative text.  Check out this article on the Twitter blog:  https://blog.twitter.com/2016/accessible-images-for-everyone

So as long as an image is (not) conveying a meaning, it does (not) need alternative text?

Erica: All images must provide alternative text.  Images that convey meaning must have meaningful alternative text, while decorative images must use the null alt attribute (alt=””).  CSS background images that convey meaning must provide a text alternative either through on screen text or text positioned off screen with CSS (although on screen text is the best option).  CSS background images that do not convey meaning, that are just on the page for aesthetic purposes do not require a text alternative.

What criteria should we use to evaluate a long description?

Erica: If the information conveyed by the long description is understood when the image is not available, then the long description serves its purpose.  There are many implementation techniques used to display additional information relating to complex images (see W3.org for more information:  https://www.w3.org/WAI/tutorials/images/complex/)

What does the screen reader say when it comes to an in-line decorative image with alt=”” ?

Erica: The screen reader will ignore any images with a null alt attribute

For background images, how do you verify Alt text or make sure background images are accessible?

Erica: A good way to do this is to remove background images from the page.  If the page conveys the same meaning without the background images, then the text alternative that is applied is sufficient or if the image is decorative, then a text alternative is not needed.  You could use our AMP toolbar to hide background images (https://www.levelaccess.com/products/software/amp/)

What is the preferred mode for alt text? Title case? Sentence case? What about punctuation for complete sentences?

Erica: This will depend on what image you are providing.  The goal is to be concise enough so that the user still has understanding of the context on the page.  Typically, you could just use a phrase or a couple sentences depending on the image.

How would you handle graphs (charts) derived from dynamic (current personalized data), where construction of description can’t be done ahead of time, and where data is so voluminous that a data table might be overwhelming?

Erica: A data table would be your best option here (possibly with a caption tag <caption>), as it makes it easier for screen reader users to navigate through using keyboard commands.  If that is not possible, ensure that you have labels associated with your graph or chart.  You also want to make sure that you are not using color alone to convey meaning within the chart.  Any elements within the graph or chart that are accessible via the mouse, must also be accessible with the keyboard.  For instance, if a label appears when the user hovers over the chart with the mouse, then this must also be made accessible when a user tabs to the element with the keyboard.