University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Accessibility Strategies

There are a number of different strategies that can be used to improve user access to your website. Below are a few ideas to get you started:

Optimize for screen readers

As discussed previously, users with visual impairments will typically use some type of screen reader. The way the program interacts with your website will depend on how the developer of said software decided to implement the screan scraping strategy. Some screen readers will track mouse movements and will read the content that is immediately underneath the mouse cursor. For these types of screen readers you will want to ensure that all content is available in text form. Obviously for actual written text, this will not be an issue so long as you have descriptive headings and text printed on all navigational elements, so the screen reader can tell the user what the button does. For images and video, you will want to make sure you include some form of alternative text or a caption below the image or video that describes it. The second type of screen reader that you will typically find will actually read all of the html code that powers your website, and try to provide a more interactive experience for the user using that information. These types of screen readers will require you to write neat and organized code, and include semantic html5 elements such as table, figure, or article to help the user and their screen reading software find the part of the webpage they are looking for.

Optimize for Keyboard Navigation

Users with a physical disability may need to interact with your website by sending keystrokes instead of using the mouse. This means you need to make the website navigable with keyboard inputs in addition to the mouse that most people will be using. One of the best exaples I have managed to find is Youtube, which has a hotkey for basically everything you want to do on the website. Pressing K stops the video, and you can rewind or fast forward with the arrow keys. The c key activates closed captions, and f opens the video in full screen. You can also cycle through videos with Shift+N and Shift+P. While your implementation may look a bit different, this is exactly the type of navigation system you are looking for.

Optimizing for Visual Impairments

Users with visual impairments can range from color blindness to total blindness, and anything in between. For users with color blindness or minor impairments, the best thing to do is to use large differences in color to your advantage. Ensure that text on the page has a substantially different amount of contrast and color from the background. For example if you have a navy blue background, you might want to consider white text, or a lighter shade of a non-blue color to ensure readability. For users with a more significant visual impairment, you will want to look at the screen reader section above, as these users will likely be using a screen reader to access the site.

Optimizing for neurological disabilities

Users with a neurological disability such as dyslexia, ADHD or autism may have trouble memorizing a complicated layout, or may get more easily confused by a complicated interface. Remember to keep your website interface easy to use and well organized. Minimize the amount of pointless filler content and random elements that get in the way of the content and can become distracting. Try not to use crazy colors for background items if you can help it, and keep the background relatively flat when writing large amounts of text. Also, consider the navigation tree of your website if you are operating something large with a lot of webpages. Try to organize your content into categories and subcategories, which can be accessed with an easy to find menu, so users can quickly jump to any part of the website if they get lost.