Accessibility + Design

Transcription

1 Accessibility + 08 compliance begins with design 7979 Old Georgetown Rd. Suite 80 Bethesda, MD info@sparkexperience.com

2 Content Plan Heading Structure Early Ensure all content and design fits into a logical heading structure and utilizes < h > through < h6 > tags. Consider Reading Order The reading order should be the same as the visual order. the Keep the Code and Visuals Consistent Screen readers will read information based on the header tags in the HTML so keeping visuals consistent with the code is important. < h > </ h> < h > </ h> < h > </ h> < h > </ h> < h > </ h> < h > </ h> the Provide a Visible Download Link to Programs Needed to View Online Media If content on the page requires a specific player or plugin, a clear link for the user to download player needs to be visible.!! Download Flash Can t play video! Deal with it! translated Provide ARIA Roles for Better Screen Reader Navigation Including ARIA role properties within your HTML tags will help to ensure that visual hierarchy will get via text and screen readers. role = banner role = banner role = main role = main role = contentinfo role = contentinfo

3 Typography Provide Good Contrast Be especially careful with light shades of gray, orange, and yellow. The contrast ratio must be at least.. Use this contrast checker to test your designs: Contrast Checker: contrastchecker/ Don t Embed Text in Graphics Ensure all text is coded in HTML as it enlarges better, loads faster, and is easier to translate. Use CSS to add visual style. true text false text false text When text doesn t need to be embedded make sure to use an alt tag in the code! Avoid the Use of CAPS All caps can be difficult to read and can be read incorrectly by screen readers. This content is very easy to read because it uses capital letters in moderation. SAD TYPE This CONTENT is very difficult to read because IT ABUSES the use of capital letters. I M SHOUTING! When necessary, convert upper and lower case text to upper case using CSS s text-transform property. Use Adequate Font Size Font size can vary based on the font chosen, as well as the device being used, but pixels is usually a minimum. This content is quite easy to read. I bet you aren t struggling at all! Sad Type This content is very difficult to read. It is set in pt font and will be illegible to a large majority of people. This content is very difficult to read. It is set in pt font and will be illegible to a large majority of people. This content is very difficult to read. It is set in pt font and will be illegible to a large majority of people. Remember Line Length Don t make it too long or too short. Eight to ten words per line is usually a maximum. Happy Typography This is an appropriate line length. You can quickly read this text. Sad Typography This line length is way too long and will take your eyes too long to go from end of the page to the other. This causes ocular fatigue and will frustrate your users. 6 Remember Line Height Line height should generally be set at one and a half times the font size for optimal legibility. This content is very easy to read because the line spacing is set to. times the font size. Sad Type This content is very difficult to read. Actually it s nearly impossile! Ouch! My leading!

4 Links Make Sure Links are Recognizable Differentiate links in the body of the page with underlines or something other than color alone. Link Focus Indicators Ensure keyboard users can identify links when navigating with a keyboard. This can be accomplished visually for users with color blindness or, for images, with a title tag to describe where the image link will take them. Happy Links Sad Links??? Code Clue: Alt tags are used to describe what pictures are of. Avoid using the same label for both title and alt tags. a Skip to Main Content Link A keyboard accessible link for users to skip navigation should be at the top of the page. skip to content Ensure Link Text Makes Sense on Its Own Avoid Click Here or other ambiguous link text, such as More or Continue. See cat pictures Click this Prompt Users on External Links Inform users when they leave the site using iconography or pop-up windows can be good visual cues. You will be redirected to catvids.com See cat videos See cat videos

5 Everything Else Use Animation, Video, and Audio Carefully Provide a play/pause button. Avoid flashing or strobing content that could cause seizures. Audio Advice: Provide a transcript for audio content for those users with hearing disabilities. Twinkle Tip: Flickering should be kept either very slow (Hz) or very fast (Hz). Don t Convey Content with Color Alone Users often can t distinguish or may override page colors. Accessible Form Controls Ensure form controls have descriptive labels, instructions, validation/error messages, and can also be navigated with a keyboard. first name last name Jane submit Jane submit There must be a way to navigate the site with the keyboard For users with vision disabilities there must be a way to navigate the website without the use of a mouse.