Accessibility guidelines

Examples of correct and incorrect content in the rich-text editor, based on WCAG guidelines.

Hi,

 

Kind regards,

Robbert

Don't: empty paragraph

Do not use empty paragraphs to create spacing.

Bold

Empty Bold:  

Bold with text: text

Link

Empty Link:  

Link with text: text

Underline

Empty Underline:  

Underline with text: text

Strong

Empty Strong:  

Strong with text: text

Mark

Empty Mark:  

Mark with text: text

Emphasis

Empty Emphasis:  

Emphasis with text: text

Strikethrough

Empty Strikethrough:  

Strikethrough with text: text

Italic

Empty Italic:  

Italic with text: text

Don't: empty inline elements

Clean up empty elements.

There is insufficient difference between the underline of an underline and a link.

Don't: underline text

...

  • Option 1
  • Option 2
  • Option 3

Don't: empty list items

...

  1. Option 1
  2. Option 2
  3. Option 3

Don't: empty list items

...

1. Option 1
2. Option 2
3. Option 3

Don't: ordered list without markup

...

- Option 1
- Option 2
- Option 3

Don't: list without markup

...

text
text

Don't: empty definition list

...

text text text
     
text text text

Don't: empty row in a table

...

Don't: image without alt text

...

If it looks like a heading, it should be a heading

Foo

Don't: heading without proper markup

...

Heading level 1

Heading level 3

Skipping a level is not allowed!

Don't: skip heading levels

...

Table heading
Row 1, cell 1 Row 1, cell 2 Row 1, cell 3 Row 1, cell 4

Don't: table without header cells

...

Column 1

...

Column 2

...

Don't: table without header cells

...

Heading level 1

Heading level 1 again

Don't: more than 1 main heading

...

Text without a main heading

Don't: no main heading

...

Standalone definition
With a term after it

Don't: definition without a term

...

Standalone definition

Don't: definition without a term

...

Heading with bold

...

Don't: heading with bold

...

Heading with italic

...

Don't: heading with italic

...

Read more about why link text matters, in the blog post "click here".

Don't: unclear link text

...