Here at Sparkbox, accessibility has become a very important topic for us. We are always looking to build a better web, and that means building a web that is accessible to all users.
Recently, we had some Sparkboxers take the Web Accessibility Specialist (WAS) Exam. As they were studying, Kasey Bonifacio decided to create a study guide with simplified content to help her remember the WCAG 2.1 principles and their corresponding guidelines. She then shared each of the guidelines and their examples with the entire team over 13 days to help them study. And it seems to have worked well because we had seven Sparkboxers pass the WAS Exam. Four of those had previously passed the CPACC exam, which means they are now CPWA certified!
Sparkboxers who are Web Accessibility Specialists (WAS): Corinne Ling, Lindsey Wild, and Philip Zastrow
Sparkboxers who are Certified Professionals in Web Accessibility (CPWA): Kasey Bonifacio, Catherine Meade, Lindsay Silver, and Heather Taylor
Now, we are sharing Kasey’s 13 Days of Accessibility with you! Join the conversation by tagging our Twitter or using #13DayA11y. Each guideline falls under one of the four POUR principles.
Perceivable
Day 1: Text Alternatives
#1 Provide text alternatives for any non-text content so that it can be changed into other forms people need. Add alt text to images or alternatives to CAPTCHA. #13DayA11y #accessibility https://t.co/etq7cIlceb
— Sparkbox (@hearsparkbox) July 11, 2019
Day 2: Time-Based Media
#2 Provide alternatives for time-based media. This means providing transcripts for audio and video components or providing extra descriptions of videos when the audio is insufficient to describe what is happening. #13DayA11y #accessibility https://t.co/xr3CRhaQJf
— Sparkbox (@hearsparkbox) July 12, 2019
Day 3: Adaptable
#3 Create content that can be presented in different ways without losing information or structure. Test your site for this by using Safari Reader mode or rotate your device between landscape and portrait modes. #13DayA11y #accessibility https://t.co/luvYRa2uT7
— Sparkbox (@hearsparkbox) July 13, 2019
Day 4: Distinguishable
#4 Make it easier for users to see and hear content. Have sufficient contrast between text and background colors, use color and icons together to show messages, and ensure background music doesn't interfere with dialogue. #13DayA11y #accessibility https://t.co/PxfCntnPg7
— Sparkbox (@hearsparkbox) July 14, 2019
Operable
Day 5: Keyboard Accessible
#5 Make all functionality available from a keyboard. Users should be able to open and close modals and popups without needing a mouse or touchpad, and interactive components on the page should use the button element. #13DayA11y #accessibility https://t.co/kyQJGASBeN
— Sparkbox (@hearsparkbox) July 15, 2019
Day 6: Enough Time
#6 Provide users with enough time to read and use content. Give a warning message with an option for more time if the user is going to be logged out. And if you have auto play carousels, add pause or stop options. #13DayA11y #accessibility https://t.co/cazFffwy1t
— Sparkbox (@hearsparkbox) July 16, 2019
Day 7: Seizures and Physical Reactions
#7 Do not design content that is known to cause seizures. Avoid animations that flash more than 3 times per second and give users the option to pause or hide animated GIFs. #13DayA11y #accessibility https://t.co/DFzQUmjd1J
— Sparkbox (@hearsparkbox) July 17, 2019
Day 8: Navigable
#8 Provide ways to help users navigate, find content, and determine where they are by adding a 'skip to content' link, keeping titles relevant to the content, and using breadcrumb navigation with nested pages. #13DayA11y #accessibility https://t.co/rGOIkcmeo5
— Sparkbox (@hearsparkbox) July 18, 2019
Day 9: Input Modalities
#9 Make it easier for users to operate functionality through various inputs besides their keyboard. For example, ensure a list that can be reordered by drag and drop can also be controlled by buttons. #13DayA11y #accessibility https://t.co/yXLdFDw4km
— Sparkbox (@hearsparkbox) July 19, 2019
Understandable
Day 10: Readable
#10 Make text content readable and understandable. Avoid technical jargon, use an 'abbr' tag when possible, and set the 'lang' attribute at the top of each page to ensure proper pronunciation and inflection for screen readers. #13DayA11y #accessibility https://t.co/uCQeUi0Eqp
— Sparkbox (@hearsparkbox) July 20, 2019
Day 11: Predictable
#11 Make web pages appear and operate in predictable ways by keeping global elements and navigation the same on each page. And don't forget to use consistent language when labeling things! #13DayA11y #accessibility https://t.co/idr1Qj4yKC
— Sparkbox (@hearsparkbox) July 21, 2019
Day 12: Input Assistance
#12 Help users avoid and correct mistakes by providing labels or examples for all inputs. Also, show success or error messages when a form is submitted and give users a second chance to confirm their information. #13DayA11y #accessibility https://t.co/fF9Bi2rkFs
— Sparkbox (@hearsparkbox) July 22, 2019
Robust
Day 13: Compatible
#13 Maximize compatibility with current and future user agents, including assistive technologies, by writing semantic and valid HTML. #13DayA11y #accessibility https://t.co/XDvVDrB9yc
— Sparkbox (@hearsparkbox) July 23, 2019