Your website’s appearance, colors, and copy will all be judged by visitors. Potential readers will also consider how authoritative your organization, service, or team appears to be.
Visitors are likely to expect that Non Profits will be particularly concerned about website accessibility issues.
Website Accessibility
Making your website accessible to everyone, regardless of ability, is important for inclusion and equal opportunity.
This means your website should be accessible to anyone who is blocking videos, using a screen reader, or looking at your website without sound.
There are several key website accessibility standards that business owners and marketers should incorporate into their web design.
1. Choose The Right CMS
The most fundamental best practice for website accessibility is that it should be easy to use.
A content management system that can support all of your users and help you develop and maintain your website effectively and easily is what you need.
This is especially true if you’re a small business with limited time and no web team.
WordPress is a great platform for creating accessible websites. It is easy to use once you get familiar with it.
Although Drupal might require help from a web developer, it is still a good option.
It’s important to make sure the website builder you’re considering using will support keeping your website accessible according to current guidelines. Wix and Squarespace may be limited in this area, so it’s best to double-check or work with a web design agency.
2. Use Alt Text Everywhere
Images on a website need alt text in order to be accessible to people who are using screen readers. Alt text is contained in an HTML element.
3. Avoid conveying information with color or imagery alone
You should avoid over-relying on color or imagery to convey information on your website if you want to keep the content accessible to users with different abilities, including users with assistive technologies.
Not all of your users will be able to understand this.
If you’re using a lead capture form, for example, you need to provide a text explanation in addition to any color-based cues. This is because people with colorblindness won’t be able to detect a difference in color, and they won’t get the information they need.
4. Arrange Your Headings In Order
Headings are important for several reasons. Firstly, they help to organise information within the post. Secondly, they communicate the importance of each section to the overall post. Thirdly, they act as signposts, indicating to the reader when a new section starts.
The purpose of headings is to organize the content in a way that is easy for readers to understand. By creating a style guide for your headings, you can ensure that your content is easy to read and follow.
Headings are not just a text size or shape, they are an HTML element that can communicate the structure of the post and the importance of the sections to anyone using a screen reader.
The importance of keeping headings in order is increased. So, it is important to remember to always go in order, never skipping to an H4 after an H2. Also, use headings of the same types to note comparable sections of your content.
5. Use Easy-To-Read Fonts
Web users have become accustomed to seeing certain fonts used for specific purposes. For instance, many people associate the font Comic Sans with childishness or unprofessionalism. Choose a font that is easy to read to make it accessible for everyone and also to give off the right impression to potential customers.
If something is difficult to read, it is seen as less trustworthy, and if the text is describing a set of instructions, the task is seen as more difficult.
6. Keep All Navigation Keyboard-Friendly
Your website’s navigation should be easy for everyone to use so that visitors can do things like read your content, look at product pages, and sign up for newsletters.
Make sure that your website can be navigated using a keyboard in order to keep it inclusive.
Keyboard users commonly use the Tab key to move throughout a website. Successfully navigating your site with this key requires testing and some code setup.
7. Ensure Colors Contrast
It is important to make sure that your website design is accessible to everyone. A common problem is low color contrast, which makes it difficult to read. 86.4% of homepages have this problem, which is the most common website accessibility failure.
The colors on your website should contrast enough so that anyone can read the text easily, regardless of whether they have a visual impairment.
8% of the population cannot see colors like red and green. If you only use these colors in your designs, then these people will not be able to understand your message.
People with learning disabilities benefit greatly from the use of color to distinguish and organize content.
To make both groups happy, use color, but also use other visual indicators like an asterisk or question mark. Also, make sure to distinguish different blocks of content from each other using visual separation like whitespace or borders.
There are several tools available to help you evaluate the contrast of colors on your page, which will help make it more visually accessible to people with low vision or different types of color blindness.
8. Make Information Easy To Understand In Multiple Formats
This is the foundation of website accessibility: You need to create content on your website that can be easily accessed and understood by everyone, regardless of how they view or scroll the page.
Remember to add alt text and keyboard navigation, and to convey information using a variety of methods instead of relying on a single source.
9. Choose A Content Management System That Supports Accessibility
There are several content management systems that can help you develop your website further. Some popular examples are Drupal and WordPress, as mentioned above, but there are other lesser-known options available as well.
After you have chosen a CMS that works for you, be sure to choose an accessible theme or template.
Read the documentation for your theme to learn how to make your content and layouts accessible and compliant with guidelines. Select modules, plugins, and widgets with accessibility in mind.
Ensure that elements such as editing toolbars and video players support the creation of accessible content.
The user interface of a Content Management System (CMS) should be designed with accessibility in mind. This means that editing toolbars should include options for headings and accessible tables, and video players should include closed captioning. The same goes for CMS administration options – such as creating a blog post or posting a comment – which should also be easily accessible.
10. Use Headings Correctly To Organize The Structure Of Your Content
If you structure your content using headings correctly, it will be well-organized and easily interpreted by screen readers.
When creating a website, it is important to follow the correct order of headings, and to use CSS to separate the presentation from the structure. This will ensure that your website is accessible to all users.
Do not pick a header that just looks good visually, as this can confuse screen reader users. Instead, create a new CSS class to style your text.
Examples of proper use of headings:
- Use <h1> for the primary title of the page. Avoid using an <h1> for anything other than the title of the website and the title of individual pages.
- Use headings to indicate and organize your content structure.
- Do not skip heading levels (eg going from an <h1> to an <h3>), as screen reader users will wonder if content is missing.
11. Include Proper Alt Text For Images
Images should have alternate text so that users who are using screen readers can understand the message that the image is trying to convey.
This is especially important for informative images (such as infographics). The alt text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt.
The only time you don’t need alt text for an image is when it’s used purely for decoration. In this case, the screen reader user is not distracted from the more important content on the page.
If you only have an image as the content for your link, the screen reader will read the file name. Always provide alt text for images that you’re using as links.
12. Give Your Links Unique And Descriptive Names
Your links should describe where they are going in more detail than “click here.” Screen readers will have a difficult time understanding where the link will go if you don’t give a more descriptive explanation.
Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to do the same thing.
The rest of the page’s context is often not read by screen reader users apart from the links. By using descriptive text, though, the context of these links can be explained to screen reader users.
The most unique content of the link should be presented first, as people who use screen readers will often navigate the links list by searching via the first letter.
For example, if you are pointing visitors to a page called “About Us”:
- Try not to say: “Click here to read about our company.”
- Instead, say: “To learn more about our company, read About Us.”
13. Make Dynamic Content Accessible
If content is updated on a page without a refresh, screen readers may not recognize the change. This can include things like lightboxes, popups, and modal dialogs.
If you’re using a keyboard to navigate a website and get stuck in an overlay, you won’t be able to escape it without help. Similarly, if you’re using magnification software to view a website and you get zoomed in on the wrong section, you’ll need assistance to fix the problem.
There are several ways to make these functions accessible, such as using ARIA roles and alerts, or using front-end development frameworks that support accessibility.
Make sure that video players do not play automatically (without someone’s consent) and that they can be used with a keyboard. Also, all videos should have options for closed captioning and transcripts for people who are hard of hearing.
Ensure that your website’s slideshow photos have alternative text descriptions, so that they can be accessed via keyboard navigation. If you’re using any unique widgets, double-check that they’re accessible.
14. Design Your Forms For Accessibility
If form fields are not labeled properly, people who rely on screen readers will not have the same information available as people who can see. This can make it difficult or impossible to tell what should be entered into a form field.
Each field in your form should be labeled with a well-positioned and descriptive label. For example, if the field is for a person’s name, it should be labeled appropriately as either “Full Name” or have two separate fields labeled as “First Name” and “Last Name.”
Make sure to use a
When you are filling out a form, you should be able to tab through the form and fill out all the fields before getting to the “Submit” button. Otherwise, you may not even realize that additional fields exist. The tab order should follow the visual order.
Fields that are related or similar should be grouped together using field sets. For example, fields like “Full Name” and “Date of Birth” could be grouped together as “Personal Information.”
This type of form organization can help a screen reader user keep track of progress, and can provide the context that might be lost while filling out the form. It can also help people who have difficulty using a mouse or who have low vision.
If certain form fields are required, the field should be labeled with “required” and configured to alert the screen reader user.
Asterisks should be used to indicate required fields for sighted users, people with learning disabilities, or people who speak English as a second language. ARIA required=”true” and ARIA required=”false” can be used to indicate required and optional fields to screen readers.
If a user submits a form on your website, it is recommended that you include some sort of indicator on the page (eg in the title) to let the user know that the form was successfully submitted and whether or not there were any errors. This will help the user correct any errors before moving on.
If a user submits a form with errors, the user should be brought to a submission page that provides a list of the errors, and links to each of the fields with errors.
CAPTCHA should not be used to validate submissions because it is not accessible.
Prioritize Website Accessibility For Your Business
It is good practice for a Non Profit to make its website accessible to its audience, so its marketing will be more effective.
Tools can help you to identify which areas you need to work on to make your website more accessible. After you have identified these areas, you can refer to the best practices for website accessibility to ensure that your website is compliant and inclusive.
0 comments