Skip to content

Commit

Permalink
Improve README.md accessibility for screen readers (#995)
Browse files Browse the repository at this point in the history
* Improve README.md accessibility for screen readers

1. The "issue" and "pull request" badges are removed because they're obvious that you can already see the counters on GitHub.
2. Add width for the remaining badges. https://web.dev/optimize-cls/#images-without-dimensions
3. Improve alt texts of the badges (the alt texts on ## Screenshots is still not worked on yet)
4. Add height = '353' for the screenshots

* Remove some unnecessary trailing slashes on `img` elements README.md

See https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements

---------

Co-authored-by: throwawayaccountfor <121148372+throwawayaccountfor@users.noreply.github.com>
  • Loading branch information
throwaway-d and throwaway-d authored Dec 26, 2023
1 parent cdd2a90 commit 85ef51d
Showing 1 changed file with 13 additions and 17 deletions.
30 changes: 13 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,24 @@
src = '/assets/icon.png'
height = '100'
width = '100'
alt = 'Icon'
/>
alt = ''
>
<br>
YouTube Spammer Purge
<br>
</h1>

<!---------------------------------[ Badges ]---------------------------------->

<div align = 'center'>
<a href = 'https://github.com/ThioJoe/YT-Spammer-Purge/issues'>
<img src = 'https://img.shields.io/github/issues/ThioJoe/YT-Spammer-Purge'/>
</a>
<a href = 'https://github.com/ThioJoe/YT-Spammer-Purge/pulls'>
<img src = 'https://img.shields.io/github/issues-pr/ThioJoe/YT-Spammer-Purge'/>
</a>
<div align = 'center'>
<a href = 'https://github.com/ThioJoe/YT-Spammer-Purge/releases'>
<img src = 'https://img.shields.io/github/v/release/ThioJoe/YT-Spammer-Purge?include_prereleases&label=Latest%20Release'/>
<img src = 'https://img.shields.io/github/v/release/ThioJoe/YT-Spammer-Purge?include_prereleases&label=Latest%20Release' height = '20' alt = 'Latest Release'>
</a>
<a href = 'https://github.com/ThioJoe/YT-Spammer-Purge/actions/workflows/codeql-analysis.yml'>
<img src = 'https://github.com/ThioJoe/YT-Spammer-Purge/actions/workflows/codeql-analysis.yml/badge.svg'/>
<img src = 'https://github.com/ThioJoe/YT-Spammer-Purge/actions/workflows/codeql-analysis.yml/badge.svg' height = '20' alt = 'CodeQL'>
</a>
<a href = 'https://github.com/ThioJoe/YT-Spammer-Purge/actions/workflows/docker-build.yml'>
<img src = 'https://github.com/ThioJoe/YT-Spammer-Purge/actions/workflows/docker-build.yml/badge.svg'/>
<img src = 'https://github.com/ThioJoe/YT-Spammer-Purge/actions/workflows/docker-build.yml/badge.svg' height = '20' alt = 'docker-build'>
</a>
</div>

Expand Down Expand Up @@ -116,27 +110,31 @@ Read some additional details about 'moderator mode' on the [wiki page here][Mode
<h2>Filter Mode Selection</h2>
<br>
<img
width = '675'
height = '353'
width = '675'
alt = 'Filter Mode Selection'
src = 'https://user-images.githubusercontent.com/93459510/174273476-5af0a1ad-9ca1-4fea-976d-e731ce336922.png'>
<br>
<h2>Scanning<br>(Auto Smart Mode)</h2>
<br>
<img
height = '353'
width = '675'
alt = 'Scanning (Auto Smart Mode)'
src = 'https://user-images.githubusercontent.com/93459510/174273577-38e51d30-f313-4053-ba31-bb2724770dda.png'>
<br>
<h2>Matched Comments List</h2>
<br>
<img
height = '353'
width = '675'
alt = 'Matched Comments List'
src = 'https://user-images.githubusercontent.com/93459510/174273656-0fb22382-ec88-4e63-88f3-e4a93ac1f1ad.png'>
<br>
<h2>Match Samples and Deletion Menu</h2>
<br>
<img
height = '353'
width = '675'
alt = 'Match Samples and Deletion Menu'
src = 'https://user-images.githubusercontent.com/93459510/174273744-3d5a174a-904a-493e-af37-bcca44c57820.png'>
Expand Down Expand Up @@ -168,8 +166,7 @@ bash <(curl -s https://raw.githubusercontent.com/ThioJoe/YT-Spammer-Purge/main/i

<img
width = '500'
src = 'https://user-images.githubusercontent.com/60006481/154855672-165565a1-50db-47d4-bf39-0fb576710f63.gif'
/>
src = 'https://user-images.githubusercontent.com/60006481/154855672-165565a1-50db-47d4-bf39-0fb576710f63.gif'>

See one of the following if you need further help:
* [Linux Setup Instructions][Instructions Linux]
Expand All @@ -181,8 +178,7 @@ To update YTSpammerPurge, run the `install.sh` file inside your installation.

<img
width = '500'
src = 'https://user-images.githubusercontent.com/60006481/154855673-bf2e8fdb-eaa3-4583-a2a1-80ef4816e2bc.gif'
/>
src = 'https://user-images.githubusercontent.com/60006481/154855673-bf2e8fdb-eaa3-4583-a2a1-80ef4816e2bc.gif'>

##### Manual Installation

Expand Down

0 comments on commit 85ef51d

Please sign in to comment.