FrontEnd Development Zero to Hero (41 Part Series)
In the field of Web Design, accessibility should never be an afterthought, it should always be on the menu.
Accessibility is a broad topic and more than deserving of a whole book, this post will serve as a summary and i will point to resources to learn more about the subject.
h1 with some
p's coupled with some CSS might get you a web page but that does not mean the page will be accessible, you should strive to use the correct element for the job. Do you need a link? use an
a tag, Do you need a button? use the
The basics of writing accessible HTML is to write semantic markup and Writing semantic markup wont take much of your time and you get some built in accessibility features for free.
Lets take an example from Mozilla Developer Network on the same topic:
A button will be a good candidate for this:
From article linked above:
Not only do HTML
<button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate from button to button using the Tab key, and activated using Return or Enter.
When developing for the web there are some web page objects that you might want to code and it will be a really good thing if you (the reader) take the route of developing them in an accessible way, but if i decide to write how to make them all accessible, this post will be longer than its required.
With that being said, lets list these objects , a brief description and some links for your consideration:
Most web page incorporate one form or the other that allow the submission of data, you will definitely create one form or the other and writing accessible forms is one thing you will want in your arsenal as a web developer.
When it comes to images giving it the
alt attribute will make screen readers read the it out loud, but there is more to it.
Trust me, if there are no links, navigating the Web will be a daunting task. Learning to make them accessible will give your users a good User Experience
Videos are everywhere and in html5 all you need to link to a video is the video tag which can be improved up.
- 6 ways to make a video Accessible To Everyone
- Complete guide to accessible video and audio for the web
Are navigation non-existent on your website? Your Users might not use your site for more than a few seconds, and they are off! never to return. That's one, do you require your user to zoom to click on your navigation when they are one mobile? They wont find that very pleasing. Take your time and design accessible navigation's and the resource below will also be of help.
- Understanding SC 3.2.3 Consistent Navigation
- Keyboard-Only Navigation for Improved Accessibility
- Better keyboard navigation with progressive enhancement
List are everywhere, a good navigation make use of list, by default links should be created with
There is a high possibility that you've searched something on the web today, whether that's on Google, DuckDuckgo. And if you decide to implement search on your site, you might as well get it right.
These web page objects will be coded in our FINAL PROJECT.