If you have a website, you know how to make it successful. There are two large factors (apart from content) that can make or break your site’s popularity: user-friendliness and performance. In this article, we will discuss how to make your website more accessible and friendly to netizens who are undeterred by physical disabilities and use assistive technologies to surf the net.

Let’s start with…

1.     An accessible CMS

There are thousands of content management systems out there to build your site upon. You’ll want to choose one that’s accessibility-friendly.

That means a platform that has its fair share of themes/ templates/ layouts that are accessible. Check the theme’s documentation for compliance with accessibility standards. The CMS itself should adhere to WCAG 2.0 guidelines to make content (both posts and the code/markup) as perceivable, operable, understandable, and robust as possible. Same goes for add-ons/ plugins/ extensions etc.

Your job can become easier if your CMS has features like closed captioning, accessible tables, etc. Admin controls should be accessible too.

2.     Well structured Headlines and Content

Properly structured headings can make your content easier to comprehend and navigate for assistive tech users. Using <h1>, <h2>, <br>, tags structures your content for better reading. Using them properly also makes for better SEO, which is another plus.

Some tips to keep in mind:

• For the page/ post heading and title, use <h1>. Don’t use it for anything else after that.
• Use subheadings (<h2>, <h3>, etc.) to further divide your content into an easily understandable structure.
• Don’t skip levels out of the blue. It’ll make screen reader users think that they are missing content.

Word of advice: Keep your HTML markup clean and free of presentation/design elements. Use CSS classes to style your content.

3.     Alternative (Alt) text for images

Visually impaired users rely on their screen readers and other devices, but even those can only go so far when faced with images. This is why you should always add Alt text on them. For example:

[[File: Heath Ledger Joker 01. jpg |thumb |160px |alt=Heath Ledger as Joker in Batman – The Dark Knight by Christopher Nolan |”[[Heath Ledger as Joker in Batman-The Dark Knight]]”

From the above markup, screen readers will be able to parse the alt text and read it aloud as “Heath Ledger as Joker in Batman – The Dark Knight by Christopher Nolan.” Regular readers will only see “Heath Ledger as Joker in Batman – The Dark Knight.”

Alt text allows screen reader users to understand what an image is about and what they add to the content’s message. If you’re using infographics then not using alt text means depriving screen reader users of entire page worth of information. If the image contains a link, then no alt text means screen reader users will only get the file name without any description whatsoever.

If your image is purely decorative, you can (and should) pass up on alt text, just to keep distraction at bay.

4.     Descriptive text for links

Like with alt text, provide descriptive names for where your link goes.

Just like some sort of text formatting can show sighted visitors most links within the content, screen readers can be used to scan the entire content for links. In those cases, without any preamble or description, your link will simply be ‘click here’, ‘for more information’, etc.

Keep in mind that the list of links will be sorted alphabetically, so you may want to give first-letter names to important links. Example: Instead of saying “Introduction to (topic)”, say “About (topic)”, and so on.

5.     Colors

Colors add spice to your page, but they will be more of a hindrance for those who have color-blindness. They are also a great way to assist those with learning disabilities. You’ll have to solve this conundrum early on.

The most common color-deficiency is red-green, so keep their use to a bare minimum (or do away with them entirely). If not, make sure you’re not using them in important sections of the page and form fields.

Use other colors to distinguish content across the pages to accommodate learning disabilities, but also add other visual indicators (asterisks, exclamation marks, other icons, page breaks and white spaces, etc.) to keep your page accessible and easily understandable (also: non-irritating) to people with color blindness.

You can also test your page’s color contrast (especially if you’re using text over images) with online tools like WebAIM’s Color contrast checker and Color Contrast Analyzer by Chrome.

6.     Accessible, Spam free Forms

Create and structure your forms for maximum accessibility. It’s very easily done.

Start with clearly labeling and positioning all fields. For instance, while asking for the name, either label the field as “Full Name” or divide the field in two parts labeled “First name” and “Last name”. You can use <label> tag or ARIA (Accessible Rich Internet Applications) attaching label text with required field.

Club related fields together allow users to keep track of the progress. For example, fields like Name, date of birth, address, etc. can be grouped together into ‘Personal Information’ category.

Make sure that all required fields are labeled as such and optimized to alert screen reader users if they missed it. Some screen readers can be choosy with reading aloud symbols and may not read symbols you used to mark a field as required (asterisk, exclamation mark, etc.)

You can add ARIA requirement true for required fields and false for those that can be left unfilled. If there are errors in the form, direct them to a separate page which clearly indicates what and where errors are and navigate to them easily.

Now, making forms accessible means you can’t use CAPTCHA (no regrets there) but you can use alternative methods to prevent spam overflow. WebAIM has a great guide and code snippets to add hidden form elements, detecting spam-like content, and more to suss out spambots. Additionally, Google’s No CAPTCHA is another ARIA-ed solution that adds a checkbox which is accessible by assistive technologies.

7.     Tables for data (Not Layout)

Defining tables in your HTML markup is outdated and time-consuming. It also creates antipathy for your screen reader users.

Every time a screen reader comes across ‘layout’ tables, the user is barraged with speech telling him that the number of columns and rows, and starting lines/ text column with a separate cell number to boot. Not to mention the content that will probably be read out in single rows (column-to-column) like traditional full page text. So do yourself and everyone else a favor and use CSS for your layout, period.

Now to deal with actual data tables: Clearly specify headers for rows and columns (a no-brainer), and use HTML ‘scope’ attribute to identify cells in larger, complex tables. HTML5 has table captions you can use to avail information on unique cells and how to understand relationships in the table.

8.     Accessibility through Keyboard

Those with mobility disabilities (from injuries, arthritis, etc) can use ‘Tab’ and ‘arrow’ keys on the keyboard instead of mouse or trackpad. There are other assistive technologies too (input controls like single-switch, mouth-stick, etc.). To make your site accessible to keyboard users, ensure that your tab order is easy to follow and logical, layout-wise.

You can break-up long pages and content with anchor links so it’s faster and easier for keyboard users to navigate through it without having to scroll up and down repeatedly. Also add a link to skip to main content or homepage/category page so keyboard users don’t have to wade across the navigation to get to main content.

If your navigation is tiered with multiple levels and subcategories, make sure they are all easily accessible through keystrokes. You should also compensate for ‘Hover’ and make the hover features accessible by the use of single keystrokes to activate them.

9.     ARIA roles

W3C Web Accessibility Initiative’s ARIA (Accessible Rich Internet Applications) is a powerful suite of modules and specifications to make web content more accessible to people who rely on assistive technologies, especially screen readers and mobility-assistance tools.

Assigning ARIA landmarks to elements on your web page enhances their accessibility and allows users with visual impairments or other physical disabilities to interact with your content easily. ARIA can be easily added, just as simply as adding classes to markup for calling CSS attributes.

You can use ARIA to add accessible design patterns and widgets like accordion, listbox, grids, etc. You can make browsing through the site easier by packing a set of links and tabs into navigation area for tree or tabbed style navigation. You can add sliders, toolbars and tooltip widgets, rich text editor, alert dialogs and messages and more.

For keyboard-accessible structural navigation, you can use keyboard bindings and behaviors, maintain keyboard focus with tabindex, and even add drag-and-drop support for mobility-impaired users.

10.Accessibility for Dynamic Content

Screen reader users may be caught off guard from dynamic page updates. Overlays, updates (real-time or otherwise), popup buttons and dialogs, alerts, and more can get a keyboard-user trapped and frustrated with your website. Those with visual impairments who use magnification aides may get stuck zoomed in a completely wrong section of the page.

This is why you’ll have to test your accessible design exhaustively. Use ARIA roles and a front-end development framework which supports accessibility-friendly user-interface development.

Do not use features like auto-play on audios/ videos and make sure there are keyboard controls for them. You can also add sign-language videos for hearing impaired (for content like tutorials or Do-it-yourself things), or simply make sure that regular videos have closed captioning and transcripts.

Additionally, include alternative text on all images and make them accessible with keyboards regardless of whether they’re linked or not.

Summing Up:

Website owners should take it upon themselves to make sure their sites are accessible to people with physical disabilities. Developers can help make the web open and accessible by sticking to assistive-tech-friendly development techniques and testing their sites frequently.

Remember that it’s within a person’s right to be able to use and access the net, despite and regardless of disabilities. It’s a collective responsibility of content owners and web developers to make sure it happens.