Split up footer links
Closed this issue · 10 comments
Links at the bottom of the page are in two columns, and are announced together. Consider dividing the links so they may be accessed individually when navigating in context. This can be achieved by using an unordered list (e.g. 'Contact us')
Description
Turn footer links into unordered list for easier screen reader access.
Test link: https://sdg.mango-solutions.com/a11y-footer/
Screenshots
Before
After
Successfully tested on...
- Windows: IE11
- Windows: Chrome
- Windows: Firefox
- Windows: Edge
- macOS: Chrome
- macOS: Firefox
- iOS: Safari 9.3
- iOS: Chrome
- Samsung: Chrome
- Samsung: Samsung Internet
User feedback and problems encountered...
Couldn't test on BrowserStack as couldn't change settings to turn on VoiceOver on iOS so have used own mobile. I checked live site first so I knew what I was looking at and couldn't actually see a problem, footers were already announced separately (for both iOS: Safari 12 and iOS: Chrome) , continued with test anyway and still separate on feature branch,
Also couldn't test Samsung devices on BrowerStack for this reason:
Used narrator on laptop to test IE11 and Chrome on windows and all seemed fine i.e. footer links were read out separately - Lucy
Links narrated correctly on MacOS Chrome and Firefox (also tested on Safari) -Savvas
Branch missing (404) - I have rebuilt it and will continue when it's back.
Update: Works correctly on Firefox and Edge. It's also working fine on Samsung Chrome and Internet. However, the links '@ons' and 'FAQ' are read weirdly by the Samsung SR ("at ouhns", "Fay-qwee", making them confusing. @SavvasStephanides let's i) change 'FAQ' to 'Frequently asked questions' and ii) preface Twitter link with 'Twitter: ', as part of #3088. - Chris
Tested with NVDA screenreader on Chrome, Firefox, IE11 and EDGE. All worked fine and and all footer links read out individually when tabbing to them - Sam
Pull requests: #3120 and open-sdg/open-sdg#167
@SavvasStephanides I don't know how we can test this as it's made on open-sdg branch?
@LucyGwilliamAdmin forgot to include a link to my test branch. See updated template comment above under Description 👆
@Norric1Admin I think the branch link might actually be https://sdg.mango-solutions.com/a11y-footer-scss/ rather than https://sdg.mango-solutions.com/a11y-footer (what's in description)
A11y-footer is linking to an open-sdg branch that no longer exists. I've changed the branch and https://sdg.mango-solutions.com/a11y-footer is now working correctly, with the footer changes.
This is now in Open SDG V0.8.0 so closing this issue