Making Your ATE Websites Accessible for Everyone

Posted by on .

Two people build a website collaborateively

Two people build a website collaborateively

The quantity and quality of online content is ever-increasing in most areas, including education. Taking extra steps to ensure your website and webpages are accessible, as the tip sheet from AccessATE and NCAM describes, can make your content stand out, and get it used more often by more people.

Tip sheet: Creating Accessible Websites

You may recognize that a number of the accessibility considerations for websites are the same as those important for other media – good color contrast, using headings, providing alternative text for images, avoiding complex tables, and so on. Here, we will discuss some additional recommendations when designing an accessible website.

Forms are a frequent feature on many websites – perhaps you need your users to sign up for a webinar, or request some information or an item, or upload materials or resources. A key thing to remember when designing forms is that everything must be as clear and explicit as possible. Buttons, labels, next steps, consequences of actions, etc., should never be vague or leave your users wondering what will happen once they click. For users with low vision or motor control issues, clickable areas should be made fairly large, and clickable elements shouldn’t be clustered together. Forms can seem tricky to design in an accessible way, but they needn’t be an obstacle – see the Additional Resources section below for additional tips.

An additional and often overlooked factor of accessible websites is how responsive they are – i.e. how well their pages work when viewed on different devices or screen sizes. This has become increasingly important because mobile devices such as tablets and smart phones have now replaced desktop computers for many users as their primary way of going online. To check device compatibility throughout your web design process, the Google Chrome browser has a feature that allows you to view your page as people see it when using a wide variety of mobile devices. A website’s responsiveness also includes how it behaves when zoomed in or out. Low vision users may zoom in by quite a bit in order to read text or view images. When designing for accessibility with responsiveness in mind, a simple, linear layout is always the best place to start. Ensure that content doesn’t spill off the page (requiring horizontal scrolling) when on mobile or zoomed in, and avoid programming with absolute units like pixels, when defining size; instead, use relative sizing. Opt for vector images whenever possible, and of course, never block user scalability!

There is also the adaptive option, allowing your users should be able to change the font size or color using browser tools for instant adaptation. You can also add a toolbar that makes font size and color changes that each user can customize. The key is to make sure these tools are easy to find and easy to turn on and off, and that you’ve done the work behind the scenes to make your pages transform gracefully. In addition to the notes above and those in the tip sheet, the resources below have even more recommendations and requirements to making your website accessible.

Additional Resources:

    Feature Articles
See More Feature Articles