[#12446] - [a11y] Protostar back to top
- Fixed in Code Base
- 25 Oct 2016
- Medium
- Build: 3.7.x
- # 12446
- Diff
- brianteeman:ally-back_to_top
- Success continuous-integration/drone the build was successful Details
- Success continuous-integration/travis-ci/pr The Travis CI build passed Details
- Success JTracker/HumanTestResults Human Test Results: 3 Successful 0 Failed. Details
User tests: Successful: Unsuccessful:
For accessibility purposes all links should be meaningful and the current back to top link in the protostar template is just a # which is not meaningful.
Web Content Accessibility Guidelines (WCAG) 2.0, Level A: 4.1.2 Name, Role, Value
Also added an anchor at the top so that this "back to top" functionality will work on a non-js enabled browser
Summary of Changes
This simple PR turns the link to #top and adds an ID to the body
Testing Instructions
- Apply the PR and ensure that the back to top link in protostar still works
- Apply the PR, disable JS in your browser and ensure hat the back to top link in protostar will work
Documentation Changes Required
none
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Category | ⇒ | Front End Templates (site) |
zero-24
- | Milestone |
Added: |
||
My reading was that the link has to be meaningful. "Back-top" is meaningful
and as its functionality in the template is performed by JS to go to the
top of the page there is no need for the id=top
On 17 October 2016 at 14:18, andrepereiradasilva notifications@github.com
wrote:
@brianteeman https://github.com/brianteeman this does not seem correct.
you are pointng the href to the back to top link element itself.IIRC to achieve that W3C WCAG complience you need to point to an element
in the top (so the window scrolls to there).
so probably you need to add an id="top" in the body tag or something and
then point this link to that tag href="#top"—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#12446 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8RAyPkH6TKPr03mvY1fCwUbAjCaNks5q03WIgaJpZM4KYmsd
.
Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
https://brian.teeman.net/ http://brian.teeman.net/
DOH - sorry - my brain was not on correct - I have changed it to #top
I still dont think there is a need for the id=top
you should have the id="top" somewhere in the top html of the page for correctness, if not, you are pointing that anchor element (a) to nowhere in the page ...
if we have js behaviour doing a pretty scroll is another thing, but should work without the js.
Ok I will add it for the non js users. Although that's really unrelated to
the pr
Added an anchor for not JS enabled browsers. added test instructions to OP
tested with success (didn't work on the tracker) so i write manually here
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12446.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12446.
I have tested this item
Oops, that was my bad.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12446.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12446.
| Title |
|
||||||
| Labels |
Added:
?
|
||
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-10-25 17:36:37 |
| Closed_By | ⇒ | rdeutz |
-Thanks
On 25 Oct 2016 6:36 p.m., "Robert Deutz" notifications@github.com wrote:
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#12446 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABPH8epsMtlVeQFQX1bD-5XuPAtuEsrFks5q3j4lgaJpZM4KYmsd
.
| Labels |
Removed:
?
|
||
btw. I cherry picked the commit and merged it also into staging, spotted too late that it was based for 3.7.x
@brianteeman this does not seem correct. you are pointng the href to the back to top link element itself.
IIRC to achieve that W3C WCAG complience you need to point to an element in the top (so the window scrolls to there).
so probably you need to add an
id="top"in the body tag or something and then point this link to that taghref="#top"