accessibility 101
Pages 616
- Home
- Home
- 10 Steps To Plan Better So You Can Write Less Code
- 5 Steps to organizing a successful Campsite event
- Academic Honesty Policy
- accessibility 101
- Accessing the database from your frontend
- Adding Environment Variables
- Adding Snippets In Sublime Text
- Adding Snippets To Sublime Text
- Advantages and Disadvantages of Javascript
- Algorithm Arguments Optional
- Algorithm Binary Agents
- Algorithm Boo who
- Algorithm Caesars Cipher
- Algorithm Check for Palindromes
- Algorithm Chunky Monkey
- Algorithm Confirm the Ending
- Algorithm Convert HTML Entities
- Algorithm Diff Two Arrays
- Algorithm DNA Pairing
- Algorithm Drop It
- Algorithm Everything be True
- Algorithm Exact Change
- Algorithm Factorialize a Number
- Algorithm Falsy Bouncer
- Algorithm Find The Longest Word in a String
- Algorithm Finders Keepers
- Algorithm Friendly Date Ranges
- Algorithm Inventory Update
- Algorithm Make a Person
- Algorithm Map the Debris
- Algorithm Missing letters
- Algorithm Mutations
- Algorithm No Repeats Please
- Algorithm Pairwise
- Algorithm Pig Latin
- Algorithm Repeat a String Repeat a String
- Algorithm Return Largest Numbers in Arrays
- Algorithm Reverse a String
- Algorithm Roman Numeral Converter
- Algorithm Search and Replace
- Algorithm Seek and Destroy
- Algorithm Slasher Flick
- Algorithm Smallest Common Multiple
- Algorithm Sorted Union
- Algorithm Spinal Tap Case
- Algorithm Steamroller
- Algorithm Style Guide
- Algorithm Sum All Numbers in a Range
- Algorithm Sum All Odd Fibonacci Numbers
- Algorithm Sum All Primes
- Algorithm Symmetric Difference
- Algorithm Title Case a Sentence
- Algorithm Truncate a String
- Algorithm Validate US Telephone Numbers
- Algorithm Where art thou
- Algorithm Where do I belong
- Algorithms Merge Sort
- Angular Resources
- Arithmetic Operators
- Array.isArray
- August 2015 Improvements
- August Live Stream
- Back End Project Resources
- Backend file structure
- beta
- Bobby Tables
- Bonus SocketIO
- Bootstrap
- bot announce
- botdemo
- botintro
- Brownie Points
- Browser Storage
- Camper News
- camperbot
- Campsites
- Capitalize First Letter Of String
- chai
- chai assert
- chai cheat
- Challenge Access Array Data with Indexes
- Challenge Access Multi Dimensional Arrays With Indexes
- Challenge Accessing Nested Arrays In Json
- Challenge Accessing Nested Objects In Json
- Challenge Accessing Objects Properties With Bracket Notation
- Challenge Accessing Objects Properties With The Dot Operator
- Challenge Accessing Objects Properties With Variables
- Challenge Add a Negative Margin to an Element
- Challenge Add a Submit Button to a Form
- Challenge Add Alt Text to an Image for Accessibility
- Challenge Add Borders Around your Elements
- Challenge Add Different Margins to Each Side of an Element
- Challenge Add Different Padding to Each Side of an Element
- Challenge Add Elements within your Bootstrap Wells
- Challenge Add Font Awesome Icons to all of our Buttons
- Challenge Add Font Awesome Icons to our Buttons
- Challenge Add ID Attributes to Bootstrap Elements
- Challenge Add Images to your Website
- Challenge Add New Properties to a JavaScript Object
- Challenge Add Placeholder Text to a Text Field
- Challenge Add Rounded Corners with a Border Radius
- Challenge Add Two Numbers with JavaScript
- Challenge Add your JavaScript Slot Machine Slots
- Challenge Adding A Default Option In Switch Statements
- Challenge Adjust the Margin of an Element
- Challenge Adjusting the Padding of an Element
- Challenge Appending Variables to Strings
- Challenge Apply the Default Bootstrap Button Style
- Challenge Assignment With A Returned Value
- Challenge Assignment with Divided by Equals
- Challenge Assignment with Minus Equals
- Challenge Assignment with Plus Equals
- Challenge Assignment with Times Equals
- Challenge Bring your JavaScript Slot Machine to Life
- Challenge Build JavaScript Objects
- Challenge Call out Optional Actions with Button Info
- Challenge Center Text with Bootstrap
- Challenge Chaining If Else Statements
- Challenge Change Text Inside an Element Using jQuery
- Challenge Change Text with Click Events
- Challenge Change the Color of Text
- Challenge Change the CSS of an Element Using jQuery
- Challenge Change the Font Size of an Element
- Challenge Check Radio Buttons and Checkboxes by Default
- Challenge Check the Length Property of a String Variable
- Challenge Clone an Element Using jQuery
- Challenge Comment out HTML
- Challenge Comment your JavaScript Code
- Challenge Comparison With The Equality Operator
- Challenge Comparison With The Greater Than Equal To Operator
- Challenge Comparison With The Greater Than Operator
- Challenge Comparison With The Inequality Operator
- Challenge Comparison With The Less Than Equal To Operator
- Challenge Comparison With The Less Than Operator
- Challenge Comparison With The Strict Equality Operator
- Challenge Comparison With The Strict Inequality Operator
- Challenge Comparisons With The Logical And Operator
- Challenge Comparisons With The Logical Or Operator
- Challenge Concatenate Strings with .concat
- Challenge Concatenating Strings with Plus Operator
- Challenge Concatenating Strings with the Plus Equals Operator
- Challenge Condense arrays with reduce
- Challenge Construct JavaScript Objects with Functions
- Challenge Constructing Strings with Variables
- Challenge Convert JSON Data to HTML
- Challenge Count Backwards With a For Loop
- Challenge Create a Block Element Bootstrap Button
- Challenge Create a Bootstrap Button
- Challenge Create a Bootstrap Headline
- Challenge Create a Bootstrap Row
- Challenge Create a Bulleted Unordered List
- Challenge Create a Class to Target with jQuery Selectors
- Challenge Create a Custom Heading
- Challenge Create a Form Element
- Challenge Create a JavaScript Slot Machine
- Challenge Create a Set of Checkboxes
- Challenge Create a Set of Radio Buttons
- Challenge Create a Text Field
- Challenge Create an Ordered List
- Challenge Create Bootstrap Wells
- Challenge Create Decimal Numbers with JavaScript
- Challenge Declare JavaScript Objects as Variables
- Challenge Declare JavaScript Variables
- Challenge Declare String Variables
- Challenge Decrement a Number with Javascript
- Challenge Delete HTML Elements
- Challenge Delete Properties from a JavaScript Object
- Challenge Delete your jQuery Functions
- Challenge Disable an Element Using jQuery
- Challenge Ditch Custom CSS for Bootstrap
- Challenge Divide One Number by Another with JavaScript
- Challenge Escape Sequences in Strings
- Challenge Escaping Literal Quotes in Strings
- Challenge Fill in the Blank with Placeholder Text
- Challenge Filter Arrays with filter
- Challenge Find Numbers with Regular Expressions
- Challenge Find the Length of a String
- Challenge Find White Space with Regular Expressions
- Challenge Finding a Remainder in Javascript
- Challenge Generate Random Fractions with JavaScript
- Challenge Generate Random Whole Numbers with JavaScript
- Challenge Generate Random Whole Numbers within a Range
- Challenge Get Geo location Data
- Challenge Get JSON with the jQuery getJSON Method
- Challenge Give a Background Color to a Div Element
- Challenge Give Each Element a Unique ID
- Challenge Give your JavaScript Slot Machine some stylish images
- Challenge Global Scope And Functions
- Challenge Global Vs Local Scope In Functions
- Challenge Headline with the h2 Element
- Challenge House our page within a Bootstrap Container Fluid Div
- Challenge Import a Google Font
- Challenge Increment a Number with Javascript
- Challenge Inform with the Paragraph Element
- Challenge Inherit Styles from the Body Element
- Challenge Initializing Variables with the Equal Operator
- Challenge Introducing Else If Statements
- Challenge Introducing Else Statements
- Challenge Introducing Javascript Object Notation Json
- Challenge Invert Regular Expression Matches with JavaScript
- Challenge Iterate Odd Numbers With a For Loop
- Challenge Iterate over Arrays with map
- Challenge Iterate Through An Array With A For Loop
- Challenge Iterate with JavaScript For Loops
- Challenge Iterate with JavaScript While Loops
- Challenge Join Strings with .join
- Challenge Label Bootstrap Buttons
- Challenge Label Bootstrap Wells
- Challenge Learn how Script Tags and Document Ready Work
- Challenge Line up Form Elements Responsively with Bootstrap
- Challenge Link to External Pages with Anchor Elements
- Challenge Local Scope And Functions
- Challenge Make Circular Images with a Border Radius
- Challenge Make Dead Links using the Hash Symbol
- Challenge Make Images Mobile Responsive
- Challenge Make Instances of Objects with a Constructor Function
- Challenge Make Object Properties Private
- Challenge Make Unique Objects by Passing Parameters to our Constructor
- Challenge Manipulate Arrays With pop()
- Challenge Manipulate Arrays With push()
- Challenge Manipulate Arrays With shift()
- Challenge Manipulate Arrays With unshift()
- Challenge Manipulate JavaScript Objects
- Challenge Modify Array Data With Indexes
- Challenge Multiple Identical Options In Switch Statements
- Challenge Multiply Two Numbers with JavaScript
- Challenge Nest an Anchor Element within a Paragraph
- Challenge Nest Many Elements within a Single Div Element
- Challenge Nest one Array within Another Array
- Challenge Nesting For Loops
- Challenge Override All Other Styles by using Important
- Challenge Override Class Declarations by Styling ID Attributes
- Challenge Override Class Declarations with Inline Styles
- Challenge Override Styles in Subsequent CSS
- Challenge Passing Values To Functions With Arguments
- Challenge Perform Arithmetic Operations on Decimals with JavaScript
- Challenge Prefilter JSON
- Challenge Prioritize One Style Over Another
- Challenge Quoting Strings with Single Quotes
- Challenge Remove an Element Using jQuery
- Challenge Remove Classes from an element with jQuery
- Challenge Render Images from Data Sources
- Challenge Replacing If Else Chains With Switch
- Challenge Responsively Style Checkboxes
- Challenge Responsively Style Radio Buttons
- Challenge Return A Value From A Function With Return
- Challenge Return Early Pattern For Functions
- Challenge Returning Boolean Values From Functions
- Challenge Reverse Arrays with reverse
- Challenge Save your Code Revisions Forever with Git
- Challenge Say Hello to HTML Elements
- Challenge Selecting From Many Options With Switch Statements
- Challenge Set the Font Family of an Element
- Challenge Set the ID of an Element
- Challenge Sift through Text with Regular Expressions
- Challenge Size your Images
- Challenge Solution Template
- Challenge Sort Arrays with sort
- Challenge Specify How Fonts Should Degrade
- Challenge Split Strings with split
- Challenge Split your Bootstrap Row
- Challenge Store Multiple Values in one Variable using JavaScript Arrays
- Challenge Storing Values with the Equal Operator
- Challenge Style Multiple Elements with a CSS Class
- Challenge Style Text Inputs as Form Controls
- Challenge Style the HTML Body Element
- Challenge Subtract One Number from Another with JavaScript
- Challenge Target a Specific Child of an Element Using jQuery
- Challenge Target Elements by Class Using jQuery
- Challenge Target Elements by ID Using jQuery
- Challenge Target Even Numbered Elements Using jQuery
- Challenge Target HTML Elements with Selectors Using jQuery
- Challenge Target the Children of an Element Using jQuery
- Challenge Target the Parent of an Element Using jQuery
- Challenge Target the same element with multiple jQuery Selectors
- Challenge Taste the Bootstrap Button Color Rainbow
- Challenge Testing Objects For Properties
- Challenge Trigger Click Events with jQuery
- Challenge Turn an Image into a Link
- Challenge Uncomment HTML
- Challenge Understand Boolean Values
- Challenge Understand String Immutability
- Challenge Understanding Case Sensitivity in Variables
- Challenge Understanding Uninitialized Variables
- Challenge Updating Object Properties
- Challenge Use a CSS Class to Style an Element
- Challenge Use Abbreviated Hex Code
- Challenge Use an ID Attribute to Style an Element
- Challenge Use appendTo to Move Elements with jQuery
- Challenge Use Bracket Notation to Find the First Character in a String
- Challenge Use Bracket Notation to Find the Last Character in a String
- Challenge Use Bracket Notation to Find the Nth Character in a String
- Challenge Use Bracket Notation to Find the Nth to Last Character in a String
- Challenge Use Clockwise Notation to Specify the Margin of an Element
- Challenge Use Clockwise Notation to Specify the Padding of an Element
- Challenge Use Comments to Clarify Code
- Challenge Use Conditional Logic with If Else Statements
- Challenge Use CSS Selectors to Style Elements
- Challenge Use Hex Code for Specific Colors
- Challenge Use Hex Code for Specific Shades of Gray
- Challenge Use Hex Code to Color Elements Blue
- Challenge Use Hex Code to Color Elements Gray
- Challenge Use Hex Code to Color Elements Green
- Challenge Use Hex Code to Color Elements Red
- Challenge Use Hex Code to Color Elements White
- Challenge Use Hex Code to Mix Colors
- Challenge Use HTML5 to Require a Field
- Challenge Use jQuery to Modify the Entire Page
- Challenge Use Responsive Design with Bootstrap Fluid Containers
- Challenge Use RGB to Color Elements Blue
- Challenge Use RGB to Color Elements Gray
- Challenge Use RGB to Color Elements Green
- Challenge Use RGB to Color Elements Red
- Challenge Use RGB to Color Elements White
- Challenge Use RGB to Mix Colors
- Challenge Use RGB values to Color Elements
- Challenge Use Spans for Inline Elements
- Challenge Use the Bootstrap Grid to Put Elements Side By Side
- Challenge Use the Javascript Console
- Challenge Using Objects For Lookups
- Challenge Using typeof
- Challenge Warn your Users of a Dangerous Action
- Challenge Write Reusable JavaScript with Functions
- Check if an element is hidden using jQuery
- Check if element is hidden js or jquery
- Checkpoint Convert Celsius to Fahrenheit
- Checkpoint Counting Cards
- Checkpoint Golf Code
- Checkpoint Profile Lookup
- Checkpoint Record Collection
- Checkpoint Shopping List
- Checkpoint Stand In Line
- Checkpoint Word Blanks
- Clear Your Browser's Local Storage
- Clone A Specific Branch
- code case
- code formatting
- Code of Conduct
- Coding Help
- CONTRIBUTING
- Contributions Guide with Typo Demo
- Create, Upload and Link Animated GIF Image
- Creating a new API endpoint
- Creating a new directive
- Creating a New Github Issue
- Creating a new route
- css
- css selectors
- Currying
- dau
- debugging
- Debugging JavaScript with Browser DevTools
- Deleting A Branch
- demo trim
- Develop Back End Project locally and run on c9.io
- Disable Code Auto Run
- Django Start Project
- Dotnet
- Dynamic URLs using $routeParams
- Edit or Delete message
- Elixir
- emoji
- Epilogue
- equality vs identity
- example
- Fixing exports.update
- For loops Explained
- Free Code Camp Back End Development Certification
- Free Code Camp completion language requirements
- Free Code Camp Data Visualization Certification
- Free Code Camp Deployment Workflow
- Free Code Camp Front End Development Certification
- Free Code Camp Full Stack Development Certification
- Free Code Camp is an open source community distributed across many platforms
- Free Code Camp JavaScript Style Guide
- Free Code Camp logo
- Free Code Camp's Privacy Policy
- Front End Project Use the Twitchtv JSON API
- Frontend file structure
- Functional Programming Higher Order Functions
- Get info about the current user
- Get Screen Size In Pixels
- Get started with Node_js
- Getting a coding job
- Git Amend Last
- Git Blame
- Git Change the URL of a remote repository
- Git Checkout A Remote Branch
- Git Delete a Branch both locally and remotely
- Git Force Git to overwrite local files on pull
- git merge
- Git Pull Vs Git Fetch
- Git Push Local To Remote Repository
- git rebase
- Git Resources
- Git Shortcut
- Git Undo Redo A Commit
- Gitter
- Gitter Moderation Policy
- global variables
- Go
- Grunt
- Guide Online Contribution
- Guide to Back End Projects Table of Contents
- Guide to Submitting Posts to Free Code Camp Medium Publication
- Gulp Basics
- Help I've Found a Bug
- Help Rooms
- Heroku Deployment Guide
- Higher Order functions
- How Free Code Camp works
- How FreeCodeCamp Nonprofit Projects work
- How GitHub Issue Moderators AKA Issue Mods Work
- How JSONP is different from JSON
- How Long Free Code Camp Takes
- How to add Free Code Camp to my LinkedIn profile
- How to best use the Global Control Shortcuts for Mac
- How to clear specific values from your browser's local storage
- How to clone the FreeCodeCamp website on a Windows pc
- How To Contribute To The Wiki
- How to create a Campsite for your city
- How To Create A Pull Request for Free Code Camp
- How to deploy a website without writing any code at all
- How To Fork And Maintain a Local Instance of Free Code Camp
- How to Get Help on Gitter
- How to get help when you get stuck
- How to get the MEAN stack running locally on OSX
- How To Install Clementine
- How to install Screenhero
- How to know who is in charge of your Campsite on Facebook
- How To Log In To Your Local FCC Site
- how to post code
- How to Rename a Local Branch
- How to share your workspace selfie with FreeCodeCamp on instagram
- How to start when you are stuck (I)
- How to start when you are stuck (II)
- How to start when you are stuck (III)
- How to use the Free Code Camp Wiki
- How you can get to Inbox Zero with Gmail shortcuts
- How you can help to stimulate your city's Campsite on Facebook
- How you can reach the Free Code Camp team to interview them for your publication
- Html and CSS Cheat Sheet
- html elements
- If Free Code Camp is free, how does it make money
- Ignore Files Committed To Git Repo
- IIFE
- Install Django Flask
- Installing WordPress Locally on Mac
- Intro to Yeoman Angular Fullstack Back End Projects
- isLoggedInAsync
- Java
- Java Basics
- Java Introduction
- Java Loops
- Java Resources
- Javascript Callback Functions
- JavaScript Truth Table
- jQuery
- js arguments
- js Array prototype concat
- js Array prototype every
- js Array prototype filter
- js Array prototype forEach
- js Array prototype indexOf
- js Array prototype join
- js Array prototype lastIndexOf
- js Array prototype map
- js Array prototype pop
- js Array prototype push
- js Array prototype reduce
- js Array prototype reverse
- js Array prototype shift
- js Array prototype slice
- js Array prototype some
- js Array prototype sort
- js Array prototype splice
- js Array prototype toString
- js Boolean
- js closures
- JS Comparison Operators
- JS Current URL
- js falsy
- js for in loop
- js for loop
- js for of loop
- js functions
- JS Get Timestamp
- js Global Object
- js immutable
- js loops
- JS Regex Resources
- JS Resources
- js Scopes
- JS Strict Mode
- js String prototype charAt
- js String prototype charCodeAt
- js String prototype concat
- js String prototype indexOf
- js String prototype lastindexOf
- js String prototype match
- js String prototype replace
- js String prototype slice
- js String prototype split
- js String prototype substr
- js String prototype substring
- js String prototype toLowerCase
- js String prototype toUpperCase
- js ternary
- js truthy
- js undefined
- jsonp
- Know it all
- Known Issues With Codepen
- latex
- Learn the basics of the VIM editor
- Linking Your Account with GitHub
- Linux
- List of Free Code Camp city based Campsites
- Loop Protect
- Map
- materializecss framework as a bootstrap alternative
- Math.max
- Math.min
- Math.pow
- medium example wiki article
- More useful APIs
- Mostaganem
- Object.getOwnPropertyNames
- Object.keys
- October 2015 Improvements
- October 2015 Summit Agenda
- Official Free Code Camp Chat Rooms
- ooda
- Other resources that Free Code Camp recommends to nonprofits
- Page redirects using javascript
- Pair programming and why it is special
- parseInt
- Permutations
- Php
- Politica De Honestidad Academica
- Programming Fundamental
- Programming Methodology
- Promises
- Pseudoclassical class definition OOp
- Pull Request Contribute
- PULL_REQUEST_TEMPLATE
- Python
- Python Basics
- Python Functions
- Python Introduction
- Python More Builtin Types
- Python Operators
- Python Resources
- Quick tip keep data in sync
- README
- Reduce made easy
- Refresh Your Browser Cache
- Registering your Nonprofit to Raise Donations through Free Code Camp Commit
- Restrict a page to authenticated users
- RTFM
- Ruby
- Ruby Introduction
- Run Apache Server On A Mac
- Saturday Summit August 2015
- Saturday Summit December 2015
- Saturday Summit November 2015
- Saturday Summit October 2015
- Searching for Your Issue on Github
- Seed data
- Select Issues for Contributing Using Labels
- Setting Up A React ES6 Webpack Project
- Site Improvements August 2015
- Site Improvements October 2015
- Slack
- Spanish Translation Terminology
- staging
- Start Here
- Streaks
- Stream Your Coding Sessions on Twitch.tv
- String.fromCharCode
- String.length
- Swashbuckle Swagger Operation Alphabetical Order
- The main advantages of Free Code Camp
- The Return Early Pattern
- Tips on How To Become A Good Pair Programmer
- topic
- Translating Free Code Camp into Your Native Language
- Translations Guide
- Twitch
- up_and_running_with_sass
- update
- Updates February 11 2016
- using anonymous self executing functions for private namespacing in your js apps
- Using browsec for securing your connection to fcc
- Using Github Pages for your front end development projects
- video demo
- wat
- Web Development in Python
- Web Resources
- What exactly Free Code Camp does
- What pair programming is and why it is special
- What the main advantages of Free Code Camp are
- What the style guide for Algorithms is
- What to do if you speak a language that Free Code Camp does not yet support
- What you will learn, and in what sequence you will learn it
- Why does Free Code Camp use JavaScript instead of Ruby or Python
- Why you need Free Code Camp
- Why You Should Try Pair Programming
- wiki js template
- Wiki Style Guide
- World Language Chat Rooms
- Write and Run ES6 Code in Browser
- writing a markdown file using atom
- Writing great git commit message
- Show 601 more pages…
New to Free Code Camp?
JS Concepts
JS Language Reference
- arguments
- Array.prototype.filter
- Array.prototype.indexOf
- Array.prototype.map
- Array.prototype.pop
- Array.prototype.push
- Array.prototype.shift
- Array.prototype.slice
- Array.prototype.some
- Array.prototype.toString
- Boolean
- for loop
- for..in loop
- for..of loop
- String.prototype.split
- String.prototype.toLowerCase
- String.prototype.toUpperCase
- undefined
Other Links
Clone this wiki locally
Accessibility basics: What is this thing you speak of?
"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
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 just 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 are reading this while hearing an ominous humming noise in the background and are being forced at lightsaber point to read this, because you just don't care but have to know about it for your boss.
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.
So, what is accessibility anyway?
Accessibility in itself is a bit of a misleading term sometimes, especially if English is your second language.
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 person know about it?
- You can even go as far as saying, if your website is very resource-heavy, will someone on a bad mobile 3G 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, blind, dyslexic, mute, on a slow connection, colorblind, suffering from epilepsy etc.
Why implement accessibility?
This is one for the final category I just listed. 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 organisations, 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 its 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 screenreaders, 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:
<div class="awesome-button"></div>
<span><strong>Huge heading I will style with CSS later</strong></span>
<span class="clickable-with-JavaScript">English</span>
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 screenreaders.
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 screenreader will read this as regular text, instead of a heading. Screenreaders 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:
<button>This is a button</button>
<h2>Here's a heading level two</h2>
<a href="JavascriptThing">English</a>
Boom. Suddenly, all these elements are now perfectly accessible, just by using native HTML. HTML the way it was meant to be used, in other words.
A foundation cannot stand without structure
A bit earlier, I touched upon a screenreader's hotkeys to jump from heading to heading. There are in fact many hotkeys like this to quickly jump to the nearest table, form field, link etc. Making sure these headings are actually in logical places is therefore a good practice and really decreases your assistive technology users' stress levels, which is good if you want visitors to keep coming back to your website.
Also remember that headings are hierarchical. If you use an h2, make sure the h3's that follow it actually have something to do with that h2. Don't put an h3 for contact details under your h2 for recent blog posts. A good analogy here is a book with chapters, that have subsections. You wouldn't put a section on baking cookies in the middle of a chapter on preparing vegetables ...or ...you wouldn't... right?
What's the alternative?
Images on a website are great. They add a new layer to your content, can really make the experience your site visitors have way more emersive and generally just look good among all that text. A picture can say more than a thousand words, right?
Certainly. That is, if you can see them. In the HTML5-specification, an img-attribute must always have an alt-attribute. This attribute is meant as an alternative to the image in case it can't be seen. This would be true for blind visitors to your website, but also when your image can't be loaded for some reason. Not adding an alt-tag to an img-attribute is therefore not only breaking accessibility, but going against the HTML5-spec.
I implore any web developer who catches themselves doing this to eat their programmer's hat and work on Windows 95 exclusively for a week. After the time is up, write an essay on what you have learnt from this ordeal so I can have a laugh during my afternoon coffee. :)
Now, there is one caveat here. Alt-attributes are mandatory according to the HTML5-spec, but it's not mandatory to actually fill them in. <img src="awesome-image.jpg", alt="">
is therefore legal HTML5 code.
Should you therefore fill in alt-tags for all images? It depends on the image, really. For background images, the answer is usually no, but you should use CSS for those anyway.
For purely decorative images that have no information in them at all, you're basically free to choose. Either put in something useful and descriptive or nothing at all.
For images that contain information, like a brochure, a map, a chart etc., not adding alt text breaks WCAG unless you provide a textual alternative. This is usually an alt-attribute, but can also be a block of text right below or next to the image.
For images of text, the text can either be included in the alt-attribute or offered in some alternative manner. The problem is that adding the textual alternative on the same page would basically make the same content show twice for people who can see the image, which is why the alt-attribute is better in this case.
I can't read your scrawl, son
Even people who don't wear glasses and have no problem with their eyesight at all benefit from an easy to read font and proper contrast. I'm sure you would cringe if you had to fill in a form where light yellow, hopelessly loopy letters are placed on a white background. For people who's eyesight is not as good, like your grandma for example, this becomes hopelessly worse.
The WCAG has contrast ratios for smaller and larger letters and there's plenty of tools out there to check if the contrast ratios are strong enough. The information and tooling is there, go use it :)
What does this button do?
While we are at the topic of forms, let's quickly glance at the 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:
<label for='username'>
<input type='text' id='username'>
This will make for example a screenreader say "username, text edit field", instead of just reporting' text edit field' and requiring the user to go look for a label. This also really helps people who use speech recognition.
That's a tall order
Let's take a small break. I want you to go look at a really well-designed web page. It can be any page. Go on, I'll wait.
Back? Ok, great. Now, look at the page again but disable all CSS. Does it still look good? Is the content on the page still in a logical order?If so, great. You found a page with decent HTML structure.
If not, great. Now you get an impression on what I have to deal with on a daily basis when I come across a badly structured website.
Full disclosure: I tend to curse when this happens. Loudly. With vigor.
Why is this such a big deal? I'll explain.
spoiler alert! To those who have only covered the HTML/CSS curriculum so far, we're going to skip ahead a little.
Screenreaders and other assistive technologies render a top-to-bottom representation of a web page based on your website's DOM. All positional CSS is ignored in this version of the web page.
DOM stands for Document Object Model and is a tree-like structure of your website's HTML elements. All your HTML elements are nodes that hierarchically interlink based on the HTML tags you use and Javascript, as well as screenreaders, use this DOM tree to work with your HTML code.
If you put your element at the top of your element, it will show up at the top of your dom tree as well. therefore, the screenreader will put it at the top as well, even if you move it to the bottom of the page using CSS.
So a final tip I want to give you all is to pay attention to the order of your HTML, not just your finished website with CSS added in. Does it still make sense without CSS? Great!
Oh ... it doesn't? In that case ..you might one day hear a muffled curse carried to you on a chilly breeze while walking outside. That will most likely be me, visiting your website. :) In that case I really only have two words for you. Often have I heard those same two words directed at me when I wrote some bad code and it is with great pleasure that I tell you: "go fix!" :)
Conclusion
I have told you about accessibility, what it is, what it's not and why it's important. I have also given you the basics, the very basics, of getting accessibility right. These basics are however very powerful and can make your life a lot easier when coding for accessibility. If we talk in FCC terms, you should keep these in mind while doing the HTML/CSS curriculum as well as the JavaScript curriculum. In subsequent articles, I will touch on a number of more nitch topics. A number of questions I will answer are:
- Adding structure headings sounds like a good idea, but they don't fit in my design. What do I do?
- Is there a way for me to write content only screenreaders and other assistive technologies see?
- How do I make custom JavaScript components accessible?
-
What is WAI-ARIA?
Do you yourself have a question? Please, let me know. I will either answer you personally or add it to an article if the question comes up often. For now, good luck and see you in the next one. Mischief managed :) For now, good luck and see you in the next one. Mischief managed. :)
Learn to code and help nonprofits. Join our open source community in 15 seconds at http://freecodecamp.com
Follow our Medium blog
Follow Quincy on Quora
Follow us on Twitter
Like us on Facebook
And be sure to click the "Star" button in the upper right of this page.