I'm running the Axe plugin to ensure the validity and 508 accessibility of my app, and some of the violations reported are too restrictive and I don't know how to fix them because they are valid cases:
1. "Links must have discernible text"
In reference to a Tooltip link which isn't supposed to have any text. It's a graphic and must exist on the page by itself. In general, how do you handle textless links which are very common?
<a href="#" rel="tooltip" data-toggle="tooltip" title="" data-original-title="This is a tooltip icon by itself">
2. All th elements and elements with role=columnheader/rowheader must have data cells they describe
"We are not sure this is an issue, because: Table data cells are missing or empty"
I have a table where the last column is "Actions" that only contains graphic icons, no text; e.g. there's a View button, Edit button, and Delete button. The column is structured as
<table>
<tr>
<td>
<a href="javascript:void(0)" title="Edit">
<i class="fa fa-pencil" alt="Edit"></i>
</a>
<a href="javascript:void(0)" title="Delete">
<i class="fa fa-trash" alt="Delete"></i>
</a>
</td>
It's the lack of inner-HTML text that triggers Axe's "Empty Cell" violation. Do I just ignore it? This is a common scenario, I don't want to be hit by it constantly.
If your icons, graphics, buttons, or links execute some action you need to provide some text alternative to screen readers that describes the action taken by the link.
Either add an aria-label attribute to the links describing their purpose, or place a span tag with descriptive text within the link that is hidden from sight using CSS but will be accessible to screen readers.
Additionally your usage of the alt attribute on your i elements is incorrect. You should hide the icon using aria-hidden="true", and provide a text alternative via another element.
There is nothing inherently wrong with having an empty td element within a table as the td element has the roll of cell and elements of the roll cell do not require an accessible name. If the cell contains content such as an icon you would want to make sure that an accessible alternative is provided, or if the content is strictly decorative appropriate action is taken.
https://www.w3.org/TR/wai-aria-1.1/#cell
An issue would arise if you had an empty th element as it would have a role of either rowheader or columnheader, and an accessible name is required for both.
https://www.w3.org/TR/wai-aria-1.1/#columnheader
https://www.w3.org/TR/wai-aria-1.1/#rowheader
Helpful information for using icons: https://www.w3.org/WAI/GL/wiki/Icon_Font_with_an_On-Screen_Text_Alternative
Information on describing the purpose of a link: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html#navigation-mechanisms-refs-techniques-head
Hiding content from sighted users: https://webaim.org/techniques/css/invisiblecontent/