Top 10 Tips for Accessibility on Your Website

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).

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.

Long pages with a lot of content should be divided up with anchor links (jump lists) so that keyboard-only users can go to the relevant sections of the page without having to wade through other content. Each page should contain a “Skip to main content” link at the top so keyboard-only users won’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 using the keyboard. Avoid using elements that can only be activated by the user hovering over them with the mouse because users of keyboard-only devices or screen readers won’t be able to do so.

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

An intricate and effective technological definition called ARIA (Accessible Rich Internet Applications) is used to add accessibility information to elements that are not already inherently accessible. When they are accessible, you should always use native HTML components. Remember that the first ARIA guideline is “Don’t utilize ARIA.” Many HTML5 features that once required ARIA properties are now available.

For instance:

• Instead of using the ARIA role of button, use the standard HTML button tag.
• Instead of using aria-label or arial-labeledby, use the HTML label tag.
• Use the HTML 5 nav tag rather than the ARIA function of navigation.

You can add ARIA attributes to your HTML in the same manner that you add classes to HTML to load CSS attributes.

Please take note that the majority of complex widgets cannot be made accessible by just adding ARIA characteristics. ARIA has no effect on users who solely use their keyboards (see tip #8); it only has an impact on those who utilize assistive technology. You still need to use Javascript to set up your interactions and behaviors.

Use of ARIA in appropriate contexts includes:

• Including alerts for dynamic page changes like stock tickers and search filters to inform screenreader users.
• enabling screenreader users to access intricate, interactive widgets like date pickers.

10. Make interactive content available.

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

It is simple to make these features accessible. Options include front-end development frameworks that explicitly assist accessibility as well as ARIA roles and alerts.

Make sure that video players can be used with a keyboard and that they don’t auto-play (non-consensual sound). All videos must also offer alternatives for closed captioning and transcripts for hard of hearing viewers.

If your website features a slideshow, make sure that the keyboard can be used to move through each image and that it has alt text. Be sure to test for accessibility if you are utilizing any special widgets (such a calendar picker 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.