Accessibility Solutions
Solutions for Visual Disabilities:
Solutions for Blindness
Semantic Structure
- WEBaim section on Semantic Structure
- Universal Design for Web Applications, Ch 4., Structure
- Use header tags to identify structural outline of sections of the web page. Do not use header tags just to format text.
- Screen readers may scan semantic structure to understand page structure
top
Alt text
- Use alt text to identify the meaning and importance of images.
- Alt text should be accurate and brief, and describe the importance of the image on this particular page.
- Use null alt text (alt="") if the image has no important content, if you have text about the image visible next to it, if the image is purely decorative or provides a background image, or the alt text would be redundant.
- Use alt text to describe the links in a client-side image map
- For complex images, such as graphs, provide a long description either under the image, or on a separate page with a link from text near the image. Most disabled users ignore long descriptions so putting a concise explanation in the main tags or before the object is probably more useful
top
Invisible content that screen readers read
- WebAIM site for creating invisible content for Screen Readers
- use hidden text to convey information about images or graphical content
- Skip Navigation links: use hidden text to allow user navigating with tab key to skip content areas (e.g., navigation) by jumping to a named anchor in following section. (Cal Poly Pomona homepage)
Presentation of page through CSS
- Use external CSS for page layout, so presentation is separate from content. This allows blind users to opt for user stylesheets that better suite their disability and allow them to read hidden text
- when laying out a page, place most important content nearer top of page -- possible with CSS layout
top
Avoid layout tables and configure data tables
- Avoid tables for layout, use data tables for lists of numbers
- use summary attributes for tables to identify content of table
- use the <th> tags to identify table and column headers
- use header information to connect column headers with table content--changes the way reader interprets table content
- PDF files should be properly tagged for a screen reader, or alternative HTML files provided.
Hyperlinks
- Screen readers often tab from link to link to scan the page.
- hyperlink text should have meaningful content, and not just read "link" or "more"
top
Solutions for low vision
- Use relative rather than absolute font sizes
- define both background and text colors each time you define one of them in a style to ensure that they contrast. Check against Color Contrast Analyzer
- Use external stylesheets so user can apply own stylesheets that make web pages more visible to them
- Use text rather than graphical titles to convey information. If you use graphical titles, supply hidden text as well, in case user cannot read them.
- Use elastic and liquid layout (adjustable page sizes) to allow user to enlarge page without horizontal scrolling..
top
Solutions for color blindness:
- Design pages with fonts and background colors that contrast in value (darks and lights) Check background and font colors for difference and contrast using Color Contrast Analyzer
- avoid using color combinations that are problematical for color blindness (e.g., red/green)
- Check web page colors against 3 different types of color blindness at Vischeck
- Avoid using color as the only way to convey information
- If color coding is necessary, explain the graphic and color scheme so that the color blind person can understand it as well. An explanation may also clarify meaning for non-colorblind people
top
Hearing Disabilities:
Solutions for Deafness and hearing disabilities
- printed transcripts can be provided of audio clips
- synchronous captioning for video clips
- Close captioned movie in Flash
- captioning video in Flash
top
Solutions for Motor Disabilities
- voice recognition software
- one-handed keyboard
- keyboard accessibility
- Improving accessibility for motor impaired users
- make sure all functions are available by tabbing from link to link and do not require a mouse
- Give users a second chance in case they make a mistake -- e.g., do you really want to delete that file?
- Make sure all functions are available from the keyboard, which responds to voice activation.
- Provide a way to skip lengthy, less important sections of web page.(use hidden links that become available when the user tabs to them.
- Put most important information at top of HTML page (use CSS to lay out page).
top
Solutions for Cognitive Disabilities (also applies to those with low reading skills
- simple, easy-to-understand, consistent writing & navigation is essential
- when user clicks on something, the expected should happen (good affordances and feedback)
- Landmarks such as site search, site map, tools to help user know where they are and how to get where they want to go
- Structured page organization, using HTML tags such as header tags, ordered and unordered lists, blockquotes, dictionary items -- makes content easy to scan (and increases usability for everyone
- Visual organization: indent subsections; highlight important concepts
- Leave some white space around page elements -- makes content easier to grasp and comprehend
- use video and audio to convey meaning, since other media may clarify ideas to those who have difficulty reading
- Use clear and simple writing
- Use legible, clear fonts, with relative sizing
- Increase line height to separate lines of text.
- organize information into manageable chunks
- Disagreement over whether serif or sans-serif fonts are more legible on web
- Font face: Arial, Times New Roman good. Georgia (serif font) and Verdana (sans serif font) were both designed for the web. For more about text, read Web Style Guide section on typography. and WebAIM section on fonts
- Moving text, blinking text, and cursors that drag tails are too distracting for these users.
- Animation can be informative and useful, not just distracting.
- Icons have different meanings in different cultures. However, icons on this Web site help users who may not be able to read at all
top
Testing Readability level
Microsoft Word determines Reading level for cognitive disabilities and low reading skills
Copy text into a Microsoft Word document.
Spell and Grammar Check (In Word>Tools>Options tab for grammar & spelling, select Grammar & Spelling in Writing Style dropdown list).
- Click Tools>Options> & choose Spelling & Grammar Tab
- Click Check grammar with spelling checkbox.
- Click Show readability statistics checkbox to see reading level of your work (also if yours is a website, run any web pages through this checker to verify readability)
- In Writing style dropdown, choose Grammar & Spelling
- Click Settings button below Writing style dropdown, to set grammar checking options -- choose these options
- Click Reset All button for the strongest grammar check.
- Click OK and then click the Check Document button to run the grammar check on your report
- Be sure all text is grammatically correct
- Be sure spelling is correct
- Avoid images that may cause photoepileptic seizures because of flicker or strobe effects.
- Accessible Flash content
- Test the readability or your web page at Juicy Studio
top
Resources
Readings and Links for Accessibility
Visual disabilities
Cognitive disabilities
top
