Update anchor tags which don't have an href.

Mike-Heneghan / ALISS

ALISS (A Local Information System for Scotland) is a service to help you find help and support close to you when you need it most.

https://aliss.org

0 stars 0 forks source link

Update anchor tags which don't have an href. #108

Closed Mike-Heneghan closed 4 years ago

Mike-Heneghan commented 5 years ago

Currently, in some parts of the project, there are anchor tags which do not have an href attribute. This was noticed on the Actions tab with users being unable to select them using their keyboard only.

Mike-Heneghan commented 5 years ago

Updated the anchor tags for modals and other actions.

Although the solution seemed to be successful the navigation to input fields when the button revealed a form input was a bit jarring.

Also, there was an occasion it seemed that the additional params might have confused the 'Back to last search" although I couldn't repeat it.

Mike-Heneghan commented 5 years ago

Noticed that the "Delete Service" modal "X close" and "Cancel" can't be reached with the keyboard.

Also, the modal is incorrectly labelled 'Delete Organisation".

Mike-Heneghan commented 5 years ago

Began updating the links to add href="#main" stops the issues with the page navigating to items in an unexpected way.

Mike-Heneghan commented 5 years ago

The heading which works as a toggle for the actions box cannot be navigated to by keyboard.

Added a link wrapper to allow it to be selected and operated when there is not enough space on the screen to have it rendered to the right of the content.

Although when there is enough room the styling does cvhange and the link doesn't do anything:

The href="#main" may be a little hacky. I'd be curious if this is bad practice for screen readers etc.

Mike-Heneghan commented 5 years ago

https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element

Mike-Heneghan commented 5 years ago

Began updating the toggle method in JS to add role="button" and aria-expanded to inform users on a screen reader that something is being expanded and collapsed i.e. a form appears. Without this there is no feedback that 'clicking' these links does anything.

Mike-Heneghan commented 5 years ago

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role

Mike-Heneghan commented 5 years ago

https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/

Mike-Heneghan commented 5 years ago

I think there could be opportunities to improve modals for accessibility.

At the moment when a link launches a modal, there isn't much feedback for users on screen readers.

Also, modal elements aren't focused on and at a time are not navigatable.

There are things that can be done to improve modal accessibility as per the following:

https://bitsofco.de/accessible-modal-dialog/

I think adding a href to modal links isn't necessarily enough based on testing with MacOS Voice Over.

Mike-Heneghan commented 5 years ago

https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-expanded

I think the accordion-style click to expand form below for "Email this listing" for example should be using the aria-expanded and the aria-controls attributes as per https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-expanded

Also the toggle headings like "Actions" and "Customise Results"

Mike-Heneghan commented 5 years ago

The solutions required based on the research above became a bit sprawling. Decided to split into more focussed issues.

Mike-Heneghan commented 4 years ago

Associated issues closed.