How accessible is Fullcalendar? - accessibility

I'm having problems making FullCalendar fully accessible. I'm using the default month view and can't access the next, previous, and today buttons on the top right without using a mouse. If I run a screen reader, I can access those buttons but not without running the screen reader.
And on another note, I currently am using tool tips that pop up when you mouse over an event title to display more information. If anyone has any tips on how to make those accessible to a screen reader or accessible without a mouse, I'd greatly appreciate it!

Regarding the buttons, I would advice that you write new buttons if accessibility is important. These buttons you could then hook up to your own javascript functions that moves to previous and next.
Check out this documentation example
Regarding the second problem, I think that's the same problem not just for physically impaired but also for things like mobile browsers. My tip would be to avoid onmouseover if the information that appears is really important.

Related

Changing my website cursor into a coffee icon, pouring coffee whenever the user clicks on something

I have a personal website and I want to spice it up a bit while also learning some front-end.
An idea I had was that the cursor of my website would be a coffee instead of the default one, and anytime I click on any content, the coffee pours.
Any idea if this is possible and if so, what I need to do to implement it?
You can change the cursor using CSS - see https://www.w3schools.com/cssref/pr_class_cursor.asp and do something like
div {
cursor:url(myCoffeeJug.cur),auto;
}
You could then use Javascript to change the cursor shape (ie URL) when the user clicks in the div. You'd need to think how to change it back again after whatever operation the click triggers is complete.
Note that you can't do animations this way - but given that clicking on a div is likely to be quite a quick action, just switching to and back from a different icon might well be enough for what you want.
However this is perhaps not a great idea from the usability point of view. Web users are used to the basic types of cursor provided by browsers - overriding them may be cute, but it can also be confusing.
If your site is designed for 'ordinary' users looking for information or functionality (rather than for web designers, or as a showcase for your techniques), you're putting a small barrier in their way. Users who are not confident, or are new to all this, or non-neurotypical users may find it off-putting.

Is it possible to make screen readers stop reading at some point of the page?

I am facing an issue of aria and accessibility aria labels.
That's my problem:
After opens a page, I need that the screen reader reads the title and then stop reading the rest of the page.
I need that the screen reader stops there, and just continue reading after the user uses TABS to navigate.
does anyone know if it is possible?
The screen reader user has complete control over how much information is read. They might have their settings so that nothing is read when the page is loaded except maybe the page title. Or they might have it set so the entire page is read. It's not something you can control, nor should you. It's very user specific.
Adding to the already existing answer:
Of course you could force something like this using aria notifiy (aka on page load aria notify page title, and that's it). this would lead to the screenreader getting interrupted, the page title getting announced and then silence until the user moves (or other notification arrives). But this kind of behaviour would be super confusing to blind people, as it is pretty unnatural.
I myself am blind and believe me: Blind people, especially NVDA or Jaws users (don't know about Window Eyes) have an entire scripting language at the ready if need be. They may choose to make your web page appear completely different for them than it appears for others, react in different ways - and how verbose the page is presented (on braille display and voice) is entirely up to the blind user. Don't bother with that, they'll figure it out themselves
If the talking of the screenreader annoys them, they can always press shift to pause the screenreader or control to silence it altogether. They'll be fine.

How to create Numeric KB interface with previous, next and done button

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.

How do I make a mobile-friendly popup on my website?

Is there a simple way to trigger a mobile OS's native pop-up/alert/etc. from some form of web code? I'm writing an ASP.NET mobile web page and I'd like to, for example, have the iPhone's UIAlertView appear.
EDIT: What I'm looking for is not the method with which to detect which mobile browser is accessing the site (I already know how to do that). If the code to trigger a pop-up that will look nice in an Android browser is different than the code to trigger a pop-up that will look nice in an iPhone browser, I can simply throw in a switch statement that redirects the user to the pop-up that corresponds with their browser. I'm trying to find the html/javascript/asp.net code which will create a mobile-friendly pop-up, either in general or for the various popular mobile web browsers specifically.
Don't know whether there is any pre-built functionality in .NET that can achieve this, but you can surely write one yourself.
You can write a method, that returns the code for your popup, based on the user OS (simple switch statement should do).
EDIT after taking a short nap:
I believe you should reconsider using popups. They are quite annoying even on desktop browsers and many people block them automatically. Probably every blog about accessibility will tell you, that you should keep mobile version of your website as simple as possible because of various compatibility issues that you can run into.
Instead, try to think about some interesting way to incorporate messages for users in a different and appealing way, that won't disturb anybody.
What I do is use a div popup (that floats ontop of the page) and eighter make a big close button or set at timeout to remove it.
jquery mobile is a good place to start.

Disable Focus to Browser

Can any one tell how to disable focus to a browser.
Hi i am currently working in .net application and i need to disable the tab focus to browser objects such as toolbars,address bar, since the user will not be using these components often
Thank you
Please don't do this, it breaks what the user expects a webpage to do. Messing with the fundamental behavior breaks several things:
My tab button and where I expect it to go
Screen readers for the disabled
Trust in your application
In some cases, you need to ask why? before asking how?, this is one of those. Anything that behaves differently from the other 99.9999% of the web is broken in the eyes of your user.
Well, I agree with Nick Craver. If you have to disable due to some crap requirements, then try opening a new window without toolbar, editable address bar etc and load the page inside the newly opened window.

Resources