I'm working on an existing project and make some fixes for accessibility support. One of the items from my accessibility list refers to the ShareThis social buttons. For some reason it doesn't support navigation from keyboard. I've added "tabindex=0" attribute to all social icons <span> elements. So now I can navigate, but I can't activate it by clicking "Enter". Do I really need to write my own JS functions for all this buttons? Maybe there is accessability solution that somebody wrote before for ShareThis?
The tabindex attribute you added will make the spans focusable by keyboard, but doesn't provide any support for Enter events. You will need to add listeners for Enter in JavaScript. Alternatively you could switch the spans to links or buttons - these have native keyboard support so won't need the additional JavaScript.
Related
first time here and completely new to coding. I want to track button clicks on my website in Tag Manager. The button is a thumbnail in an image gallery. It's the only video in the gallery and I want to see how popular it is compared to the images. The trigger type is 'All elements' and I tried to use Click Class as a trigger. The problem is that all the thumbnails in the gallery have the same class. So there is no way to identify the video thumbnail. Can't use Click URL either since it's not a link. It doesn't have an ID either. Any tips?
What you need here is to use a more specific CSS selector to the element you're wanting to trigger on. Most modern browsers can help you out there. If you right click the element you want to capture clicks on, you'll have something along the lines of "Inspect Element" as an option.
Chrome Example
In Chrome, this appears at the bottom of the list under "Developer Tools -> Inspect" as I see when I do the same for the Ask Question button on this page.
Firefox Example
In Firefox, this is just the Inspect option at the bottom of the context menu.
Other browsers will generally be similar. Selecting that option will open the Developer console, but will generally auto-select the element you selected from the page. In Chrome (again, other browsers will be similar), right click the element and select Copy -> Copy selector.
This will copy a more specific selector than just the element's CSS ID to your clipboard. You might want to copy this down somewhere temporarily.
Back to GTM - You're right that you want to use the "Click - All Elements" trigger type here. Select the "Some Clicks" option so we can apply a filter to the event. Set the left-most option to "Click Event", the middle option to "matches CSS selector" and the paste the value for the CSS selector you've got in your clipboard. Save that, and you're good to go!
Now, this assumes that you're not doing a lot of dynamic work on your page. The CSS selector your browser gives you will be accurate for that very moment, but it may very well specify classes that change dynamically (e.g. if you're using a single-page application like Angular or Vue), so you might need to tweak it a bit to be generic enough that you can capture the element, but not so specific that it looks for a particular class that might change each pageload.
I'm working on a site that requires WCAG 2.0 AA adherence, but although we try to make tab navigation usable on our sites, it does detract heavily from the design due to the strange borders and outlines being rendered when you click a focusable element.
My thinking is, hide all focus states until the tab key is actually pressed.
So, my question is, does this pose any potential problems with accessibility technologies for the web?
Remember that sometimes focus is placed on elements without using a keyboard, such as via script or third-party tools (like screen readers prior to page interaction). Also note that even screen reader users do not necessarily use the Tab key (for example, I can navigate the headings on a page by pressing H in most screen readers, and on mobile I can navigate a page elements without using a keyboard at all. Also note that some users with cognitive impairments benefit from focus styles even when using a mouse.
As such, if I were reviewing a site that disabled focus styles only until someone pressed the Tab key, I would still fail it for 2.4.7
Focus Visible. It might be helpful to read the Understanding SC 2.4.7 document for a little more context.
To answer your question, yes, removing it does post potential accessibility problems.
All that being said, I would instead challenge the designer to do what designers tend to do best — work within constraints. Come up with focus styles that are not distracting, with styles that are perceivable, operable, understandable, and robust (so, for example, it meets contrast minimums). It has been done before, so there is no reason it cannot be done again.
Please see attached screenshots. Is there a way to create a div that shows the HTML snippet exactly as it was inside the CKEditor window? In my app, certain users enter in text using CKEditor, which other users need to see in view-only mode. Some of the simple styling is preserved (e.g. italics, bold) but other important styling elemenets (e.g. highlighting, table borders) are lost.
I think that the easiest option will be to use CKEditor in the read-only mode.
The reason why I recommend using entire CKEditor is that you can take the HTML that's inside it, but you would also need to get the same stylesheets and that won't be easy.
I guess that you may want to display the read-only content as if it isn't placed in an editor. For that you could use the inline mode or an editor without toolbar, elementspath and resize plugins. In the second case remember to disable the ACF.
I have a style that I apply to my buttons. Can I apply the same style to the button of the file upload element without affecting the entry field?
<input type="file" name="myFile">
The designing of file element is not supported by almost all browser. Some browser allow it and some browser does not allow it.
You can not make it browser compatible. Basically you do not have complete control to design it.
You can also go with this article
Due to security concerns, browsers doesn't allow you to edit or style the upload button. It can be exploited to trick the user. Example
I'm using the jQuery UI Button widget to style all the buttons on my pages, but the button on a 'file' type input remains elusive. How do I style this button in general, and can I somehow apply the Button widget to it?
Here is a write up about styling the "browse" button (and problems therein) http://www.cs.tut.fi/~jkorpela/forms/file.html#present
File input elements are notoriously difficult to style.
There's a workaround described on quirksmode - check it out. I find it horribly hacky but it seems to work.
If you need more styling possibilities, you may have to look at a Flash-based uploader like SWFUpload. They work in a different way however - Flash uploads the file data directly - so you may have to change the way your forms work.