I applaud you for working toward the goal of making your product more accessible and helping creators make their diagrams more accessible. After reading the article on making our content more accessible, I had extensive feedback for you and couldn’t find an existing open topic to bring this to your attention. This is too much information for your simple feedback form on the page.
You will find the original text from the article followed by my response. While not necessary to conveying the information, I have made my responses blue (and quoted) for ease of reading.
The issues I found:
-------------------------------------------------------------------------------------------------------------------------------------
Avoid jargon, overly technical terms, and idioms
To ensure your message is clear and actionable for everyone, use standard language. For example, use “collaborate” instead of “synergize.”
Tip: Write for an 8th-grade reading level when writing content to ensure it is accessible to the largest number of readers.
Response:
- Creators should consider the target audience first. How you write for the average population is vastly different from how you write for specialty populations (for example, the scientific community).
- The goal is to write in a simple and clear manner that is suitable for the target population. Technical terms have their place in the right target audience.
Be descriptive with hyperlinks
Help your audience understand what will happen when they click a link. For example, instead of “click here,” use “open this page in a new tab.”
Response:
These are two separate issues that have been incorrectly combined into one concept.
- Link text should be descriptive of the destination of the link when read out of context of the surrounding text. Avoid using link text such as “click here” or “more”. Screen reader users often navigate the content in a link-only mode when returning to a document. Imagine the confusion when hearing “Click here, click here, click here, read more.”
- When links take the user away from the current page, provide an indication of that action. For example, add the text “ opens in new window” to the link text whenever the link will open in a new tab/window, so the user understands they will need to close that tab/window to return to where they were at the time of activating the link.
- These target separate issues encountered by individuals with visual disabilities when it comes to links.
Include alt text with images
Alt text provides an additional way for your audience to get value from your content in Lucid. When writing alt text, use short and descriptive words to describe an image.
In Lucid, you can use built-in alt text functionality. Learn more and follow the steps in the Optimize your document for screen readers with alt text section of this article. Don’t start alt text or image descriptions with “Image of” to avoid redundancy.
Tip: Alt text functionality in Lucid can only be read by screen readers after downloading a PDF of the document. Another option to improve accessibility is to include a brief description below an image in plain text.
Response:
- ALT text provides crucial context for individuals with visual disabilities. Without it, all they know is that an image exists.
- When writing ALT text, describe the information the user needs to gain from the image. If the image is too complex to describe in 255 characters, add short ALT text indicating “the image is described in full below.” Then add your detailed description as text in the page. This benefits more than just users with visual disabilities.
- Do not start ALT text with image of, picture of, or other indicators of the fact that it is a graphic. Imagine the subject of the image as if you are seeing it in real life, and you are describing it to a friend halfway around the world over the phone.
- TIP: This is very problematic. Your developers need to work toward natively exposing the ALT text within the document without the need to convert it to any other format. Are these objects not rendered with HTML5 technologies? These documents are created and displayed through a web browser interface, and HTML and CSS are the native languages of the web. I am not a programmer, so I do not know exactly how you achieve the display of the documents. Creation and display are two separate functions. Perhaps there could be a way to generate the documents using HTML, which would then expose the ALT attribute of the IMG element.
Color
When choosing colors to customize your document, consider these suggestions:
- Use high color contrast with the background, objects, lines, and text.
- Use more than just color to provide more information.
- For example, when using a red sticky note to signify that something is on-hold, consider also adding a tag or other type of label as well.
- Change the background color of your document to be dark to reduce strain on the eyes. As an alternative, use dark frames while maintaining a lighter background.
Response:
- When using colors to customize your document, you should adhere to the following guidelines:
(This is not a suggestion if you are following WCAG 2 as outlined in the revised ADA rulemaking that was recently passed.) - Provide sufficient contrast between background and foreground text and objects.
- You should incorporate a color contrast checking mechanism that determines if the selected color has sufficient contrast with the background color. More and more commercial applications are incorporating this feature into their products.
- This removes the ability of the user to state they didn’t realize there was sufficient contrast because the application indicates it for them using the specific measurements outlined in the WCAG guidelines.
- Do not rely on color alone to convey important information. It isn’t about providing more information; it is about clearly indicating the information you have already conveyed. This is directly related to colorblind issues and low vision issues. Your discussion of adding patterns with colors is very useful toward meeting this requirement.
- You need to accept responsibility for a portion of the issues surrounding the request for dark modes. Providing a means for the end user to select “dark mode, high contrast” as an option for their interface that overrides the colors of the creator is essential to putting control in the hands of the user (both disabled and those that prefer dark mode environments). The key portion of what is outlined in the WCAG guidelines centers around sufficient contrast.
Lines
When using lines to connect objects in your document:
- Increase the pixel size to make the lines thicker and easier to follow.
- Avoid crossing lines over each other if possible. When it is unavoidable, consider using contrasting colors or line jumps.
Response:
- I would add that creators need to consider the purpose of the line and whether or not there are diagramming conventions in place that dictate the nature of the line.
- For example, in ERDs, changing the line type depends on which model of notation you are following. In Barker’s Notation, a solid line indicates a mandatory relationship while a dashed line indicates an optional relationship. In Crow’s Foot notation, the relationship is just a solid line. The optionality is controlled by a symbol on the line. In both cases, randomly changing the line type in order to distinguish the purpose of the line would be inappropriate.
- A better question to ask is “Do I need color for the line at all, when I can label the line?”
- I would like to recommend that you all increase the sizing of the line jumps, as they hug the line they are jumping too closely as it is now. Increasing the line thickness only exacerbates the issue. The spacing on either side of the jumped line should remain proportional to the line thickness.
Organize content
When planning the overall organization of your board, place items in a linear pattern allowing for easy scrolling even when the content is zoomed in. Lucid has a variety of features to help with organizing content. Review the chart below for details on where these features are available. To get more information about a feature, click the relevant linked text in the first column of the table.
Response:
- I would recommend being more specific when stating to place the items in a linear pattern. Linear can be experienced horizontally and vertically. Horizontal scrolling in a web browser is significantly more challenging for those individuals with motor disabilities than scrolling vertically.
Reduce distractions
The following tips can help your document’s viewers stay focused on the content:
- Be consistent with color choices. Use high contrast between text and backgrounds, but avoid excessively bright colors.
- Reduce motion on the canvas by using GIFs sparingly.
- Use simple language and bulleted lists when possible. Avoid large chunks of text.
Response:
- This is critical for individuals with cognitive disabilities.
- I am curious about the statement to avoid excessively bright colors. Is this part of the WCAG, or does it come from research in the area? I have never, in my twenty years of working with accessibility, seen this particular recommendation. That is not to say that I know everything which is why this is more of a curiosity statement than anything else.
- Instead of reducing motion, creators should strive to eliminate motion unless the animated GIF is critical to explaining a concept (which can help cognitive disabilities when used sparingly).
- Use the simplest language needed for the target audience (see previous statement) and avoid large blocks of text by chunking the information.
- When using lists, determine if the list is conveying a sequence of steps or a ranking of items. If the answer is “Yes,” then use a numbered list. If “No,” then use a bulleted list. The litmus test is this: can the order of the list items be changed around without it impacting the meaning of the list? If the order doesn’t matter, it should be listed in bullet points.
Add alt text to hyperlinks
Following the steps in the “Add alt text to objects” section above, use alt text to specify the purpose and destination of any hyperlinks on the document. For example, a screen reader stating "Weather in New York City" is more user-friendly and descriptive than it reading the associated URL: https://weather.com/weather/today/l/USNY0996:1:US
Response:
- ALT is not an attribute that can be used with the Anchor (<a>) tag in HTML.
- The closest approximation would be to use the TITLE attribute of the anchor tag.
- This provides further description of the link's purpose or destination.
- There are arguing camps on the issue of the link text itself.
- Some recommend that the link text be the actual link so that information is exposed to all users in case the link is broken. In this scenario, using the TITLE attribute may help the rendering of the link in screen readers but it is inconsistent.
- Others recommend that the link text use simple language instead of the actual link address. In this scenario, one could place the actual link in the TITLE attribute, depending on the settings for title in the screen reader ,that may cause confusion for screen reader users.
- Relying on the TITLE attribute for crucial information is problematic because it's not consistently exposed to all users, especially those using keyboard navigation, touch devices, or certain screen reader configurations. The TITLE attribute is primarily designed to provide supplementary information that appears when a mouse user hovers over an element or the element receives focus.
Change the reading order
- Follow steps 1-5 in the “Add alt text to objects” section above.
- Use the six-dot icon to drag the numbered items in the list to new positions.
Response:
- This recommendation lacks sufficient context for the user to understand why they are changing the reading order of objects in the document.
- A better title for this tip is Change the reading order of objects in a PDF.
- This would then better outline what the steps are directing the user to do.
- Visual users in most of the world intuitively scan a document by moving from the upper left corner of the document to the lower right corner of the document to gain an overview of the layout of a document. This provides the user with the opportunity to quickly home in on areas of interest. For users with visual disabilities, this is not possible. Therefore, two recommendations come into play:
- For HTML pages, write the content in the order it should be rendered by screen readers, with jump navigation to the main content at the start of the page. All other navigation would come at the end of the linear reading order.
- For PDFs, the user has the ability to control the reading order if the linear reading of the document does not support the ideal flow for a screen reader user. These steps discuss how to change the reading order of objects in a PDF.
