Newsberg Accessibility Issues With Off-canvas Menu - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Newsberg Accessibility Issues With Off-canvas Menu

F

FJN

Template 3 years ago

Hello,

Are there plans to improve Newsberg for accessibility? I'm finding several issues.

Two issues with the off-canvas menu.

Item 1) The off-canvas menu doesn't seem to be available through keyboard commands (i.e. tab key).

Item 2) Very easily fixed -- The "close" link for the off-canvas menu does not pass accessibility testing because, though it acts as a button, is only an empty link with a "a:before" CSS declaration producing an "X" in the interface. Links must have link text to be accessible.

Woud love to have throughts on Item 1.

I fixed item 2 very easily with the following HTML and CSS:

<!-- 
In index.php, add link text "Close Menu" to the otherwise empty 
"close-offcanvas" link (shoud be language constant, as a permanent fix).  
-->

<a href="#" class="close-offcanvas"><span class="fa fa-remove">Close Menu
</span></a>

<!--In CSS: 
First: position the "close-canvas" link to have right-margin space.
Second: override the a:before content value to remove the "X" for close.
Third: remove background from the now removed "X".
Four: set the desired font style as this is not inherited from the preset.
-->

<style>

body.ltr .close-offcanvas { right: 50px; }
.fa.fa-close:before, .fa.fa-remove:before { content: ""; }
.close-offcanvas:hover { color: #ccc; background: transparent; }
.fa.fa-remove { font-family: Helvetica, sans-serif!important; } 

</style>

If I'm missing something in my assessments, please let me know. And also would like to know if accesibility items for Newsberg are on the radar for Joomshaper.

0
3 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #66136

Hi

Thanks a lot for your suggestions and thanks for sharing that solution with us, I will note it down and forward it to our DEV team. So that they will take care of it.

-Regards.

1
F
FJN
Accepted Answer
3 years ago #66736

Just a quick followup. To be compliant with standards for the benefit of assistive technologies, the "Close Menu" function shouldn't be a link at all, but a button HTML element. I suppose if it remains a link, it could use the attribute role="button" but <button> is simpler. Hope this is helpful.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #66842

Thanks a lot for this suggestions. I will note it down.

0