Broken copy warning

[SavvasStephanides]

Text that is broken into <span> or <em> tags can be difficult to read by screen readers. This can be avoided by using a [role="text"] tag.

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

It is quite common when adding text to break it down into <span>s or <em>s to apply different styles to different chunks of text. However, screen readers also break down the text into chunks making it difficult for screen reader users to read for features that are irrelevant to the user (styling).

This change adds a warning message next to the span or em that broken copy needs a role='text tag.

The reason this is a warning is because the text might not always be intrusive.

Link(s)

Broken Copy - A11y 101

Screenshot(s)

Checklist:

• I have thoroughly read the CONTRIBUTING guidelines.
• I understand my pull request will be thoroughly reviewed at high detail.
• I understand the work in my pull request will only be available in the next version release of Checka11y.css and not in the current version release.
• I confirm the work in this pull request is valid according to my findings and is not something for anything personal.
• I have updated the README and/or features.md where and if applicable (still put an x if you have considered this but thought there was nothing to add or modify).
• I have added myself to the contributors section in package.json (still put an x if you have considered this but decided not to add yourself).
• I have checked I have not committed any accidental files.
• I have tested all the main modern browsers (I.e. Chrome, Firefox, Edge, Safari - please leave this unchecked if there were any browsers listed you could not test and list them in the help section with details why you couldn't test that browser)
• I have run the automated tests and added new ones to cover new code.
• All new and existing a11y checks still work correctly (compare your local test/index.html to the test/index.html in the master branch).

Help

[jackdomleo7]

This is a neat feature! I always wondered how to resolve this - now I know 💡

[jackdomleo7]

Little nit pick, but could you add a . at the end of the sentence?

[SavvasStephanides]

Sure thing!

[SavvasStephanides]

Thanks @jackdomleo7. Not sure how to resolve the lint check though

[jackdomleo7]

@SavvasStephanides Don't worry about the lint check, there is a bug for it which I need to resolve.

[jackdomleo7]

Nice. Thank you!

[jackdomleo7]

I forgot to ask you to add an example to the test/index.html file. Not to worry, I can add this in one of my current branches 🙂