Add additional accessibilty

GavHern commented

2021-05-23 20:18:49 -04:00

(Migrated from github.com)

Makes GDBrowser more accessible to people who have motor or visionary impairments.

Gives many formerly inaccessible buttons tab indices so they can be accessed through keyboard navigation. Triggers a click event when the user presses Enter while focused on them
Disables CSS transitions and animations for people who have reduced motion enabled in their system settings. Also disables them for very low-performance browsers that may be slowed down by transitions.

This can still be built on but is just a very basic implementation to make the website more useable with the keyboard. For better accessibility, the markup could be rearranged where necessary, so tabbing through items is more predictable. I've rearranged some things on the home page for that reason but I've left other pages as is.

Additionally, tabindex attributes are added to inaccessible via javascript, but would be more efficient by adding them to each element in the markup directly. I didn't want to intrude too much on the project, I just wanted it to be a little more usable with the keyboard.

Makes GDBrowser more accessible to people who have motor or visionary impairments. - [x] Gives many formerly inaccessible buttons tab indices so they can be accessed through keyboard navigation. Triggers a click event when the user presses <kbd>Enter</kbd> while focused on them - [x] Disables CSS transitions and animations for people who have reduced motion enabled in their system settings. Also disables them for very low-performance browsers that may be slowed down by transitions. This can still be built on but is just a very basic implementation to make the website more useable with the keyboard. For better accessibility, the markup could be rearranged where necessary, so tabbing through items is more predictable. I've rearranged some things on the home page for that reason but I've left other pages as is. Additionally, `tabindex` attributes are added to inaccessible via javascript, but would be more efficient by adding them to each element in the markup directly. I didn't want to intrude too much on the project, I just wanted it to be a little more usable with the keyboard.

GDColon commented

2021-05-23 21:17:09 -04:00

(Migrated from github.com)

Whoaa this looks super promising, thank you so much! I'll look through the fork a little bit later

GDColon commented

2021-05-26 11:19:59 -04:00

(Migrated from github.com)

Alright I looked through it, it works really nicely! Obviously it's not perfect but still helpful nonetheless. My only suggestion before merging is that instead of making a new .js file for accessibility you could just add it to sizecheck.js (probably going to rename the file anyways since I use it for all global scripts now).

GavHern commented

2021-05-26 11:46:19 -04:00

(Migrated from github.com)

oh alright, I can do that a little bit later.

lmk if there's anything else UI/UX related that you might need someone to work on!

oh alright, I can do that a little bit later. lmk if there's anything else UI/UX related that you might need someone to work on!

GavHern commented

2021-05-27 21:11:25 -04:00

(Migrated from github.com)

Sorry about the delay. I've added an additional commit to this pr. Let me know if that's what you needed.

GDColon commented

2021-05-28 12:55:03 -04:00

(Migrated from github.com)

Looks good! I might try to expand on this in the future

GavHern commented

2021-05-28 13:02:31 -04:00

(Migrated from github.com)

Mmk. I think the main issues are that the markup structure is unpredictable sometimes and that modals and other similar components may need to be focused automatically when opened.

Add additional accessibilty #150