background preloader

Web Accessibility for Designers

Web Accessibility for Designers
The focus of web accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript after a site has been designed visually. Optimal accessibility should start much earlier, as part of the visual design process. We have created an infographic that highlights a few important principles of accessible design. Text Version Plan Heading Structure Early Ensure all content and design fits into a logical heading structure. Consider Reading Order The reading order should be the same as the visual order. Provide Good Contrast Be especially careful with light shades of gray, orange, and yellow. Use True Text Whenever Possible True text enlarges better, loads faster, and is easier to translate. Watch the Use of CAPS All caps can be difficult to read and can be read incorrectly by screen readers. Use Adequate Font Size Font size can vary based on the font chosen, but 10 point is usually a minimum. Remember Line Length Don't make it too long or too short. Design Link Focus Indicators

Talk is cheap – screen reader testing on mobile | » Henny Swan's blog Testing your content on mobile need not be as painful as you think. If you have an Android and iOS device then you already either have a free mobile screen reader in your pocket or it’s a short download away. This is a quick guide to get you set up. I’ve not covered Nokia/Talks as Talks is costly at over £200 in the UK. There are so many mobile devices, browsers, OS’s and screen readers out there it can be hard to know where to start but you can’t cover them all and you have to start somewhere. The bottom line is that talk is cheap: the screen reader options listed here are free, or comparatively cheap, and widely available so there really is little excuse to not be testing website and web apps on mobile. Android OS: Android 2.2.2 (Froyo), Android 2.3.7 (Gingerbread), Android 3.2.2 (Honeycomb), Android 4.4 (Ice-cream sandwich) Android doesn’t have the best speech output support but is one to watch. Enabling speech output on Android: iOS Devices: iPhone 4, 4s, iPod Touch, iPad and iPad2

About WebAIM Our Mission WebAIM's mission is to expand the potential of the web for people with disabilities by providing the knowledge, technical skills, tools, organizational leadership strategies, and vision that empower organizations to make their own content accessible to people with disabilities. Our Method At WebAIM, we accomplish our mission by: providing services directly to organizations developing software tools creating instructional media fostering an active online community and exchange environment engaging in research, and participating in policy dialogues and processes. WebAIM is committed to the development and proliferation of accessible web content and technologies worldwide. Our Clients WebAIM has provided services and products to a wide variety of clients and partners from governmental agencies, businesses, education institutions, non-profit businesses, and Fortune 100 corporations. A few of our clients include: PayPal, Inc. Our Affiliate Organizations

Creative Web Source Files as A Dose For Designers digg Success of your online business greatly depends upon the effectiveness of your design. So, creativity in your design is like your goodness in one’s good book. It’s not of the treat because all these professional UI elements are absolutely free for both personal and commercial use (read author agreement before use, because we’re not owner of these stuff) to make your design creative and eye-catching. Graphite WordPress Template 1.1 Surface iPhone UI Kit FL Studio Mobile Envelope Product box Open Book Mockup Wedding Site Template HTML5 Coming Soon Template Fuelbrand1 Cut Tiny Icons iPad and iPhone icons Clean and Sexy Form Elements Tutorial Thumbnail PSD Simple APP Login Box Download Box Dark pop-up menus Snow UI Kit Gallery States Basal Icons Circle Social Media Icons Sign Up Envelope Subtle Progress Bar Open Sign Mush Icons Dark Mysterious Web Elements 3D Layered Button Profile Tooltip Tweet Badge Solid UI Kit Header & Navigation Pack Massive Web Button and UI Set Textured Alerts Buy Now Button UI User Profile

Universal Design for Learning - The ACCESS Project - Colorado State University The Best Practices through UDL video features faculty and students at Colorado State University discussing the benefits of UDL. Additional captioned formats are available, along with a transcript that includes descriptive audio. Universal Design for Learning (UDL) is a set of principles and techniques for creating inclusive classroom instruction and accessible course materials. At its core is the assertion that all students benefit when they are given multiples ways to take in new information, express their comprehension, and become engaged in learning. = New in 2012 = Updated in 2012 UDL Teaching Resources: UDL: A Concise Introduction (HTML | PDF) How Do You Teach? UDL Technical Modules N. The Provost’s N.

Blog - 10 Easy Accessibility Tips Anyone Can Use Today is Global Accessibility Awareness Day (GAAD). To celebrate and to help promote accessibility, here are 10 simple accessibility tips that most anyone can implement today into their web site’s HTML and CSS to make it more accessible. 1. Add Alternative Text to Your Logo Alternative text is presented to blind screen reader users in place of images they cannot see. Simply find your logo image in your markup, and if it’s not present, add an alt attribute with your company or organization name as its value. 2. ARIA landmarks identify significant page areas, giving them meaning and making them more keyboard navigable. 3. Sighted keyboard users generally navigate through the links and form fields on a web page using the Tab and Shift+Tab keys on the keyboard. The colors may need to be customized to fit your site design, but they should be fairly distinctive. To take this tip one step further, you can search your CSS files for a:hover and in each instance change it to a:hover, a:focus . 4.

Screen Reader User Survey #4 Demographics Region Disability Reported Screen Reader Proficiency Screen reader proficiency of respondents has increased in each successive survey. Internet Proficiency Internet proficiency has generally remained the same across all surveys. Devices Used When considering respondents who indicated that they use multiple devices, 1058 respondents (59%) use both a desktop computer and a laptop. 739 respondents (41%) use a screen reader on all three devices. Operating System Operating system data above was detected from the system used to complete the survey. Primary Screen Reader While JAWS is still the most popular screen reader, it has seen a significant decline in primary usage - down to 49% from 66.4% in October 2009 and 59.2% in December 2010. It is clear that screen reader users are abandoning more expensive primary screen readers for free and low-cost alternatives. Regional differences are also of note. Screen Readers Commonly Used Screen Reader Updates Reasons for Use Braille Output Browsers

Home - Assistive Technology Industry Association ATIA Orlando Conference Since 1999, ATIA has held an annual conference in Orlando, Florida in January that provides a forum for assistive technology education and communication to educators and practitioners serving those with disabilities. ATIA Orlando 2014 Wrap Up We Have a Winner of a Free ATIA 2015 Registration! ATIA 2014 Conference Recordings - Bundle of 10 or Complete Set of Recordings Save the Date! Dates for ATIA 2015 Orlando Call for Papers: April 21 - June 20, 2014 Conference: January 28 - 31, 2015 Pre-Conference: January 27 - 28, 2015 Exhibit at ATIA 2015 ATIA Online Professional Development In 2009 ATIA introduced a webinar series to complement the conference activities. ATIA also offers an Online Professional Development Subscription program designed to provide affordable access to ATIA's webinar series and 2014 Conference Recordings. Read More about Subscriptions Future Conference Dates

Outstanding Text Effects Tutorials in Illustrator Jul 22 2011 Adobe Illustrator is a powerful tool that you can create fluffy, vague, sparkling, gelatinous, glossy, glittery, retro and revolutionary effects with. Creating a particular text effect in Illustrator is not that difficult now; thanks to the availability of huge number of tutorials that guide you through each step. Here we have gathered a collection of around 50 amazingly helpful tutorials that let you create breathtaking typographic effects in Illustrator. Text Effects in Illustrator Create a Poster Theme Illustration in IllustratorThis following tutorial lets you create beautiful poster theme illustrations simply, using Adobe Illustrator. How to Create a Neon Text Effect Using Adobe IllustratorCreate appealing and tempting neon text effects by using Gradient Mesh, 3D Modeling, Art Brushes and Transparency palette. How to Create Colorful Neon Text with Adobe IllustratorThis tutorial teaches you some quick tips on how to create a colorful neon text effect. (rb)

Appropriate use of alternative text Alternative Text Basics Alternative text provides a textual alternative to non-text content in web pages. We will be discussing alternative text for images only, though the principles can be applied to media, applets, or other non-text web content. Alternative text serves several functions: It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities. The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. Alternative text can be presented in two ways: Within the alt attribute of the img element. This means that the alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. Important The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. Note

Web Transformation Project | A transparent and collaborative approach to building the new University of Strathclyde website Designing for Screen Reader Compatibility You are here: Home > Articles > Designing for Screen Reader Compatibility Overview Screen readers are audio interfaces. Screen readers do not read web content quite like human beings do. Two of the most common screen readers are JAWS, by Freedom Scientific, and Window Eyes, by GW Micro. Content Linearization Audio interfaces present content linearly to users, one item at a time. Skimming Through Content Despite the linear nature of audio interfaces, there are some ways in which screen reader users can "skim" through the content. Headings Another way to skim the page to get an overall impression of a page's content is to jump from heading to heading. Implication: Authors should organize content with headings. Landmarks and page sections Users can navigate via ARIA landmarks and HTML5 sectioning elements, such as <main>, <nav>, <header>, etc. Implication: Define appropriate ARIA landmarks and use HTML5 elements appropriately. Paragraphs and page elements "Skip navigation" links Others Important

Captioning Resource List Captions Captions are text versions of the spoken word presented within multimedia. Captions allow the content of web audio and video to be accessible to those who do not have access to audio. Though captioning is primarily intended for those who cannot hear the audio, it has also been found to help those that can hear audio content, those who may not be fluent in the language in which the audio is presented, those for whom the language spoken is not their primary language, etc. Common web accessibility guidelines indicate that captions should be: Synchronized - the text content should appear at approximately the same time that audio would be available Equivalent - content provided in captions should be equivalent to that of the spoken word Accessible - caption content should be readily accessible and available to those who need it On the web, synchronized, equivalent captions should be provided any time multimedia content (generally meaning both visual and auditory content) is present.

40 Awesome Illustrator Tutorials In this roundup we have showcased some of the creative illustrator tutorials from 2011. These include typography, character design, poster design, logo design, portrait design and many more. Enjoy!! Artistic Printing Inspiration in Illustrator and Photoshop Create a Lava Island Scenario in Illustrator Vintage Badge in Illustrator and Photoshop Create a Hellboy Poster in Illustrator Create a Jar Illustration and Splashy, Purple Text Effect Create an Adorable Puppy with Negative Space and the Paintbrush Tool How To Create a Grumpy Troll Character in Illustrator Create a Sparkly Female Portrait in Illustrator Create a Vibrant Abstract Vector Design Illustrator How To Create a Retro Badge/Emblem Style Logo How To Create a Colorful Abstract Poster in Illustrator How To Create an Intricate Vector Heart Illustration Create a Chalkboard Type Treatment Create a Vector Chopper with Illustrator CS5 and VectorScribe How to Create a Retro Style Textured Logo Creating an Illustrative Monogram Vintage vector textures

Related: