Accessibility issue with the theme
sine-w opened this issue · 24 comments
Hello,
First of all, I am very thankful for your theme.
It has been very amazing.
And I have adopted your theme.
I am personally a screen reader user. i.e. We need to use keyboard to navigate between items.
I found that, there are two items on the left of the share to facebook, share to twitter, that cannot be jump to with keyboard tab.
For the search, I have problem in locating it. is it possible to add a landmark for it?
if my keyboard focus onthe search, I cannot activate the search box by space or enter.
also the item on left of search do not have a label.
If possible, can you make a change for it?
If not I probably have to remove this item from my blog.
Thanks.
Thank you for commenting on the template.
Well, l have updated its source code with adding role attribute to search button for landmark and aria-label attribute to side bar (menu button to the left of search button) for label.
Please, try the template again.
HI, I found that your tamplet is very nice designed.
Though I made a few changes, you are welcome to take a look at https://viplittlestar.blogspot.com/
-
I changed the title of post from h3 to h2, because according to accessibility design, the level of headings should follow the order. If based on your design, and when blog post is loaded, there is no h2 in the page.
-
I added roles and title to close, view more, back to top svg
But I don't know what is avatarIcon and I don't know wwhat label to add to it -
I added an extra navigation page list links at the bottom of every page.
I'm glad you used the template.
It is wonderful to change h3 to h2 in the post title of the index pages. I will update the template's source code as well.
But I think it's better to stop using title tags in the body element. Typically, only one title tag is used for the page title in the head element. You can use title attribute, if you need additional information.
Example: <span title='additional information'>Contents</span>
I use the class of avatarIcon for the image of commentator who don't have Blogger account.
It may not be necessary to label it.
But I think it's better to stop using title tags in the body element. Typically, only one title tag is used for the page title in the head element. You can use title attribute, if you need additional information.
Sorry, I do not understand, did you found me using title in the body?
I use the class of avatarIcon for the image of commentator who don't have Blogger account.
Oh I see, thanks.
Yes, I found you using title such as follows in the body.
<span class='svg-icon-24-button hamburger-menu'><svg class='svg-icon-24' role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0z' fill='none'></path><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'></path><title>Open side menu 側欄菜單</title><desc></desc></svg></span>
This markup could be changed for example as follows:
<span class='svg-icon-24-button hamburger-menu' title='Open side menu 側欄菜單'><svg class='svg-icon-24' role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0z' fill='none'></path><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'></path><desc></desc></svg></span>
Five title tags are used for Open side memu, Search, Share, Back to top and Close in the body element of your blog.
Oh, please refer to the w3org svg document,
https://www.w3.org/TR/SVG2/struct.html
that is the accessibility standard.
Thank you for the information.
Now, I understand the accessibility standard in SVG markup.
Thank you for the information.
Now, I understand the accessibility standard in SVG markup.
No thanks.
Because I am a screen reader user, thus taking care of the accessibility issue more.
Also, I am just learning about all this stuff, do correct me if I have made something wrong.
Your blog is wonderful. And I learn a lot to make a good template.
e> Your blog is wonderful. And I learn a lot to make a good template.
No no, it is only because your design is beautiful.WWW
Well, I am thinking of one issue, not knoow if you know how to fix.
When page is loaded, you have set the sidebar and the search area to be hidden.
But actually these elements are readable by me using screen reader.
I am looking at
https://www.nomensa.com/blog/2017/how-improve-web-accessibility-hiding-elements
But Isaw that you have already using display none at the initial.
Maybe you can stop screen reader just like not showing contents on the screen by using aria-hidden attribute.
The aria-hidden attribute stops screen reader when it has the value of "true". And it runs screen reader when it has the value of "false".
Source: https://www.w3.org/TR/wai-aria-1.1/#aria-hidden
I programmed the buttons of search and side bar with JavaScript. So to implement aria-hidden in the template not only HTML but JavaScript source code has to be rewritten.
I'll try it and reply to you later.
I modify the six parts of the template's source code in order to implement aria-hidden in the buttons of search and side bar.
Two parts of HTML
Add code that is aria-hidden='true' to div element having the id of swc and aside element having the class of sidebar-container
<div aria-hidden='true' class='widget-content hidden' id='swc'><aside aria-hidden='true' class='sidebar-container container sidebar-invisible slideout-sidebar'>
If the screen reader stops, using aria-hidden attribute is appropriate.
Four parts of JavaScript
It is necessary to rewrite the source code in the script tag near the end of the entire template's source code.
Insert four codes about aria-hidden in the right place between hbm.onclick and function expand there.
hbm.onclick = function(){ sbct.classList.remove("sidebar-invisible", "slideout-sidebar"); bdis.classList.add("sidebar-visible"); sbct.setAttribute("aria-hidden", "false"); document.body.appendChild(bcsd).classList.add("dim-overlay");}; clb.onclick = function(){ sbct.classList.add("slideout-sidebar"); sbct.setAttribute("aria-hidden", "true"); setTimeout(function(){ sbct.classList.add("sidebar-invisible");}, 180); bdis.classList.remove("sidebar-visible"); document.body.removeChild(bcsd);}; bcsd.onclick = function(){ sbct.classList.add("slideout-sidebar"); setTimeout(function(){ sbct.classList.add("sidebar-invisible");}, 180); bdis.classList.remove("sidebar-visible"); document.body.removeChild(bcsd);}; var snot = 0; sce.onclick = function(){ snot++; if (snot % 2 !== 0) { swc.classList.remove("hidden"); shrb.style.display = "none"; swc.setAttribute("aria-hidden", "false");} else { swc.classList.add("hidden"); shrb.style.display = "grid"; swc.setAttribute("aria-hidden", "true");}}; function expand(event)
I can't see it working, but if you're happy, the coding will be successful.
I can't see it working, but if you're happy, the coding will be successful.
You are amazing.
Yes, I found it working very well.
Really really thanks for your work.
That's great.
I'll update the template in the same way.
Sorry, I forgot to modify a part of JavaScript.
bcsd.onclick = function(){ sbct.classList.add("slideout-sidebar"); sbct.setAttribute("aria-hidden", "true"); setTimeout...}
This code sets screen reader to stop when the side bar is closed by clicking a space outside it, not close button.
Haha, thanks thanks. I reapply your theme again, and have to make all those changes again.
One thing for your notice.
I noticed you are very nice that added many labels to svg.
1.
Usually we do not use visual labels, we use functional labels,
e.g. donnot use Triple bar, but use side menu
- seemed that you added labels in many aspect, and not screen reader tab onto the side bar menu, and it will say
Triple bar side menu Triple bar
so in that case, I suggested that you can either keep the <title> but replaced with side bar, or keep the aria-label side bar
Thanks for your suggestion.
I updated the template to code role='img' and individual aria-label attribute and to remove title element for SVG icon.
I donot understand, why the close button of side bar became unaccessible now.
I saw that you have given label close to svg ,
and it is accessible on my iphone
I feel the side bar has become a little slow since implementing aria-hidden.
It may be due to increased program processing.
I feel the side bar has become a little slow since implementing aria-hidden.
It may be due to increased program processing.
Oh, I feel sorry that my suggestions slowing down your theme.
Sorry, I found another fix in JavaScript souce code.
Insert the code that is if (sbct.style.position === "absolute") { sbct.setAttribute("aria-hidden", "false");}; as below.
var acebtns = [].slice.call(document.querySelectorAll("span.show-less")); if (getComputedStyle(sbct).position !== "fixed") { sbct.setAttribute("aria-hidden", "false");}; hbm.onclick = function()...
It is necessary to keep the screen reader from stopping when the side bar is opened from the beginning on a PC with a large screen.
It's okay for the theme to be slow.
I think it's important to respond appropriately to screen readers.
Sorry, I found another fix in JavaScript souce code.
Insert the code that is
if (sbct.style.position === "absolute") { sbct.setAttribute("aria-hidden", "false");};as below.
var acebtns = [].slice.call(document.querySelectorAll("span.show-less")); if (sbct.style.position === "absolute") { sbct.setAttribute("aria-hidden", "false");}; hbm.onclick = function()...It is necessary to keep the screen reader from stopping when the side bar is opened from the beginning on a PC with a large screen.
戈I changed to
var acebtns = [].slice.call(document.querySelectorAll("span.show-less"));
if (sbct.style.position === "absolute") { sbct.setAttribute("aria-hidden", "false");};
hbm.onclick = function(){
But I donnot notice any change
The change only affects blogs viewed on computers with screens larger than the entire blog width.