How to Make Accessible Sites with Semantic Markup [List Included]James R.
BlockedUnblockFollowFollowingMay 24The number of users interacting with the web is astronomical — but some are left out.
Internet access has gone back and forth in terms of being labeled as a utility — a basic necessity for modern living like water or electricity — so it goes to show that people are really into this whole internet thing.
When building on the web, a common goal is to gain the most traffic possible, but what many sites overlook is the volume of internet users who have a disability or impairment that inhibits their experience on the web.
Some experts that as many as 1 in 4 users experience this, but there are some quick fixes to your HTML structure that can make your website accessible.
Enter semantic markup and accessible HTML!Origins of SemanticIn the early days of HTML, tags like header, footer, nav tags didn’t exist — which was huge pain for users and search engines alike.
In order to introduce meaning to a web page, semantic markup was added, bringing the tags we’ve become familiar with.
HTML tags were no longer just presentational (some still are, such a ‘<b>’) but informational, this was a big step in aiding users who need help from a screen-reader to use the web.
Using The Correct Elements & TagsWhen building a site, there’s numerous ways you could go about writing HTML to spin up some elements on the page.
While as a developer, you may have a preference on how you write HTML, it’s important to use the correct elements and tags whenever possible.
Buttons Should Be ButtonsPerhaps the most common is writing a button as a div.
Functionally, you could get a div to do the same thing as a button, open a link, run some other code, etc.
However, using <button> is the semantic approach; it benefits users, screen-readers, and even SEO (more on that later).
Writing a button as such helps users with visual impairment, as their screen-readers will identify (and read aloud) the button’s contents to the user.
Regarding navigation, the button element is more accessible than it’s div counterpart due to the fact that buttons can focused on with the ‘tab’ key and activated using ‘enter’.
That’s a big help to anyone who has trouble interacting with a mouse or trackpad.
HeadersMost web developers know that header tags are among the most crucial elements for search engines to determine what your web page is about.
While h1s, h2s, and h3s are commonplace, it’s no surprise that developers are using <p> tags with larger font sizes instead of h4–6s.
Implementing lesser used header tags will help impaired users get the full picture of your page’s content as their screen readers will highlight that information.
LinksHow many times have you seen links such as “learn more here”, “click here”, or “get movie tickets here”.
While there’s generally enough context to determine where the link will go, there are two easy ways to make that more friendly to all users:Include text that describes the page that the link points toAdd a title attributeFor the first step, this could be as easy as changing the above examples to “learn more about semantic html here” and “get movie tickets here”.
Including keywords in the anchor text of a link is much better for SEO.
The second part is the title attribute, which is basically an extra spot to pack in metadata about your link.
An example of the title would be something like:<a href=”https://www.
google.
com” title=”Go to Google Search Engine”>Visit Google Site</a>Are your links missing title attributes? — make sure to pack link tags with relevant content!List of Semantic ElementsHere’s a list of semantic elements (does not include attributes).
Please let me know if I missed any!|<abbr> | Abbreviation| <acronym> | Acronym| <blockquote> | Long quotation || <dfn> | Definition || <cite> | Citation || <code> | Code reference || <tt> | Teletype text || <span> | Generic inline style container || <del> | Deleted text || <ins> | Inserted text || <em> | Emphasis (italicize) || <strong> | Strong emphasis (bold) || <h1> | (1–6)nth-level headline || <header> | Header || <footer> | Footer || <hr> | Horizontal row || <kbd> | (keyboard)Text to be entered by the user || <pre> | Pre-formatted text || <q> | Short inline quotation || <samp> | Sample output || <sub> | Subscript || <sup> | Superscript || <var> | Variable or user defined text |Write Semantic CodeSemantic HTML is the often overlooked portion of building sites.
Implementing semantic HTML wherever possible is the key to making accessible, user-friendly sites!What other ways do you use semantic HTML?.Let me know below!.. More details