Topics Map > Website
8 Web-Editing Best Practices
8 important best practices in mind:
1. Use hierarchical headers & proper formatting
Headings: Visually impaired visitors may rely on a screen reader to navigate your site. Hierarchical headers provide an easy way for them to get a quick overview of the page's content structure and jump between sections. Instead of choosing a heading type based on font size, it's important to follow the standard web header hierarchy to avoid confusion, and also to avoid skipping a header level (like having some H2 text followed by H4 text, but no H3 level text).
Header 1 (H1) should only be used for the page title.
Header 2 (H2) can be used for page sections.
Header 3 (H3) can be used for headings of sub-sections within the page's sections.
Header 4 (H4) can be used for further sub-sections within sub-sections.
Formatting: If you're using a bulleted or numbered list, make sure it's actually formatted as such so it gets picked up by assistive technologies. Pseudo-bulleted lists (paragraph text with bullet symbols in front of each point) and pseudo-numbered lists (paragraph text with numbers typed in front of each point) won't be picked up by screen readers and may be confusing when read aloud.
2. Avoid using underlined text
Underlined text on the web should be used only for links. Visitors will be confused when they see underlined text that isn't a hyperlink.
If you're trying to emphasize a phrase, it's better to make it bold, italicized, or both bold + italicized instead of underlining it.
3. Avoid using "click here" or "this link"
Using phrases like "click here" or "this link" for linked text can be confusing and make navigation difficult because:
- It's not clear what the link is for or where it will take you.
- Screen readers typically display a list of all the links on a web page. Encountering a list of 10 "click here" links can be confusing and difficult to navigate.
- Visually-impaired visitors who use a screen reader to hear the web page text read aloud will have trouble differentiating between multiple links on a page that are named "click here."
Reduce confusion by using descriptive text. Examples:
4. Make sure images have alt text
Alternative (alt) text describes the appearance of an image. It should be used for images that appear in email and on web pages for accessibility.
- Alt text helps visitors using assistive technologies like screen readers to hear a description of the images included in your web content.
- If an image file doesn't load, alt text will be displayed.
- Alt text also helps search engines to better categorize and index web page content.
5. Avoid PDFs
PDF files are usually sized to fit a sheet of paper, and not optimized for screen viewing. Usability issues that make them sub-optimal for posting on the web include:
- PDFs can be very slow to load and cause your computer to crash.
- PDFs are difficult to view, especially on mobile devices, as viewers constantly have to zoom in and out and scroll left to right / up and down to read content, especially when the layout has multiple columns.
- PDFs don't have a built-in navigation system, so it's hard for viewers to find what they're looking for without a lot of searching and scolling.
To avoid these issues, we recommend converting your PDF files to web pages. In a web format, the viewing experience will be greatly improved:
- Viewers will be able to easily easily enlarge the text in a uniform manner without needing to zoom in and out.
- Text will automatically fit the width of the screen across devices, eliminating the need to continuously scroll back and forth.
- Viewers can easily navigate content through the use of expandable accordion panels, content tabs, skip links to content sections, etc.
6. Avoid adding multiple copies of images in the Media Library
Website performance is always fastest when file sizes are kept to a minimum. One easy way to increase efficiency is to avoid uploading multiple copies of the same image to the Wordpress Media Library. If there's an image you're thinking of adding to a page, do a quick search first to see if it's already available in your image collection.
7. Test how your web content displays across devices
Your web content may look great on a desktop computer, but the viewing experience might be completely different on a mobile device. For example, it might take a super long time to scroll down to reach the bottom of the page. Images that only took up 1/3 of the screen on a desktop may fill an entire screen on a phone. Or you might find content that exceeds the width of the screen and requires left-to-right scrolling.
Make sure to test your web page across devices to identify issues. This is especially important given that large percentage people access sites from their phones these days. And feel free to reach out to IIT if you need help!
8. Review your web content on an annual basis
It's always a good idea to revisit your web content once a year to check for broken links, outdated information, missing images, and other problems. Keeping web content current also enhances the viewing experience for visitors and helps to boost your search engine rankings, which in turn leads to increased web traffic.