Page Code
HTML
Page Title
Every page needs to have a unique page title. Screen readers will read the page title to users. If the page title doesn't make sense it might confuse your users. It also helps with SEO.
<title>Unique Page Title</title>Setting the Document Language
Every page needs to have a default language set. This is important in order to assist search engine spiders, page formatting, and screen readers.
<html lang="en">DocTypes
It is important to set the correct DocType for your page because that is how the browser determines how to show your content on the page. The example below is what should be used for HTML5.
<!DOCTYPE html>HTML5 Semantic Elements
With the advent of HTML5 new elements were created. Some of these include header, nav, footer, section, and aside. All of these help develop HTML and pages that are more descriptive. This helps those who use screen readers so that they are able to jump easily from section to section knowing exactly where they are navigating.
<header>Where your header goes</header>
<nav>Where your navigation should go</nav>
<section>This can be used for large sections</section>
<aside>This can be used for side menus or less important information</aside>
<footer>This can store all of your contact information in the footer of the page</footer>
Headings
Every page needs to have a h1 (heading 1) tag. A page should never have more than one h1 tag. The h1 tag needs to match the page title. From there the other header tags (h2, h3, h4, h5, h6) should follow the proper hierarchy. You shouldn't use an h3 before an h2.
<h1>Page Code</h1>
<h2>HTML</h2>
<h3>Page Title</h3>
<h3>Setting the Document Language</h3>
<h2>CSS</h2>
<h3>Relative Font Sizes</h3>
HTML Visual Sequence
Your HTML should appear on the page in the same order as it is in your code. With CSS, we are able to position elements anywhere we would like them on the page. However, if someone only uses their keyboard, when tabbing through the site, it won't take them in any logical order. This means the header should be at the top of the html document and the footer should be at the bottom.
Links
Links need to be descriptive. If you tab through a webpage it will jump link to link. If someone is using a screen reader it will only read out the name of the link. If that links only says "Click Here" the user will not know what they are clicking on.
<a href="examplepage.aspx">Click here for the 2016 Standards.</a>
Viewports
A meta viewport tag needs to be added to each page so that the page will load correctly and at the right size on all devices. Do not lock the zooming abilities of users.
<meta name="viewport" content="width=device-width, initial-scale=1" />Navigation
Your navigation needs to stay in the same page location through your site. If someone is unable to see your site and the navigation switches locations from page to page they will be unable to easily understand your website.
Skip Links
Skip links allow those who are using a keyboard to navigate a site to quickly jump from the top of the page to another area of the page. To see a demo, reload the page, then simply press tab on this page. It will take you to the top of the page and if you tab through, it will give you three options to jump to different areas on the page.
CSS
Relative Font Sizes
It is important to set your font size using ems intead of pixels. If you set a font size with pixels it stops users who have a larger system font from seeing your content at a font size they are able to read. Ems are relative and allow users to increase and decrease the font as needed. You will need to set a default pixel font size in your body. From there 1em will be equal to the default font size. If you do not set one, each browser will use its default.
Resources
For more information about accessibility visit the W3C Website.
- Tips on Designing for Web Accessibility
- Tips on Writing for Web Accessibility
- Tips on Developing for Web Accessibility
body {
font-size: 14px;
}
p {
font-size: 1em;
{