Almost every change to your site that improves digital accessibility also improves your website’s SEO (Search Engine Optimization). And because nearly 1 out 5 people in the US has some kind of disability, making your site accessible improves your potential user base by up to 20%. Not only that, but the principals of professional web design and of accessible web design go hand in hand. A well-constructed, modern website will need very little extra work to be accessible to the disabled. To be accessible, your
content (text, images, videos, audio files, etc.) should work on every kind of
delivery system (website, mobile device, screen reader, etc.) This way, the same content will be usable by people with different disabilities, including
- The blind and visually impaired
- The deaf and hearing impaired
- People with limited or restricted motor skills
This concept is often extended to include
- People with literacy issues
- The aged
And although it is not technically considered a factor in accessibility, because of the number of disabled people who access websites from mobile devices, we believe
- All websites should be mobile-friendly, if not mobile-first
When creating your site, keep in mind is that users will be approaching your content in different ways and with differing levels of abilities. Design your site to be usable by as many types of people as possible. Here are a few questions to ask yourself when creating your site:
Did You Use Proper HTML Semantics?
HTML and CSS, the basic languages of web pages and apps, were designed to separate form from content, which is exactly what makes content usable on different delivery systems. As every web designer knows, HTML means “Hypertext Markup Language.” A
markup language is a system of tagging (marking up) text to indicate what’s a headline, what’s a subhead, what’s an image, etc. Your web designer should use proper
semantics when creating your site, such as the following:
- <h1>YOUR MOST IMPORTANT HEADERS SHOULD BE LEVEL-ONE HEADLINES</h1>
- <h2>Your subheads should be level-two headlines</h2>
- <p> Body text should just be in paragraphs. Avoid <span style = “color: red”> inline styles </span> whenever possible.</p>
All of your webpages formatting should be controlled by CSS. CSS stands for “Cascading Style Sheets.” A
style sheet contains formatting for the markups, including fonts, font sizes, colors, even placement on the page. If you create multiple style sheets for the same site, they can “
cascade,” i.e., instantly supersede one another. This is how the same webpage can look completely different on a laptop than on a smartphone. Your device just detects which CSS to load, and the page automatically formats itself. (CSS is newer technology than HTML. Older webpages used to mix in styles with content, which is why they don’t reformat themselves properly on mobile devices – and also why they are not digitally accessible.) Using semantic markup separates content from appearance, enabling users to change the font size in their browser, view your site on different devices, or to use assistive devices like screen readers that ignore CSS and just read the content aloud. One additional benefit: a web page with semantic markup be more comprehensible to search engines, which will help your site’s SEO.
Have You Supplied Text Alternatives for Non-Text Content?
For every graphic on your page, use <alt> tags or other techniques to provide descriptions. Content in <alt> tags appears when the user rolls over an image – to see an example, mouse over any image on this site. For images that can’t contain <alt> tags, such as background images, use <title> tags on the containing div instead. Tagging images is especially important for graphics that represent navigational elements, such as arrows. It’s also a good idea give descriptions that indicate utility instead of just appearance: “Go to next page” is much more useful than “Right arrow.” Neither blind users nor web browsers can understand the content of web graphics – both of them perceive them as blocks of pixels devoid of meaning. Adding <alt> tag lets both these users and search engines know what your image represents. When you follow these practices, you’re not just improving accessibility, you’re also improving SEO.
Have You Used Captions and Other Alternatives for Multimedia?
For video, closed captions are the standard for all spoken elements, but text transcripts and sign language interpretation are also acceptable, and in some cases preferable. Audio descriptions of videos, which describe key story elements that may not be seen (e.g., “Car crashes into tree”) are also important. Failure to caption can render your most important content incomprehensible to the deaf or hearing impaired.
Did You Avoid Preventable Design Pitfalls?
While some design decisions seem to be only aesthetic, they can create real barriers for the disabled. Follow these practices:
- Make sure there is enough contrast between foreground and background colors, so that readers with poor vision can read your content.
- Don’t rely on color itself to convey information. Many of your users may have some type of color blindness or other visual impairment.
- Make sure background audio is low volume or can be turned off, so that users who are using screen readers can hear the content.
- You must include the ability to pause or stop any multimedia on your site
- Make sure that forms, etc. can be tabbed through without using a mouse to go from field to field. Many users with motor impairments only use a keyboard to navigate.
- Keep navigation simple. Remember it can be a chore for users with mobility impairments to execute multiple steps to maneuver around a site.
