Introduction: What is this?
It’s probably safe to assume that every student here uses the Internet. Be it email, course work or research, the Web has become a tool we all use for work, play, and communication. There are a number of different ways to use the Web, including browsers for desktop, tablets, and mobile phones. For low vision or blind users, screen readers announce what’s on the screen audibly and require keyboard use to interact with the information. It’s all of these different ways to use the same information that Boston University has put together a “best practices” list to help you create web content that’s both usable and accessible for everyone.
What is the Web made of?
The visual stuff you see when browsing a web page is made of HyperText Markup Language (HTML), Cascading Stylesheets (CSS), and sometimes JavaScript (JS). Understanding how these three technologies work is the key to building websites that work for everyone and for all devices.
We’ve created a handy guide to said best practices for the most commonly used elements for easy reference.
Best Practices
It's important to understand what each of the following three parts of the web do and how they work together. HTML is essentially the content you see. CSS then provides the layout, styles, colors, and sizes. Finally, JavaScript - which isn't required by any means - is used to add additional functionality. It's important to note that only HTML is required and by adding CSS and JavaScript, you add complexity and potentially reduce accessibility and usability. You should follow best practices and web standards at all times. Less is more.
HTML
Headings
Example:
<h2>Main topic</h2>
Description:
Headings are incredibly useful in that not only do they break up your content into manageable and understandable “chunks”, but they are very important to users of screen readers as they provide in-page navigation. Furthermore, headings contribute significantly towards good SEO. Simply bolding text and making it larger doesn’t make it a heading.
Usage
- Headings should always follow hierarchy (i.e.,
<h1> should come first, followed by <h2>, <h3> and so on).
- Most templates here at BU will automatically make the title of the page the
<h1> so you'll want to start your headings with <h2>
- It's generally unnecessary to apply bolding to headings. Your theme will come preset with defined heading styles that fit into the overall branding
Paragraphs
Example:
<p>This is a paragraph. You can put as much text as you want in here.</p>
Description:
Paragraphs are usually automatically created and added if you’re using WordPress. Simply pressing Enter/Return will end one paragraph and begin another.
Usage
- For larger paragraph text, use custom CSS rather than applying heading styles
- Be careful when copying and pasting from outside applications like Microsoft Word as hidden styling and markup is often brouhgt in which disrupts the presentation of your text. It's best if you copy from your outside application into a plain text editor (like Notepad on a PC or TextEdit on a Mac), and then paste into WordPress
Links
Example:
<a href="http://www.bu.edu">Boston University</a>
Description:
Links are the foundation of the Web. They navigate to and from pages. Furthermore, links play a very large role in good SEO.
Usage
- Don't use the
title in your hyperlinks
- Make sure your links give some clue as to where a user will go when he or she clicks it
- Don't use "click here" for link text as it's vague and unhelpful
- Visually impaired users and screen readers rely on meaningful, actionable text for links
- Don't style links to look like normal text, and don't style normal text to look like links
- When creating a link, use the fully resolved URL (e.g., include the
http://www...)
Images
Example:
<img src="http://url_to_image_file" alt="Brief description of the image" />
Description:
Because blind and sometimes low-vision users can’t see images, don’t use images to convey important information. And always use an alt attribute briefly describing what the image is about.
Usage
- It's best to resize your images before uploading them to WordPress
- Alternatively, WordPress offers a "scale tool"
- Don't alter the size of your image by setting the
height and width attributes as this often distorts the image
- Excessively large images present problems with mobile viewers as it adds to the download size and speed of a page
Tables
Example:
<table>
<tr>
<td></td>
</tr>
</table>
Description:
Tables should be used for tabular data only, not for design or layout. For layout, rely on CSS for styling.
Un/Ordered Lists
Example:
<ul>
<li>First list item in an unordered list</li>
<li>Second list item</li>
<li>And the third item</li>
</ul>
<ol>
<li>First list item in an ordered list</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>
Description:
Use lists to group related items, for example bullet points. Ordered lists use numbers or letters to indicate an order, whereas unordered lists do not.You can even put <div>'s inside list items.
CSS
Font sizing
Example:
body {
font-size: 13px;
}
.class {
font-size: .9em;
}
Description:
CSS allows you to set the size of all text. Browser defaults to 16pt.
Usage
- The smallest font on your site should be no smaller than 12pt
- Use
em's if possible as they're more scalable
1em equals 100% of your base font size. For example, if your base font size is 16pt, then 1em would equal 16pt
Foreground and background colors
Example:
.some-text {
color: #f2f2f2;
background: #222;
}
Description:
Using CSS you can set the foreground and background colors of text and elements.
Usage
- Choose colors that offer enough contrast between foreground and background so those with visual impairments and aging eyes can easily consume your information
- Use WebAIM's color contrast checker to verify contrast
Pixels, percentages, and ems
Example:
.pixels {
font-size: 13px;
width: 250px;
}
.ems {
font-size: 1em;
width: 7em;
}
.percentage {
font-size: 100%;
width: 255;
}
Description:
Pixels, percentages, and ems are all ways to define the size of text or an element in a web page. And each has its use.
Usage
- Pixels are definite and absolute. Use them only when you're working with absolutely or fixed-sized displays
- Percentages are relative to the base size of the document. An element sized to 25% width will always be 25% of whatever the parent container is
- Ems are also relative and similar to percentages. Ems however, are preferred as they're more flexible across the web
JavaScript
General guidelines
Usage
- JavaScript should be an enhancement to your site, not a requirement
- Always ensure your site works without JavaScript in case it's unavailable or buggy
