loading...

Writing Accessible HTML

ziizium profile image Habdul Hazeez Updated on ・4 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

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.

Slapping some divs and 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 button tag.

The basics of writing accessible HTML is to write semantic markup and Writing semantic markup won't take much of your time and you get some built-in accessibility features for free.

Let's take an example from Mozilla Developer Network on the same topic:

<div>Play video</div>

A button will be a good candidate for this:

<button>Play video</button>

From the 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 pages objects that you might want to code and it will be a wonderful 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, let's list these objects, a brief description and some links for your consideration:

FORMS

Most web pages 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.

IMAGES

When it comes to images giving it the alt attribute will make screen readers read it out loud, but there is more to it.

LINKS

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

VIDEO

Videos are everywhere and in html5 all you need to link to a video is the video tag which can be improved up.

NAVIGATION

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 won't find that very pleasing. Take your time and design accessible navigation's and the resource below will also be of help.

LIST

Lists are everywhere by default links should be created with li tags.

a. HTML Lists & Accessibility
b. Unordered lists: more than just bullets

SEARCH

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 a search on your site, you might as well get it right.

a. "<label>" for Search Field - Web Aim Thread
b. Unlabeled search fields

Some Web page objects like navigation, links, and images will be coded in our FINAL PROJECT.

Edit (May 17th, 2020):

  • Grammar fixes
  • Link to Final Project
  • Correction of information about Web page objects implemented in the Final Project

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide