Tips for Making Your Website Accessible

  • Reading time:7 mins read

Add appropriate alt text for images.

Images should provide alt text so that screen readers can understand the message conveyed by the image on the page. This is especially important for images that are full of information (such as infographics). When you create alt text, the text must contain the message you want to communicate through the image, and if the image contains text, the text must be inside the alt.
The exception to this is when the image is used only for decoration; In this case, the old text can be empty so that the users of the screen reader are not distracted from content on the page that is more important.
If and image is the only content of a link and no alt text is provided, screen readers will read the file name. Always supply alt text for images used as links.

Use headings correctly to organize your content structure.

Screen reader users use the title structure to search for content. By using headings (h1, h2, etc.) correctly and strategically, your website content will be organized and easy to interpret by screen readers.
Make sure you follow the correct order of headings and separate the presentation of the layout with CSS (Cascading Style Sheets). Don’t choose a title because it visually looks good (which can be confusing for screen readers); Instead, create a new CSS class to style your text.

Examples of correct use of headings:

  • Use h1 for the main titleof the page. Avoid using h1 in anything other than the web page title and individual page titles.
  • Use headings to identify and organize your content structure.
  • Do not skip heading levels (for example, change from h1 to h3), because screen users may think content is missing.

Use colors carefully.

A common color deficiency, red-green deficiency, affects about 8% of the population. Using similar colors (especially to mark required fields in forms) can prevent people from understanding your information.
Other groups of people with disabilities, especially users with learning disabilities, can benefit greatly from color when used to differentiate and organize your content.
Use color to satisfy both parties, but use other visual symbols such as asterisks or question marks. Be sure to separate content with visible separators (such as spaces or borders).
There are a number of color contrast testing tools that help people with low vision or different levels of blindness see your pages more quickly.

Give your links descriptive and unique and unique names.

When links are in your content, use text that properly defines where the link goes. Using “click here” is not considered to describe the link and will not help screen reader users.
Just as a blind user browses a page with related text, a blind user can use a screen reader to scan links. As a result, screen reader users often do not read the link in the content of the entire page. Use descriptive text that accurately describes the context of the link for screen-reader users.
The most unique content of the link should be displayed first, because screen reader users often navigate the list of links by searching by the first letter.
For example, if you direct visitors to a page called “About Us”:
Try not to say: “Click here to learn about our company.”
Instead, say: “To learn more about our company, read About Us.”

Use tables for data, not for layout.

Using tables for page layout adds extra verbiage to screen lessons. When the screen reader discovers a table, it tells the user that the table has “x” number of rows and columns, and diverts from the content. In addition, the content may be read in an order that does not match the layout of the page. Do not create a page layout with tables. Use CSS instead.
If you need a table of data (that is, you have a set of data that is best represented as a table, such as a bank statement), use headers for rows and columns that describe cell relationships. A complex table may have many cells with special relationships to each other and must be defined by the “scope” attribute in HTML. Table captions (HTML5) are used to provide additional information about reading and understanding the relationships in the table.

Create your forms for accessibility.

If the table fields are not properly labeled, the visitor using the screen reader will not have the same information as the sighted visitor. It would not be possible to determine which content should be entered in a form field.
Each field on your form should have a descriptive label instead. For example, if this field is a person’s name, it should be written as “full name” or in two separate characters, “first name” and “surname”. Use the tag or the ARIA symbol to connect the label text to the form field.
When you go to the form page, users should be able to tab through the form and fill out all the fields before clicking “submit” or they won’t know the extra field is there. Tab order should fundementally follow view order.
If you have similar fields, consider combining them with fieldsets. For example, fields such as “Full Name” and “Date of Birth” can be combined under “Personal Information.” The layout of the form helps screen reader users follow the progress and not get lost while filling out the form.
If a form field is required, that field should be properly labeled and set to alert screen reader users. Usually, required fields are marked with asterisks which are not detected by screen readers. Asterisks (or similar visual indicators) should be used for sighted users, people who have learning disabilities, or people who speak English as a second language. Specify whether a field is required to screen readers by selecting ARIA required=”true” and ARIA required=”false.” After submitting the form, the user will be asked to confirm the submission and will be notified of any errors. We suggest that you include any error numbers in the page title (after the user submits), so that users are immediately notified if there are any errors. When a user submits an form with errors, the website provides an easy way to navigate through the errors by taking the user to a submission page that tells them what the errors are.
Finally, CAPTCHAs are inaccessible and should not be used to confirm submissions. WebAIM has a useful overview of alternatives to keep submission forms spam-free.