Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility Improvements to Squirdle #28

Open
ehollig opened this issue Mar 10, 2022 · 3 comments
Open

Accessibility Improvements to Squirdle #28

ehollig opened this issue Mar 10, 2022 · 3 comments

Comments

@ehollig
Copy link

ehollig commented Mar 10, 2022

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.

@ehollig ehollig changed the title Accessibility Improvements to Squirrel Accessibility Improvements to Squirdle Mar 10, 2022
@Fireblend
Copy link
Owner

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
Copy link

patarapolw commented Mar 14, 2022

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
Copy link
Author

ehollig commented Mar 29, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants