Web Accessibility

This is a short article on web accessibility

Web Accessibility is the practice of designing web sites so that they are usable and accessable. This is important because the web is increasingly integraged into our daily lives and in many ways has already become neccessary to function in the modern world. It is something that is important to me because I have minnor visual imparement and struggle with ADHD. All to often websites fail to have even a basic dark mode. Web sites often are littered with flashing text, images, adds and overflowing with pop ups. As someone with ADHD these practaces make the web site nearly unusalbe for me. This problem is further compounded when neurologic coditions such as epilepsy are considered. For those sufffering from epilipsy who have episodes trigged by flashing lights or images simply using the internet can result in physical injuy.

There are many things that can be done to make websites accessable for people with disabilities. It would be overwhelmning to try and envision every possble scenario and there are specific disablities that might be hard to design for. Nevertheless there are some basic design approaches that should always be implemented. The most basic is having a dark mode and ensuring that the website is compatable with screen readers for the blind. Moving slighty beyond that, yet, still remaning basic is to addd a toggle for those suffering from color blindness. This can be as simple as a grey or black and white mode. Certianly not the most attractive, but people suffering from color blindness would rather be able to see whats on the site than get what amounts to a blank page. This is also in the best interests of the website oweners and opeators. Losing traffic because users are unable to see anything on the page due to vision diffculties defeats the entire purpose of having a website in the first place.

Aria attrubutes are HTML attribues that make web content accessible to assistive technologies. ARIA stands for Accessible Rich Internet Applications and was developed specifically to bridge the gap between what a sighted user sees on a screen and what a screen reader actually communicates to a blind or low vision user. Without ARIA, a screen reader might encounter a button built out of a div and have absolutely no idea what to tell the user it is or what it does. ARIA fixes that by letting developers attach meaning to elements that would otherwise have none.

The most commonly used ARIA attribute is probably aria-label. It lets you attach a text description to an element that has no visible label. A good example is an icon button. If you have a button that just shows a magnifying glass icon with no text, a screen reader will either read nothing or read something useless. Adding aria-label="Search" tells the screen reader exactly what the button does. Similarly aria-required="true" tells assistive technologies that a form field must be filled out, which is important because not all screen reader users can see the visual asterisk or red border that sighted users rely on to know a field is required. Another important one is aria-describedby. This lets you link an input field to a separate element that contains a description or error message. So when a user tabs into a form field, the screen reader will read both the label and the description. This is particularly useful for error messages. Instead of a sighted user seeing a red message appearing under a field, a blind user needs the screen reader to announce that message, and aria-describedby is how you make that happen.

aria-live is one that does not get enough attention. It tells the screen reader to watch a particular area of the page and announce any changes to it automatically. This matters because modern web pages are dynamic. Content updates without the page reloading. For a sighted user that is fine, they can see the change. For a screen reader user, if nothing tells the reader that something changed, they will never know. Setting aria-live="polite" on an element means the screen reader will wait until the user is done with what they are doing and then announce the update. Setting it to aria-live="assertive" means it announces immediately, which should be reserved for genuinely urgent things like error messages.

Beyond ARIA there are some structural things that matter just as much. Heading hierarchy is one of them. Screen reader users frequently navigate a page by jumping between headings, the same way a sighted user might skim. If your headings are out of order or you are using heading tags just to make text bigger rather than to create actual structure, you are making the page nearly unnavigable for someone using a screen reader. The rule is simple, one h1 per page, then h2 for major sections, then h3 under those, and so on. Never skip levels.

Keyboard navigation is another one that is easy to overlook. Not everyone uses a mouse. Some people navigate entirely with a keyboard, and some use other assistive devices that behave like a keyboard. Every interactive element on a page, links, buttons, form fields, should be reachable and usable with the Tab key alone. If you build something custom out of divs and spans instead of using actual HTML elements like <button> and <a>, you break keyboard navigation unless you do extra work to fix it. Using proper semantic HTML in the first place avoids most of these problems entirely.

Alt text on images is so basic it almost goes without saying, but it still gets ignored constantly. Every image that conveys information needs an alt attribute that describes what the image shows. Decorative images that add no information should have an empty alt="" so the screen reader knows to skip them entirely rather than reading out a file name.

None of this is complicated. Most of it is just using HTML the way it was intended to be used and thinking for a moment about the people who are going to use what you are building.