Designing for the Web

The internet has become essential to how people interact with the world, from marketing to communication and interactions between people to ecommerce. A lot rests in a web designer’s hands, including making sure that everyone can use the page. Below are five areas where you can start to include everyone when you design your site.

HTML and ARIA

There may be a lot to do, but one simple place to start is by using ‘clean’ HTML. By using the correct HTML tags and utilizing ARIA tags, a web designer immediately makes using a screen reader easier. As Blake Arnsdorff points out, if you can’t read the HTML, then neither can a screen reader. ARIA tags simply give extra information about the text on screen, which is always welcome.

Keeping this in mind also eases edits made later in the HTML or by other people. Clean HTML makes it easier for search engines to tell what is on your page, and so it will improve your search engine optimization (SEO).

Alt tags and Keyboard Focus Styles

In a similar vein, maintaining alt tags and keyboard focus styles will help maintain the visual identity you want to keep. I explained alt tags and why they’re important here. Keyboard focus styles are used for keyboard navigation, which you can try out by opening your browser and using tab, shift+tab, and enter to navigate. The blue box on chrome and other browsers is default, but one can change this value. Never change this value to zero, as it prevents the feature’s use, but take the opportunity to maintain color scheme and experience (and don’t forget to remove the default theme, else it overlaps with yours).

Mobile

Many people need to be able to access the mobile version of a page. This is already something that’s probably on your mind, but if Universal Design is made part of your process, then thinking about the mobile version from the beginning will help ease the process of moving it over later. A few things that help are keeping the layout simple and, when planning what an element will look like on desktop, thinking about what you will do when it comes to the mobile version.

Links

Links are essential to webpage navigation. Don’t alienate your mobile users or those with low mobility by making the link click area too small. Labeling your links with more than “Click Here” will similarly help those with screen readers who are listening to only the links on the page; without context, these links mean nothing.

Forms

Clearly identifying the space to click in to fill a form will help users in a similar way to that listed above. I explain the value of not relying on color to convey information, like form fields in error, here. One last thing to consider is to have labels or example text in the entry fields. That way, if someone forgets or is unfamiliar with your form, they can use it with ease.