search

Fireblend / squirdle

Squirdle, a Pokemon Wordle-like
Apache License 2.0
37 stars 28 forks source link

Accessibility Improvements to Squirdle #28

Open ehollig opened 2 years ago

ehollig commented 2 years ago

I am a blind developer and have suggestions to make this program easier to use for someone who is blind.

In the template, <div> is currently used to identify a table. Please use appropriate <table> to identify the table, <th> to identify table headers, <tr> for table rows, and <td> for table cells.

Also, after submitting a result, provide alt="Red/Yellow/Green" to each image, with title="Red/Yellow/Green" as well. This will allow screen readers, used by blind or low vision players to identify the result, as well as allow users to hover the mouse over the image to identify the color, in case of color blindness.

I'm happy to make the above changes to the template, but it appears you are not accepting PRs at this time. Let me know if more information is needed.

Fireblend commented 2 years ago

Hey there ehollig, thanks for the notes! I'm an HTML amateur and I apologize for the inconvenience that has caused. If you'd like to submit a PR now that the transition to javascript has been completed, feel welcome to do so! If not, hopefully I'll be able to get around to doing this for the next round of improvements. Thanks again!

patarapolw commented 2 years ago

Something like this.

 <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

About <img> tags, it is usually like this.

 <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Still, changing HTML tags will involve some CSS changes as well. Some CSS resets might help a little.

ehollig commented 2 years ago

Exactly @patarapolw. I see that a lot of this project is built on CSS rather than semantic HTML. I can make the requested changes, but am afraid I would also break the CSS in the process. If I could get some assistance with less reliant on CSS that would be helpful in continuing to improve the semantic accessibility of this project.