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:
- WebAIM has guides on creating accessible forms and ensuring those forms are spam-free. Accessible forms are also mentioned in UC Berkeley’s 10 Tips for Making Your Website Accessible, among other general pointers.
- When it comes to making sure your website is responsive, OpenSource provides a good general overview of the topic and why it matters, while Treehouse’s Scalable Web Design article discusses the specific differences of using vectors, CSS, and bitmaps. If you’re itching for some information on actual code for zooming in and out, CSS-Trick’s Best Way to Programmatically Zoom is rich with detail.
- For more general information on making your website accessible, DreamHost has 10 ways to do so, and there are 9 more from SEJ – in both cases, the tips are quick and easy to follow. Another great resource is the Designing for Accessibility posters from the UK Home Office, which provide recommendations for a wide variety of disabilities.