Various web dev resources for friends. :-)
If you came here via the inventory/chat link
I thought I'd document my process and make the code available for anyone to use (as if it isn't already for anyone who was dedicated ). I'll be updating this as I go, so there might be more when you see me again.
So if you want to use this code for your site/project, or just want to read my explanation of it for some reason, keep reading!
I looove point and click games (like Myst and Riven), point and click "games" (like 99 Rooms, and Kong Studios), and websites/online content with lots of hidden easter eggs etc. that take advantage of the web medium (Homestar Runner during the Flash days, Kong Studios again, This House Has People In It, lots of cool Neocities sites, old Neopets, etc.). I've wanted to make something like that since I was a kid, but I'm not good at linear storytelling. This site is a place to store my art, but it's also a place for me to make a den/cave where I can hang the contents of my brain on the digital walls. :-)
I wanted to make my site a place where you can explore and interact with stuff and not just look at stuff. The first thing I added was the fridge ad/gem on the home page. At first there was no indication that the vegetables were clickable until I decided to add a drop shadow on :hover. But even then, I felt like when I added other little easter eggs like the one in the gem ad, I wasn't sure how to let people know that you can and should click on things, or hover over things in my site to find hidden stuff. I made a list of what I thought wasn't working about my site, and where I wanted it to be, and eventually it was more obvious that adding an inventory system would be a good direction to go to encourage people to try clicking/hovering on stuff in my site.
What it Can Do
- Hide and unhide chat box
Display notification for new/unread messages/inventory items
- "Read" messages/inventory item notifications and clear them
- View chat tab or inventory tab
- Add items
- Add messages
What You Can Do
- Use full code
- Use parts of the code
- Alter CSS
- Alter HTML
If you use this code, I'd appreciate, but won't require, attribution of some kind (whether it's in your footer, a "credits" page, or even just an HTML comment). Ideally it would be something along these lines (though feel free to modify the wording to suit your site):Inventory/Chatbox code by Moonflute
And/or you can link to my site with a button:
URGENT MESSAGE BEFORE YOU GET TO THE CODE
This code is still a work in progress, so it has very few accessibility features built in right now. For instance, the notification that pops up when you have an unread message isn't using the "aria-live" property yet, so that change might not be caught by a screen reader, or if it is, it may not be communicated to the user/you properly because the button isn't labelled dynamically right now (I might fix that right now, though, but you get the idea).
If you decide to use this code somewhere, I hope you'll put in the time to bring it up to speed accessibility-wise! Also it's just not finished in any sense. Right now you can't do anything with inventory items, and I want to give the inventory items buttons that appear if you click them to perform actions with them or see flavor text or trigger events or something. I'll update as I go! :) - 09/05/2022
The Code For Real
HTML - Structure
CSS - Styling
This needs to be simplified and reorganized...
This could probably be streamlined more, but I'm going to leave that for later :)
Web Accessibility Resources
The internet is for everyone! I love the idea of everyone being able to have their little slice of the web outside of evil social media corporations' grasp, and that's why I'm creating a small guide as an introduction to web accessiblity! We should be making our sites accessible so that anyone, regardless of disability, can enjoy a smaller, more personal internet without exclusion!
Regardless of whether you read this whole page or not, if you have made or want to make your own website, please consider adding an accessibility extension to your browser that can check your site for a ton of accessibility concerns and give you detailed reports on the specific issues it finds!
The web 1.0(/early web 2.0) revival is really exciting, I love to see more people making their own personal space online where they have total control over what it looks and feels like, so I want to give people who may not have them the tools to make Accessible sites where everyone, regardless of ability, is enthusiastically included. The web is not only for abled people! I'm not perfect myself, but I do my best :o)
Thanks for reading the intro! Feel free to click away from the page now! :)
Table of Contents
Disabled people use the internet! You may be one of us! Depending on disability/ability, there are tools we use to make navigating the internet more accessible to us, and there are also common ways that web developers forget (or simply don't know/care) to make navigating our sites possible for people, regardless of disability.
Keep the following in mind, and let these concerns help you plan and implement your designs.Back to top ^
Semantic HTML & Screen Readers
A website should be navicable without being able to see it. This means that a screen reader should be able to read and understand the structure of your website via the structure of your HTML, not just what it visually looks like on the screen.
Usage of semantic HTML (an expanded feature of HTML5) is one way to achieve this accessibility. The following is a non-exhaustive list of some common best practices.
<a href="/foo/bar.html">descriptive link text</a>(links/anchor tags) should be used to navigate to a different page than the one you are on (ex: a navigation bar at the top, or link to a different site), while
<button onclick="onClickFunction()">Do something</button>should be used for functionality that exists on an individual page (ex: submitting a form, clicking to show spoiler text, toggling a setting, etc.)
- There are exceptions to this of course. For example: you might have a button that both submits a form, and navigates the visitor to another page once that form is submitted successfully, but this is a good rule of thumb to keep in mind
<h1>Header 1 Text</h1>header tags should follow a logical order. You can have two
<h1>s in a row, but you shouldn't start with an
<h4>then have an
Semantic HTML & Focus
Following semantic HTML guidelines wherever possible ensures not just that a screen reader can read the page and understand its structure, but also that functionality is preserved that allows visitors to navigate the page without using a mouse.
Have you ever filled out a form and used the
tab key on your keyboard to navigate from one form field to the next? Do you typically navigate websites without using the mouse at all? It's common to use
tab, among other keyboard keys, to navigate sites to some degree, even if you are using the mouse most of the time. Some people (maybe even you!) don't use mice at all due to disability or preference. In conjunction with a screen reader, visitors should be able to navigate your site in a logical fashion even if they can't visually see it, and visitors should be able to visually see what element they have focused so that they know what they're interacting with even if there is no mouse cursor on the screen to indicate it.
This form of navigation is made possible in part by the focus property that all interactable HTML elements have. This property creates a visual signal around the element that is receiving focus that shows visitors which element on the page is currently selected. In the example of a form, you will often see a blue glow, or black and white border appear around whatever elmement has focus, however focus styles can also be customized.
Check the focus style by clicking on the input below, or using the tab key to move through the focusable elements on the page (and shift + tab to go backward) :o)
Don't style one element to look like another wherever possible. For example: it's not uncommon to see developers style a
<div>tag to look like a button. This happens because
<div>s do not come with the default styling that
<button>s do, therefore if you are trying to style it with CSS in such a way that it looks radically different to a normal button, it can be tempting to use a
<div>instead. However this leads to serious accessibility issues that may prevent a user from being able to use that "button" at all, as divs are not inherently able to receive focus, meaning someone navigating the page without a mouse will not be able to interact with it.
You can customize your focus styling by using the
:focusCSS pseudo-class, but don't remove it, and make sure that what you change it to is visually distinct enough to be seen on all backgrounds on which it may appear (taking into account things like low vision, color blindness, etc.).
- If you haven't already, try navigating your website (or any website) with only the keyboard!
ARIA stands for Accessible Rich Internet Applications, and is simply a set of properties including labels and roles that can be added to HTML elements to make a website more accessible.
I'll be covering just a small selection of scenarios where ARIA properties may be used in a website. See the following examples:
Let's say you have a link to another page, and you want that link to be an image: how do you tell a screen reader what the destination of that link is? If you do something like this:
<a href="/ocs/room_full_of_raccoons.html"><img src="/assets/layout/ocs_georgie_room.png"></a>the screen reader may not be able to glean any useful information, as it cannot describe the image, which has no alt text, and the link has no text. But! You can still make links out of non-text elements like images, icons, emoji, etc.! In this case you can either give the link a "title" property (a property used specifically by links) or you can give it an "aria-label" property, which can be used to describe many elements.
Ok, so now it looks like this!
<a href="/ocs/room_full_of_raccoons.html" aria-label="Georgie's Raccoon Room"><img src="/assets/resources/ocs_georgie_room_01.png" alt="Crudely drawn button containing a cartoon raccoon face and the label 'Georgie's Raccoon room'"></a>
In this case you can use your discretion as to whether you want to use alt text on the image. I chose to do so because it tells you something about the link you might be clicking, but if it's just, say, a social media logo, and you think that the title/aria-label of the link covers it, you don't need to double up, as the screen reader will read both.