1. Pick a content management system with accessibility features.
You can design your website using one of the various content management systems that are available. Drupal and WordPress are two popular examples, although there are plenty other choices.
Once you’ve selected a CMS that meets your needs, be careful to pick an accessible theme or design. For accessibility-related advice and pointers on developing accessible content and layouts for that theme, go to the theme’s documentation. The same rules should be followed when choosing modules, plugins, or widgets.
Make sure that components like video players and editing toolbars allow the creation of accessible content. For instance, editing toolbars must to offer options for accessible tables and headings, and video players ought to support closed captioning. It should also be possible to access the CMS administrative tools (such writing a blog post or leaving a remark).
2. To properly organize the structure of your text, use headings.
Users of screen readers can traverse text using heading structure. Screen readers will have no trouble understanding the content of your website if headers (h1>, h2>, etc.) are used correctly and strategically.
Make sure to follow the proper heading sequence, and use CSS to distinguish presentation from structure (Cascading Style Sheets). Instead of choosing a header based solely on how it appears on the surface (which can confuse users of screen readers), design your text using a new CSS class.
Examples of headers used correctly include:
- For the page’s main title, use h1>. Other than the website title and the titles of individual pages, refrain from using a “h1” tag.
- Use headers to denote and organize the structure of your content.
- Avoid skipping heading levels (such as moving from a h1 to a h3; this will make screen reader users wonder if there is material missing).
3. Include appropriate alt text for images
For screen reader users to grasp the message that is being sent by the usage of images on the page, alt text for images should be provided. This is crucial for informational visuals in particular (such as infographics). If an image has text in it, that text should also be included in the alt text, which should contain the message you want to express through that image.
The one exception to this rule is when an image is only used for decoration; in this situation, the alt text can be left empty(link is external) so that the screen reader user is not diverted from the page’s more significant information.
Screen readers will read the file name if there is no alt text when an image is the only content of a link. Always include alt text when using images as links.
4. Give your links names that are distinctive and informative.
Use wording that accurately represents the link’s destination when incorporating links in your article. The phrase “click here” is inefficient for screen reader users and is not regarded as descriptive.
Visually impaired people can use their screen readers to search for links just way sighted users do when they scan a page for linked text. As a result, users of screen readers frequently fail to read the link in light of the remainder of the page. The context of links is correctly explained to screen reader users by using descriptive language.
Since screen reader users frequently scan the links list using the initial letter, the most distinctive content of the link should be given first.
For illustration, if you direct people to a page titled “About Us”
- You should refrain from saying, “Click here to read about our company.”
- Instead, add, “Read About Us to discover more about our organization.”
5. Use color sparingly.
Approximately 8% of the population suffers from red-green color deficiency, the most prevalent type. These people won’t be able to interpret your message if you only use these colors (particularly to denote required fields in a form).
When utilized to identify and arrange your material, color has significant advantages for users with learning difficulties and other disability groups.
Use color to appeal to both audiences, but also be sure to include other visual cues like an asterisk or question mark. Make sure to use visual separation to separate content blocks from one another as well (such as whitespace or borders).
You can use a variety of tools to assess color contrast, which will help you make your page as visually accessible as possible to people with impaired vision or different degrees of color blindness.
6. Design your forms with accessibility in mind.
The screen reader user does not have the same indications as the sighted user when form fields are not properly labeled. The kind of information that has to be entered into a form field could be impossible to determine.
Every field in your form needs to have a strategically placed, elaborative label. For instance, if a person’s name is in the field, it should be suitably labeled as either “Full Name” or divided into two separate fields with the labels “First Name” and “Last Name.” To link the label text to the form field, use the label> tag or an ARIA property (see tip #9).
A person should be able to tab through the form and fill out every field before reaching the “Submit” button; otherwise, they may not even be aware that there are extra fields. Basically, the visual order should be followed by the tab order.
Consider utilizing fieldsets to organize related or similar fields if you have any. For instance, “Personal Information” could include fields like “Full Name” and “Date of Birth.” A screen reader user can keep track of their progress and get the context they might be missing while filling out the form by using this sort of form organization.
If a form field has to be filled out, it should be identified as such and set up to notify screen reader users. Some screen readers will not speak the asterisk, which is a common way to indicate that a field is necessary. For visually impaired individuals, those with learning difficulties, and those who speak English as a second language, asterisks (or comparable visual cues) should still be utilized. ARIA required=”true” and ARIA required=”false” can be used to tell a screen reader if a field is mandatory or optional. The user must be informed of the submission confirmation and any problems after submitting the form. We advise mentioning any error numbers in the page title (after the user submits) so that the user is alerted right away that the page contains mistakes. When a user submits a form with mistakes, they should be directed to a submission page that details the errors and offers a quick path to them.
Finally, using CAPTCHA to validate submissions is difficult to use and should not be done. To prevent spam submissions to forms, WebAIM has a handy list of accessible alternatives to CAPTCHA (link is external).
7. Use tables for tabular data; do not use them for layout.
Users of screen readers see more verbosity when pages are laid out using tables. Screen readers notify users that there is a table with “x” number of columns and rows whenever they come across one, which detracts from the content. Additionally, the order in which the text is read could differ from the way the page appears visually. Instead of utilizing tables to layout a website, utilize CSS for appearance.
Use headers for rows and columns to help explain the relationships between cells when a data table is required (i.e., when you have a set of data that is best comprehended in a table format, such as a bank statement). Use the “scope” attribute in HTML to identify any complex tables that contain several cells that relate to one another in a certain way. HTML5 table captions can be used to provide users with more details about how to read and comprehend the relationships between the tables.
8. Ensure that all content may be logically accessed using only the keyboard.
Users with mobility issues, such as those who have sustained repetitive stress injuries, might not be able to operate a trackpad or mouse. These users can access content by pressing the “tab” or “arrow” keys on a keyboard or by using alternate input methods like a single-switch input or a mouth stick. The tab order should therefore correspond to the visual order so that keyboard-only visitors can properly browse the site’s content.
Markustudio a freelance web designer in Manchester providing web design, logo branding, print, SEO and digital design services. If you are interested in any help when it comes Web Design & Development. Feel free to Contact Us.