In order to maximize the number of potential visitors to your website, make it as accessible and user-friendly as possible. Accessibility has a positive impact on optimizing your site for search engines (SEO)! Consider implementing the following tips during the construction (or reconstruction) of your website.
Make it Keyboard Accessible
Keyboard accessibility is important for people with any sort of vision or mobility impairment, whether permanent or temporary. To ensure your business site is accessible to all people in this category, ask yourself the following questions:
1. Can the user successfully navigate your site through the use of a keyboard without using a mouse?
If not, your site probably lacks proper hierarchical markup and anchor tags that can guide a user through the page via tabbing for instance. Ensure your sites focusable features are noticeable by applying some sort of background highlighting in order to provide salient visual cues.
2. Can the user tab back and forth through a form without being forced to stay on a single form field?
Ease up on your form validation by simply adding the required attribute to the tags, but not any additional code in your scripts to trap the user from browsing.
3. Can links and buttons be activated by pressing enter?
Once again, proper markup is the culprit here. Ensure you use valid anchors and button tags with their appropriate attributes. If your markup is off but you are insistent on using it, you can use JS script to make the element focusable and operable with the use of keyword commands.
4. Can you bypass the navigation and skip directly to the main content of the page?
If not, add in an anchor tag in your navigation that appears upon tab (although you can make it visible to begin with) and then upon pressing enter, have this direct the user to the main content. Or better yet, incorporate ARIA landmark roles to designate different areas of your page (e.g., the banner, navigation, main section, etc.).
Divide Pages into Headings
Imagine trying to read a newspaper that didn’t have any headings or sections. Yikes!
Headings play a vital role in making the content on your page readable. Semantic markup becomes much more important to assist users that rely on screen readers due to vision impairment. Just as visually-abled users can scan an article by its headings and quickly understand what it is about, the importance of appropriately marking up your content with heading tags becomes crucial for screen reader reliant users for the same reason.
One way to give your site structure is to use the varying heading rank elements ranging from a single H1 tag representing the main title of the page (and not the logo or site name with the exception of the homepage) down to multiple section H2 tags and then multiple H3 tags that represent nested subsections (going beyond H3 is rare).
Although some developers have made the case of implementing multiple H1 elements as per the HTML5 specs, screen readers cannot differentiate the importance of multiple and potentially competing H1 elements, even though they may be nested inside independent sectioning elements that theoretically have their own internal hierarchy. Therefore, it is advisable to have a top-down, hierarchical heading structure.
A case can be made for using visually hidden H1 elements to denote structural indicators for the purpose of labeling the manner in which the page is arranged e.g., that the user has entered into the “sidebar” section, “footer” or any other area outside the main content area. However, ARIA landmark roles resolve the need to rely on visually hidden content designators that speak about the page structure. Thus, along with having a proper heading hierarchy, it is advisable to make use of landmark roles.
Have a Fluid Font Size
Due to customizable options provided by modern web browsers, font size isn’t as relevant as it used to be. What is important is how well your site responds to varying font sizes – in other words, is your site responsive?
If your text starts to bleed over to other parts of the page and overlaps, or if you have to horizontally scroll to view the page’s content, your site isn’t responsive.
A simple fix for this would be to use percentages or relative measurements for your font (and other elements) rather than hardcoding them in. Another tip would be to make use of media queries for varying display sizes and/or the use of a responsive framework.
Ensure Your Site Has Sufficient Contrast
It is safe to say that readability improves with contrast. As a general rule, dark text with light background is better for readability than its inverted color scheme. Black text on white background proves to be the most readable. In order to ensure that your website is readable, WCAG 2.0 sets the minimum requirements of contrast between your text and background to a ratio of 4.5 to 1. Anything lower than this will fail to render your website as accessible. WebAIM provides a useful checker you can measure your font against that allows you to manipulate the ratio by darkening or lightening either of the colours.
Provide Descriptive Alternative Text for Your Images
The alt text attribute is required for non-text content because images and icons are not machine readable. And because they are not machine readable, they cannot be processed by Google bots and screen readers without the use of this attribute. Moreover, there are circumstances where the browser fails to or intentionally prevents the load of an image and so this attribute proves useful.
While the alt text description does not need to be a 1000 words, it should provide non-redundant feedback to the user about the nature of image. In circumstances where the image is used for decorative purposes and does not add to the meaning of the content, the alt attribute can be set to an empty string. Finally, in rare cases, it can be altogether omitted and that is when the image is contained in an figure element that has a caption describing the image.
These are some of the essential steps towards making an accessible website. It is safe to assume that once you incorporate these tips, your site is not only accessible, but is Google-friendly for SEO purposes. So once again, do make sure that your site is keyboard accessible, has a proper heading structure along with a good contrast ratio and finally, images with descriptive alt texts.
Does this sound a little too complicated? Do you need help in making your website accessible? Not to worry! At Siva, our web developers implement the latest accessibility techniques in keeping your site up-to-speed. Feel free to get in touch us with and we will respond to you within two business day.
