--- title: Accessibility Basics --- ## Accessibility Basics > "The Dark Arts are many, varied, ever-changing, and eternal. Fighting them is like fighting a many-headed monster, which, each time a neck is severed, sprouts a head even fiercer and cleverer than before. You are fighting that which is unfixed, mutating, indestructible." > > --Professor Severus Snape, Harry Potter Series Accessibility's role in development is essentially understanding the user's perspective and needs, and knowing that the web, and applications are a solution for people with disabilities. In this day and age, more and more new technologies are invented to make the life of developers, as well as users, easier. To what degree this is a good thing is a debate for another time, for now it's enough to say the toolbox of a developer, especially a web developer, is as ever-changing as the so called "dark arts" are according to our friend Snape. One tool in that toolbox should be accessibility. It is a tool that should ideally be used in one of the very first steps of writing any form of web content. However, this tool is often not all that well presented in the toolbox of most developers. This could be due to a simple case of not knowing it even exists to extreme cases like not caring about it. In my life as a user, and later a developer, who benefits from accessibility in any form of content, I have seen both ends of that spectrum. If you are reading this article, I am guessing you are in one of the following categories: * You are a novice web developer and would like to know more about accessibility. * You are a seasoned web developer and have lost your way (more on that later). * You feel that there is a legal obligation from work, and need to learn more about it. If you fall outside these rather broad categories, please let me know. I always like to hear from the people who read what I write about. Implementing accessibility impacts the entire team, from the colors chosen by the designer, the copy written by the copywriter, and to you, the developer. ## So, what is accessibility anyway? Accessibility in itself is a bit of a misleading term sometimes, especially if English is your second language. It is sometimes referred to as inclusive design. If your site is on the Internet, reachable by anyone with a web browser, in one sense that website is accessible to everyone with a web browser. But, is all content on your website actually readable, usable and understandable for everyone? Are there no thresholds that bar certain people from 'accessing' all the information you are exposing? You could ask yourself questions like the following ones: * If you add information that is only contained in an audio file, can a deaf person still get that information? * If you denote an important part of your website with a certain color, will a colorblind person know about it? * If you add images on your website that convey important information, how will a blind or low-vision person know about it? * If you want to navigate the application with keyboard or mouth-stick, will it be possible and predictable? * Does your application assume the orientation of the device, and what if the user can't physically change it? * Are there forgiving timed aspects of your application for someone that might need more time to fill in a form? * Does your application still work (progressive enhancement) assuming that JavaScript does not load in time? * You can even go as far as saying, if your website is very resource-heavy, will someone on a slow or spotty connection be able to read your content? This is where accessibility comes into play. Accessibility basically entails making your content as friendly, as easy to 'access' as possible for the largest amount of people. This includes people who are deaf, low-vision, blind, dyslexic, mute, on a slow connection, colorblind, suffering from epilepsy, mental fatigue, age, physical limitations, etc. ## Why implement accessibility? You may think that accessibility doesn't apply to you or to your users, so why implement it? What would a blind person do with a photo editing tool? The truth is, you're right to a certain degree. If you have done meticulous user research and have excluded any chance of a certain group of people visiting your website, the priority for catering to that group of people diminishes quite a bit. However, doing this research is key in actually defending such a statement. Did you know there were blind gamers? and even blind photographers?. Perhaps you knew musicians can be deaf? If you did, good for you. If not, I guess this drives my point home all the more. The picture gets even more complicated when we look at legislation that actually forces you to make certain websites and web apps accessible. A prime example is the US-based section 508. Right now, this law mainly refers to government organizations, public sector websites etc. However, laws change. Last year, airline websites were included in this list which meant that even here in Europe, airline website devs scrambled to make their content accessible. Not doing so can get your company a fine of literally tens of thousands of dollars for each day the problem isn't fixed. There's variations on this legislation all over the world, some more severe and all-encompassing than others. Not knowing about that fact doesn't make the lawsuit go away, sadly. ## Ok, so accessibility is a big deal. Now how do we implement it? That question, sadly, is harder to answer than it may seem. The Harry Potter quote at the top is there for a reason, and it's not my being an avid Fantasy reader. As I stated above, accessibility is important for a large group of different people, each with their own needs. Making your website work for literally everyone is a large, on-going task. To bring a bit of a method to the madness, the Web Content Accessibility Guidelines or WCAG were composed. This document contains a number of criteria you can use to check your website. For now, I will cover some of the most important basics here. I will point you at the low-hanging fruits, so to speak. In subsequent articles, I will discuss more advanced techniques like [WAI-ARIA] which is important for JavaScript-based apps. ### Talk like the natives The HTML specification is a document that describes how the language should be used to build websites. Assistive technologies, like screen-readers, speech recognition programs etc. are aware of this document. Web developers however, often are not, or at least not enough, and think something like this is ok: ```html
Huge heading I will style with CSS later English ``` Guess what? All three of these elements break several criteria of WCAG and therefore are not accessible at all. The first element breaks the so-called 'name, role, value'-criterium, which states that all elements on a web page should expose their name, their role (like button) and their value (like the contents of an edit field) to assistive technologies. This div actually doesn't provide any of the three, rendering it invisible to screen-readers. The second element looks like a heading visually after styling it with CSS, but semantically is a span. Therefore, assistive technologies won't know its a heading. A screen-reader will read this as regular text, instead of a heading. Screen-readers often have a hotkey to quickly jump to the nearest heading, this heading will not be included in that scope. The third element could for example be an element a user can click to change the language of the website. Maybe a fancy animated menu of languages will expand when it is clicked. However, this is also a span and does not expose its role (link, or button), making assistive technologies think this is just the word English with some styling. Spans and divs are non-elements. They are meant to contain other elements, not to be elements themselves. You can fix these in two ways: * You can manually add ARIA-attributes to the elements above. This is an advanced topic and outside the scope of this article. * Or, you can simply do this: ```htmlinput
tag. This little guy is kinda important.
When you put some input fields on a web page, you can use labels to ...well ...label them. However, putting them next to each other is not quite enough. The attribute you want is the for-attribute, which takes the ID of a subsequent input field. This way, assistive technologies know what label to associate with what form field.
I guess the best way to illustrate this is by giving an example:
```html