Skip to main content

Accessible HTML and Content Reference

Updated

Accessible HTML syntax, writing style, and layout guidelines determine how well custom content and design choices support assistive technology in SmartSimple.

HTML Content

Custom HTML content added to the system must follow accessible coding standards so assistive technology can interpret it correctly.

Table Syntax

Ensuring you are using proper semantic structure will ensure assistive technologies can read table content correctly. When adding a table to the system for display purposes:

  • Set role=presentation on the table element.
  • Use TH for table headers and TD for table data.
  • Add scope (col, colgroup, row, or rowgroup) to header cells.
  • Ensure all tags are properly opened and closed.
  • A tag that opens a TR, TH, TD, or DIV must have a matching closing tag.table syntax
     
NOTE  A page that renders correctly in a browser is not guaranteed to be readable by assistive technology.
IMPORTANT  Do not use BR tags to create visual spacing. Wrap text in a P tag or a block-level element such as a DIV and add a class or style to manage spacing. When a screen reader encounters a BR tag, it pauses reading and the user must advance manually to the next line.BR tag

Nested HTML Tags

HTML tags must be nested in the correct order. The most recently opened tag is always the next one to close. For example, if a SPAN is opened inside a DIV, close the SPAN before closing the DIV.nested tags
 

Bold and Italics

Per HTML5 specifications, follow the following formatting for bold and italics:

Formatting Use Do Not Use
Bold STRONG tag B tag
Italic EM tag I tag
bold and italics tags

 

Underlined Text

Underlined text is perceived as a clickable link, to avoid confusion:

  • Do not underline text unless it is a hyperlink.
  • Use STRONG, EM, or a heading tag to convey importance, not the U tag.

Font Tag

The FONT tag is not supported in HTML5. Its use should be avoided.

Declare Language

The system will automatically declare the language on system generated pages. When adding static content or a page in a SmartFolder, declare the language manually.

To declare the language, add a lang attribute to the HTML tag:

English - lang="en"
Spanish - lang="es"
French - lang="fr"

↑ Back to top

Write Accessible Content

When writing instructions, captions, or other text for the system:

  • Use clear language and avoid jargon.
  • Break content into manageable sections.
  • Keep sentences to fewer than 25 words.
  • Keep content concise.
  • Check reading level using Microsoft Word's built-in readability check or a tool such as Readable.
  • When referencing a button or link, name it explicitly and do not rely on location or color alone.

↑ Back to top

Plan an Accessible Layout

To ensure the layout of a page is accessible, consider:

  • Avoid using location, text size, or color alone to indicate importance.
  • Users of screen readers may not detect that a second column with smaller text is of lesser importance.
  • Use a linear, logical layout.
  • Single-column formats are preferred for accessibility and usability. Research indicates that single-column forms are completed more quickly, and users feel more confident filling them out.

Multi-column forms can result in:

  • Omitted fields.
  • Data entered in incorrect fields.
  • Reading order confusion.
  • Challenges for assistive technologies such as screen magnifiers.

↑ Back to top

When creating links and buttons:

  • Avoid using Click Here as link or button text. Users relying on screen readers navigate from link to link and cannot determine the action from that text alone.

  • Avoid using Open as a button label when multiple buttons appear on a page. Include the specific item name in the label so screen reader users can distinguish between buttons.

  • Keep link text concise. Long descriptions increase cognitive load. Select a few words that best describe the link and avoid using identical text for links that go to different destinations.

  • Links and buttons must describe their destination, purpose, or expected outcome. Examples of effective link text include: Open Budget, View Demo, Start Application, and Visit smartsimple.com.

↑ Back to top

Colors and Styles Considerations

Some considerations when determining your site's colors and styles.

Set a Sufficient Contrast Ratio

To ensure the text to background ratio is accessible:

  • Minimum contrast ratio: 4.5:1 (WCAG)
  • Contrast checking tools: Contrast Checker, WebAIM Contrast Checker
  • Text over images: Same 4.5:1 ratio applies

Avoid Using Color Alone to Convey Meaning

Users who are color-blind or visually impaired may not detect color differences. Accompany color-coded content with text, icons, or structural organization to convey the same information.

Add Text Alternatives for Media

  • Images: Alt text is editable after upload.
  • Closed captioning: Supports multiple caption files by language and can auto-translate one file into additional languages.
  • SmartFolder custom content: Include alt tags or transcripts in the HTML.

↑ Back to top

Session Timeout Setting

When the session timeout feature is active, users receive an alert with the option to continue working after the specified period of inactivity.

Timeout Parameter Guidance
Recommended timeout 90 minutes
Acceptable range 30 minutes to 3 hours
Default 24 hours
Assistive technology consideration Users may need up to 3 times the standard completion time.

↑ Back to top

Media Playback

When using the Upload – Multiple Files Storage custom field with the media library active, video and audio files do not play automatically. This prevents interference with screen readers, which navigate using audio.

When adding custom media and HTML to the system:

  • Do not enable autoplay for video or audio.
  • Avoid blinking or flashing media. Content that flashes more than three times per second can trigger seizures in users with photosensitivity or epilepsy.

↑ Back to top

Helpful Links