Work in Progress!
Building AntiChat clone with Firebase and HTML+CSS+JavaScript.
Version 1.2: Add feature for login, logout, subscribe, CSS layouts, view profile, edit profile, delete profile, Message CSS layout.
Demo: https://tpkahlon.github.io/javascript/30/
Source: https://github.com/tpkahlon/javascript/tree/master/30
Reference App: https://www.antichat.me/
Looks like you are having fun. If Gandhi says he likes it then it can’t be all bad.
A few things:
- Your light gray text on purple background is not accessible (does not have enough color contrast).
- The buttons at the top need better keyboard focus indicators (they are basically non-existent). And I’m not crazy about the lightly flashing indicators for the buttons on the login modals.
- On your pop-up modals, it does put the keyboard focus on the first input, which is great. But I am able to break out of the modal using the Tab key. In other words, after I tab through all the available focus elements, the next Tab takes me out of the modal and to the browser controls. A modal needs to trap the Tab key to prevent the focus from leaving the modal. Once you Tab through all the focus elements it should start over from the first one in the modal.
- Technically, your user images need the alt attribute. I think in this case, since you have the usernames next to the images, you can just set alt="" for all of them. For screen readers you should just hide these completely, so also add aria-hidden=“true”.
- The responsiveness is good and I especially liked that you used ‘em’ for the units (I am a big fan of that). At the default font size if I narrow my browser as far as it will go I do not get a horizontal scroll bar. But if I increase the text size just a little then I get one. I’m only at 150% right now and it seems like there is plenty of room to have the text fit without needing a scroll bar (you might have to move the user image and picture to separate lines though). I am being very picky here, so do with this suggestion as you like. Obviously at some point the text size will be too large to fit in a narrow window without needing a horizontal scroll bar. I’m just suggesting that you could make the tolerance a little bit more lenient.
Overall, very nicely done.
1 Like
Really like the changes! The focus indicators are great. I’m not an artist so I’m not even going to try to offer color suggestions. Just whatever you do, make sure the color contrast is enough so the text can be easily read.
For the Tabbing issue, do the following:
- Open the Login modal
- Do not click anything with your mouse. Using just your keyboard, hit Tab three times to advance the focus to the Cancel button
- In a properly functioning modal, if you now hit Tab again, the focus should go back to the Email input and then the whole cycle starts over again. The keyboard focus should never leave the modal window. Currently, when you hit Tab in this situation the keyboard focus leaves the modal and in my case goes to the controls at the top of my browser window (reload button, address bar, etc…). It may go somewhere slightly different for you. The point is that it leaves the modal window instead of wrapping around to the email input. Hence, you have to “trap” the Tab key inside of the modal.
The easiest way to see the font size issue is to first use Firefox. Go to the View -> Zoom menu and activate ‘Zoom Text Only’. Hold down Ctrl and then scroll the middle mouse button to make the text size bigger. Once you have this working, narrow the browser as far as it will go and then slowly start increasing the text size. I won’t take long until you see the horizontal scroll bar. Again, I’m not saying what you have now is bad, it really is quite good. I’m just suggesting you could make it a little more responsive to larger text by keeping that scrollbar from appearing quite so soon.
1 Like