Accessibility - For the icons and forward button

FAC-Sixteen / Tinkl

Project for Weeks 10-12 of Founders and Coders

https://tinkl.herokuapp.com/

1 stars 1 forks source link

Accessibility - For the icons and forward button #37

Closed jokosanyang closed 5 years ago

jokosanyang commented 5 years ago

Currently, they are being done as inputs like: <input class="button button__forward" type="button" name="Forward" onclick="window.location.href='{{navForward}}'"> and `

<input class="button button__accessible" type="button" name="accessible">
<input class="button button__free" type="button" value="FREE">
<input class="button button__genderNeutral" type="button" name="genderNeutral">`

Could this be done with real buttons? a tags? Which is more/most accessible? Are they all equal if we include an Aria-label?

jokosanyang commented 5 years ago

@RohanSSS also just suggested invisible checkboxes?

samhstn commented 5 years ago

<input class="button button__forward" type="button" name="Forward" onclick="window.location.href='{{navForward}}'">

This doesn't look right to me, I'd use an a tag

Fweddi commented 5 years ago

Or should we just use DOM?

samhstn commented 5 years ago

For icons you can use an i tag. See how font-awesome suggests you write your icon html: https://fontawesome.com/v4.7.0/icon/tag

arrested-developer commented 5 years ago

A link should be an a tag, it’s what they’re for! You can still style it to look like a button

Wait a minute... is this for the filters? Are they basically checkboxes?

jokosanyang commented 5 years ago

@samhstn Ahhh, a wildcard option! I like it. @arrested-developer The second chunk is for the filters, so yeah, basically checkboxes.

jokosanyang commented 5 years ago

Did some research into it (read: read an article): All of them can be styled and their click behaviour can do the same, so main thing is semantics.

Anchor - link, used for any navigation or downloads

probably the best option for our nav buttons

Input type=button - has no default behaviour, used in forms to add non-standard behaviour, can be disabled!

maybe not the best option for us

Button - introduced after inputs, can nest content inside, type must be set to "button", "submit" or "reset". If no type is set, it will be "submit". Can be disabled!

For the filters page: We have chosen to have hidden checkboxes to preserve accessibility and semantics.

jokosanyang commented 5 years ago

Completed in #45