Squiz Viper is a true inline WYSIWYG editor that can also be used in-context to provide a truly integrated editing experience. Inline editing tools are provided to help content authors reach common editing tools based on their current selection. An integrated WCAG2 accessibility auditor based on HTML_CodeSniffer provides inline accesibility checking with resolution interfaces for common mistakes.
The following resolution interfaces are provided by Squiz Viper:
Error: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
Solution: Make sure the image's alt text describes the purpose of the link it's being used for.
Example:
<a href=""><img src="" /></a>Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
Solution: Enter a short text description of the image, or define the image as purely decorative.
Example:
<img src="" />Error: Img element with empty alt text must have absent or empty title attribute.
Solution: Ensure this image is purely decorative. If not, enter appropriate alt and title text.
Example:
<img src="" alt="" title="Link title text" />Warning: Img element is marked so that it is ignored by Assistive Technology.
Solution: Ensure this image is purely decorative. If not, enter appropriate alt and title text.
Example:
<img src="" alt="" />Notice: Ensure that the img element's alt text serves the same purpose and presents the same information as the image.
Solution: Ensure the image's alt text describes the purpose or content of the image.
Example:
<img src="" alt="Link alt text" />Error: Img element inside a link must not use alt text that duplicates the content of a text link beside it.
Solution: Update the image's alt text to something other than the nearby link "[Link text]".
Example:
<a href=""><img src="" alt="My link text"> My link text</a>Error: If both a summary attribute and a caption element are present for this data table, the summary should not duplicate the caption
Solution: Update either the table's caption or summary so they are not identical.
Example:
<table summary="Information about the table">
<caption>Information about the table</caption>
<thead>
<tr><th>Heading</th></tr>
</thead>
<tbody>
<tr><td>Content</td></tr>
</tbody>
</table>Error: Incorrect headers attribute on this td element. Expected [expected headers] but found [actual headers]
Solution: Fix the header attribute of this cell.
Example:
<table summary="Information about the table">
<caption>Caption for the table</caption>
<thead>
<tr><th id="heading">Heading</th></tr>
</thead>
<tbody>
<tr><td headers="content">Content</td></tr>
</tbody>
</table>Warning: Content appears to have the visual appearance of a bulleted list. It may be appropriate to mark this content up using a ul element.
Solution: This section of content resembles a content list. If this is intentional, it should be converted to the proper list format.
Example:
<p>* First item<br />* Second item</p>Warning: Content appears to have the visual appearance of a numbered list. It may be appropriate to mark this content up using an ol element.
Solution: This section of content resembles a numbered list. If this is intentional it should be converted to the proper list format.
Example:
<p>1. First item<br />2. Second item</p>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: Convert the B tag to the more appropriate STRONG tag.
Example:
<b>My text</b>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: Convert the I tag to the more appropriate EM tag.
Example:
<i>My text</i>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The U tag should be removed to reduce confusion with links.
Example:
<u>My text</u>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The S tag needs to be replaced with a DEL tag.
Example:
<s>My text</s>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The Strike tag needs to be replaced with a DEL tag.
Example:
<strike>My text</strike>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The TT tag needs to be replaced with a CODE tag.
Example:
<tt>My text</tt>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The BIG tag needs to be removed.
Example:
<big>My text</big>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The SMALL tag needs to be removed.
Example:
<small>My text</small>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The CENTER tag needs to be converted to a CSS based alignment method.
Example:
<center>My text</center>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The FONT tag needs to be removed. Consider using a CSS class on the containing element to achieve variations in fonts/colours/sizes etc.
Example:
<font size="2">My text</font>Error: Semantic markup should be used to mark emphasised or special text so that it can be programmatically determined.
Solution: The ALIGN attribute needs to be converted to a CSS based alignment method.
Example:
<p align="right">My text</p>Warning: Heading markup should be used if this content is intended as a heading.
Solution: If a paragraph's content consists solely of bold or italic text to simulate a heading it should be converted to the appropriate heading level.
Example:
<p><strong>My heading text</strong></p>Warning: Consider using the summary attribute of the table element to give an overview of this data table.
Solution: Enter a summary for the table.
Example:
<table>
<caption>Table caption</caption>
<thead>
<tr><th>Heading</th></tr>
</thead>
<tbody>
<tr><td>Content</td></tr>
</tbody>
</table>Notice: Check that the summary attribute describes the table's organization or explains how to use the table.
Solution: Enter a summary for the table.
Example:
<table summary="Table summary">
<caption>Table caption</caption>
<thead>
<tr><th>Heading</th></tr>
</thead>
<tbody>
<tr><td>Content</td></tr>
</tbody>
</table>Warning: Consider using a caption element to the table element to identify this data table.
Solution: Enter a caption for the table.
Example:
<table summary="Table summary">
<thead>
<tr><th>Heading</th></tr>
</thead>
<tbody>
<tr><td>Content</td></tr>
</tbody>
</table>Notice: Check that the caption element accurately describes this table.
Solution: Enter a caption for the table.
Example:
<table summary="Table summary">
<caption>Table caption</caption>
<thead>
<tr><th>Heading</th></tr>
</thead>
<tbody>
<tr><td>Content</td></tr>
</tbody>
</table>Error: Iframe element requires a non-empty title attribute that identifies the frame.
Solution: Enter an appropriate title for the iframe to describe it's purpose.
Example:
<iframe src=""></iframe>Notice: Check that the title attribute of this element contains text that identifies the frame.
Solution: Enter an appropriate title for the iframe to describe it's purpose.
Example:
<iframe src="" title="Frame title text"></iframe>Error: Duplicate id attribute value "[Element ID]" found on the web page.
Solution: Update the ID to be unique.
Example:
<p id="myid">Para 1</p><p id="myid">Para 2</p>The following resolution interfaces are still be completed:
Error: Associate data cells with multi-level table headings using the headers attribute.
Error: Associate data cells with table headings using either the scope or headers attribute techniques.
Error: Not all td elements contain a headers attribute, which list the ids of all headers associated with that cell.
Error: Not all th elements in this table contain an id attribute, so that they may be referenced by td elements' headers attributes.
Error: The language specified in the lang attribute of this element does not appear to be well-formed.
Error: This table appears to be used for layout, but contains a caption element. Layout tables must not contain captions.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent