Check for no <title> and empty <title>

jackdomleo7 / Checka11y.css

A CSS stylesheet to quickly highlight a11y concerns.

https://checka11y.jackdomleo.dev

MIT License

446 stars 31 forks source link

Check for no <title> and empty <title> #155

Closed alvaromontoro closed 2 years ago

alvaromontoro commented 2 years ago

Description

Add detection for missing or empty title (missing uses has which is experimental, note added as code comment)
Update code and features
Update demo page (leave title empty)
Add tests for new feature
Build and minify

Why is this important?

A missing or empty title would be an accessibility issue because it makes it more difficult for some users to orient themselves and navigate through the pages.

Resolves #153.

Covered test cases

New test cases added to check for empty page title.

Did you test on all major browsers?

[x] Chrome
[x] Firefox
[ ] Edge
[x] Safari

Other details

N/A

T&Cs

[x] I confirm I have read and understand the contributing guidelines
[x] I understand the work in this pull request will not be released straight away and will appear in a future release (if approved)
[x] I confirm the work in this pull request is true and valid to the best of my knowledge
[x] I have updated the README, features.md and codes.md files where applicable

alvaromontoro commented 2 years ago

I was questioning whether this would interfere with <title> that can often appear inside <svg> but it doesn't because you're targeting the <head> so that's good 👌

@jackdomleo7 an empty <title> in an SVG would most likely be an accessibility violation too. But I think it would be trickier as the SVG in itself could be pointing to an external element for the title/description. And that part may make it tricky.

Maybe it would be good to create a ticket for a warning in case the <svg> does not have a <title> and a <desc>.