I need to have my prestahop (1.7.8) pass web accessibility check and i went through resolving most errors except of 2 which i consider also stupid ones..
The control arrows of default theme's image slider has no contrast. (The control arrows are white and the wave Accessibility app is comparing them with the blank slider box no matter the image added in the slider)
In the product page the quantity add remove quantity arrows give the following error "A button is empty or has no value text." So far i have only succeeded n removing the quantity arrows completely by removing the code from the theme.js file.
Has anyone any idea how i can properly correct these errors without ruining the theme?
Sounds like you are using a scanner to check the accessibility of your code. In particular, the Wave tool from WebAIM. Note that scanning tools can only catch a small percentage of accessibility issues. The number ranges from 20-30%, leaving 70-80% of accessibility issues untested. You need to perform manual accessibility testing to find the remaining issues.
Also note that scanning tools aren't flawless. They can report false positives. So it's possible that your two remaining errors are not real errors. Applying CSS and background images when testing for color contrast can be quite tricky and some scanning tools will report an error when there isn't one, or might NOT report an error when there IS one.
With those two caveats in mind, we'll need more details about your code before we can give detailed advice.
With your second error, it's sounds like you might have a '+' and '-' button for quantity. If those buttons are images and the image doesn't have an alt attribute, or if they're CSS :before elements that don't have a pronounceable character, then WAVE will tell you the button doesn't have any text.
i still can't figure out how to resolve the quantity arrows (up/down)..
I did edit the theme.js file to remove the arrows but now the language change is not working... so i ended up reuploading the original theme.js which now shows the same initial web accessibility error.
Do you have any suggestion as to what to edit/where?
Related
The website of PageSpeed Insight is the only place, where i get CLS issue in both of field and lab data.
Any other Lighthouse instance (by WPT, as API or by DevTools) displays CLS issue only in field data, not in the lab.
How can i diagnose correctly, which elements are causing CLS? Example.
PS: My question has the following cause: analyzing other websites i usually have under devtools → performance red diamonds layout shift, which, if clicked, display in tab Summary some data about this layout shift. Like on the screenshot:
But on the example site i get CLS diagnosted, but not displayed.
The synthetic (lab) tests only load the page (they do not interact with it), whereas field data is until page unload.
Immediately I can see one Layout shift is when you open either of the drop down menus, your scroll bars disappear (due to adding the class .overlayed) and the whole page shifts around. Synthetic tests do not open the menu so will never capture it, however this shouldn't actually contribute to CLS as it requires interaction to open (just something to fix).
The other thing I noticed is the bottom right corner icons cause a layout shift when you scroll and they collapse / open (the floating icons). This is likely to be the cause of CLS as it isn't via direct interaction. Scrolling does not count as user interaction when it comes to CLS.
My guess is that this is the one that gets found by synthetic tests sometimes and not others.
Finding Layout Shifts
In order to find layout shifts you can open developer tools, go to rendering panel (you may need to open it with "more tools") and click "Layout Shift Regions" so it is selected.
Now use the site and you will get a blue box around anything that shifts.
Or you could use performance traces
The other way is to run a performance trace in the performance tab and then just use the site. Once you are done complete the trace and it will tell you if a layout shift occurred and what item caused it.
Tracking them in the field
In order to capture layout shifts in the field yourself you should use something like Google Web Vitals library along with click / mouse position tracking etc and pipe it to your own backend or Google Analytics for analysis.
This lets you find issues with the page a lot more quickly and easily using Real User Metrics (RUM) data in real-time.
We're using Barlow, available for free from Google fonts, in a web app. Here's the way a sample phrase looks when rendered on Google's example page. (If you want to reproduce it, you will need to enter the custom text yourself and adjust the slider to 14px.)
Note, in particular, the distinct space between the bottom of the i and its dot above, as well as the clarity of the top part of the f.
This is how the same phrase looks when rendered in our app, as reproduced in this Code Pen.
Note the muddy space between the i and its dot, as well as the muddy top curve to the f.
I've tried looking through all the styles on the elements in question, and I can't find any style that should affect these differently. The network tab clearly shows that the bold version of the font is being loaded; it doesn't look as if this could be faux bold.
This may seem trivial, but we've actually had quite a few complaints about how the font looks in our app, specifically that the bold, lowercase i looks like an l.
Anyone have an idea what might be happening here?
Update: Using Chrome on a Mac; I can confirm the same issue in Firefox. This is on an external display... on a retina there's no problem, as there is way more detail.
The problem turned out to be a problem with the source repo: "hinting got missed in the most recent commit" and the Google specimen (which looked correct) was "actually running an earlier version."
Happily, the maintainer was able to get the problem fixed with a subsequent version.
I was on website on my iPhone and I encounter websites' guestbook. with those textFields. my keyboard appearance was totally change as you can see in screen below.
I am having many text fields in my app, I am wondering if I can create anything like that.
As I am new to development, still unknown what are the limits.
Can anyone guide me to right direction or to right documentation.
Is there is some regular way or its just total customization over Keybard.
I have one more doubt, does it matter what kind of keyboard is popping up as my all fields have numeric keyboard.
Well I just wanted to be helpful to someone who is following the same learning curve as me.
To achieve the affect in screenshot in question. UIToolbar control can be used to make those buttons. after the you need to just make this toolbar appear and disappear with the keyboard.
To make previous and next button work, you can use the tag property of textfield. on clicking on previous or next you can focus to previous or next text field.
Sorry about not posting code as I have not coded it yet but wanted to give pointer to anyone, who is looking.
We have a library bar filled with items, which can be dragged from and dropped onto it. Now the client wishes to see something like a scrollbar or arrows on the side, to have an indication if items are outside of the visible port.
As you can see in the librarybar template below, it contains a surface scrollviewer. Yet I don't seem to be able to reveal these scrollbars.
Any suggestions on how to resolve this issue?
The librarybar template:
http://pastebin.com/QVnvqbNm
Managed to solve it. Answer was easier then expected. Found out that the scrollbars were cleanly removed, but all properties regarding it were still present. Kind of misleading.
Easiest way to solve:
Open expression blend.
Insert SurfaceScrollViewer
Open Template from the SurfaceScrollViewer
Copy SurfaceScrollbars & necessary templates to the templates/resources
from your library bar
Adjust the templates to meet your requirements
I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that