Top 10 Website Accessibility Tips

1. Select a content management system that enables accessibility.

You can build your website with the help of a variety of content management systems. Although there are other alternative options, popular examples include Drupal and Wordpress.

After deciding on a CMS that meets your needs, be careful to pick an accessible theme or design. For accessibility-related advice and pointers for developing accessible content and layouts for that theme, go to the theme's documentation. When choosing modules, plugins, or widgets, make sure you adhere to the same rules.

Make sure components like video players and editing toolbars allow the creation of accessible content. For instance, editing toolbars should have options for accessible tables and headings, and video players ought to support closed captioning. Additionally, it should be possible to utilize the CMS administrative tools (such writing a blog post or leaving a remark).

2. headings wisely to arrange the content's structure.

The header structure can be used by screen readers to traverse text. Your website's content will be properly arranged and understandable to screen readers if headers (h1>, h2>, etc.) are used correctly and strategically.

Make sure you use the proper heading order, 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 may confuse users of screen readers), design your text using a new CSS class.

Examples of headers used properly are as follows:

• The page's main title should be in h1> format. The title of the website and the titles of the various pages should be the only things you need a "h1" for.
• Use headings to denote and arrange the structure of your material.
• Avoid skipping heading levels (for instance, moving from a h1 to a h3) as screen reader users may assume that there is no content.

3. Include the appropriate alt text for images

Images should have alt text so that screen reader users can understand the message being sent by the use of images on the website. This is crucial for educational visuals in particular (such as infographics). If a picture has text in it, that text should also be included in the alt text, which should contain the message you want the image to express.

The only exception to this rule is when an image is used only 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.

If an image is the entire content of a link, the screen reader will read the file name if no alt text is present. For photos that are used as links, always offer an alt text description.

4. Give your links names that are distinct and informative.

Use wording that accurately represents the link's destination when you include links in your article. "Click here" is not seen as descriptive and therefore ineffective for screen reader users.

Users who are blind or visually handicapped can use their screen readers to search for links just like sighted users do. As a result, users of screen readers frequently do not read the link in the context of the rest of the page. The context of links is clearly explained to screen reader users by using descriptive language.

As screen reader users frequently scan the links list using the initial letter, the most distinctive information of the link should be given first.

For instance, if you direct people to a website titled "About Us"

• Avoid saying, "Click here to read about our company."
• Instead, add, "Read about us to discover more about our organization."

5. Use color with caution.

Red-green color deficiency, the most prevalent type, affects about 8% of the population. These people won't be able to understand your message if you ONLY use these colors (particularly to denote required fields in a form).

When used to distinguish and arrange your material, color has a significant positive impact on other populations of individuals with disabilities, especially users with learning problems.

Use color, but also additional visual cues like an asterisk or question mark to appease both parties. Make sure to use visual separation to separate content blocks from one another (such as whitespace or borders).

You may assess color contrast using a variety of tools, which will help you make your page as visually accessible as possible to people with limited vision or different degrees of color blindness.

6. Create accessible forms.

The screen reader user does not have the same indications as the sighted user when form fields are not labeled properly. It could be impossible to determine what kind of information should be submitted into a form field.

Every field in your form needs to have a properly placed, elaborative label. For instance, if the field is for a person's name, it should be suitably labeled as either "Full Name" or have two different fields labeled as "First Name" and "Last Name." To link the label text with 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 dictate the tab order.

Consider using fieldsets to combine related or comparable fields if you have any. For illustration, "Personal Information" could include fields like "Full Name" and "Date of Birth." A screen reader user can follow their progress and get the context they might be missing while filling out the form by using this type of form organization.

If a field on a form needs 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 that is typically used to indicate that a field is required. For blind users, those with learning difficulties, or those who use 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 screen readers if a field is mandatory or optional. The user must be informed after submitting the form if there were any submission issues as well as whether it was successfully submitted. After the user submits, we advise including any mistake numbers in the page title so they are instantly obvious to the user. If 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, the use of CAPTCHA is inaccessible and shouldn't be used to verify inputs. To prevent spam submissions on forms, WebAIM has a handy list of accessible alternatives to CAPTCHA (link is external).

7. Use tables for tabular data, not for layout

Screen reader users see more verbosity when pages are laid out using tables. When a screen reader comes across a table, the user is alerted that there is a table with "x" number of columns and rows, which detracts from the content. Furthermore, the sequence in which the text is read could differ from the way the page appears visually. Instead of utilizing a table to layout a website, utilize CSS for display.

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). The "scope" property in HTML should be used to identify any complex tables that contain several cells that relate to one another in a certain way. To help visitors read and comprehend the relationships between the tables, table captions (HTML5) can be utilized.

8. Ensure that all content can be logically accessed using just the keyboard.

Users with mobility issues, such as those who have sustained repetitive stress injuries, might not be able to operate a mouse or trackpad. These folks 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. So that keyboard-only visitors may properly browse through the site's content, the tab order should correspond to the visual order.

Long pages with a lot of content should be divided up with anchor links (jump lists), allowing keyboard-only users to skip to relevant sections of the page without having to wade through unrelated content. Each page should contain a "Skip to main content" link at the top so keyboard-only users don't have to tab through the page navigation to access the main content.

Menus should be set up on pages with local menus that have several levels and sub-items so that all menu items can be accessed with the keyboard. Avoid using elements that can only be activated by the user hovering over them with the mouse because users of keyboard-only or screen readers won't be able to do so.

9. Utilize ARIA roles and markers (but only when necessary).

ARIA (Accessible Rich Internet Applications) is a sophisticated, potent technical specification for providing accessibility information to elements that are not already inherently accessible. When native HTML components are offered, you should always use them. Remember that the first rule of ARIA is "Don't utilize ARIA." Many functions that once required ARIA attributes are now implemented in HTML5.

As an illustration,

• Use the button tag from native HTML instead of the button role from ARIA.
• Use the HTML label tag rather than aria-label or arial-labeledby.
• ARIA's role of navigation should be replaced by the HTML 5 nav tag.

As with adding classes to HTML to load CSS attributes, ARIA attributes can be introduced to your HTML.

Please take note that most complicated widgets cannot be made accessible by just adding ARIA attributes. ARIA has no effect on users who solely use the keyboard (see tip #8); it only has an impact on those who utilize assistive technology. You still need to use Javascript to set up your communications and actions.

Examples of proper ARIA usage include:

• Including notifications to inform screenreader users about dynamic page changes, including stock tickers and search filters
• allowing screenreader users access to intricate, interactive widgets like date pickers.

10. Make dynamic content accessible.

Screen readers could be unaware when content changes dynamically (i.e., without reloading the website). This covers screen overlays, lightboxes, in-page changes, popups, and modal dialogs. Page overlays could entrap people who solely use their keyboards. Users of magnification software might be zooming in on the incorrect portion of the page.

It is simple to make these features available. Alternatives include front-end development frameworks that particularly handle accessibility as well as ARIA roles and alerts.

Make sure that video players may be operated with a keyboard and that they don't automatically play (with non-consensual sound). Additionally, all videos must offer alternatives for closed captioning and transcripts for hard of hearing viewers.

If your website features a slideshow, make sure that each image includes alt text and can be accessed using the keyboard. Make careful to test for accessibility if you are utilizing any special widgets (like a calendar selector or drag-and-drops).

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.